Repository: electron
Issue: [Feature Request]: Add to the IPC method 3 docs clean up function!
Labels: enhancement :sparkles:,documentation :notebook:

### Preflight Checklist

- [X] I have read the [Contributing Guidelines](https://github.com/electron/electron/blob/main/CONTRIBUTING.md) for this project.
- [X] I agree to follow the [Code of Conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
- [X] I have searched the [issue tracker](https://www.github.com/electron/electron/issues) for a feature request that matches the one I want to file, without success.

### Problem Description

I'm writing in Electron + Node and React.
I wanted to send an update to the UI when videos stopped rendering in the background. So I read about IPC (Inter-Process Communication) on the Electron website: https://www.electronjs.org/docs/latest/tutorial/ipc
Pattern 3: Main to Renderer is exactly what I need!
So I implemented it. However, I wasn't sure where to put the code in the React component. Eventually, I decided to use useEffect:
"useEffect is a React Hook that lets you synchronize a component with an external system." (source: https://react.dev/reference/react/useEffect)
But it keeps showing me multiple duplicate updates. For example, two of the first update and more of the subsequent updates.
After a while, I understood that it was due to double runs in React strict mode. This means I need to do better cleanup, but I only found cleanup functions where "ipcRenderer.on" is used in the renderer.js, not in the preload.js as it is in the current code. Furthermore, in the IPC part of the docs, I couldn't find any clean functions.

**I know it's a small thing, but it took me days to fix.**

It's super important when using React.


### Proposed Solution

In https://www.electronjs.org/docs/latest/tutorial/ipc#pattern-3-main-to-renderer you can add something along the lines:
When using react, and sending a component data from the back you will want to probably add the listener in useEffect hook and remove the lister in the clean up function. Which used to "useEffect is a React Hook that lets you synchronize a component with an external system."
Warning: 
- If the data is get to you twice, its because of strict mode https://react.dev/reference/react/useEffect#my-effect-runs-twice-when-the-component-mounts
<Example of cleaning up a function in preload.js I wrote in aminute needs to be validated>

```
// preload.js
contextBridge.exposeInMainWorld('electronAPI', {
    handleCounter: (callback) => ipcRenderer.on('update-counter', callback),
    // Call the remove function in the clean up funciton (inside useEffect return)
    removeHandleCounter: (callback) => ipcRenderer.removeAllListeners("update-counter"),
  })
```
  
```
//  renderer.js
    useEffect(() => {
    const listener = (event, value) => {
      setValue((prevValue) => prevValue + value);
    };

    window.electronAPI.handleCounter(listener);

    // This function will run when the component unmounts
    return () => {
      window.electronAPI.removeHandleCounter(listener);
    };
  }, []);
```

### Alternatives Considered

I think trying to improve the docs might be a good strategy for noobs like me.

### Additional Information

_No response_