如何避免在React Component中使用事件侦听器进行无限重新渲染？

Question

I have a React/ Electron app. I need to get some database table from my main.js, and I need to set the state to this table.

For this, i have written the following listener:

ipcRenderer.on('sendTable', (evt, arg) => {
  this.props.setTable(arg);
});

It waits for main.js to send a 'sendTable' event, with the table as the argument. Then, I set my Redux store to that table. This kind of works.

However, I don't know where to put this listener. If I put it in the constructor or render function of my component, I end up with an infinite loop. But I need to set this up once, since I do need to listen. Where could I put it?

Answer 1

It's a good practice to attach the event listeners in the componentDidMount and detach the event listeners in the componentWillUnmount !

See the code example:

class Foobar extends Component {

  componentDidMount() {
    ipcRenderer.on('sendTable', (evt, arg) => {
      this.props.setTable(arg);
     });
  }

  componentWillUnmount() {
    // Make sure to remove the DOM listener when the component is unmounted
    // read the ipcMain documentation to understand how to attach and detach listeners
    ipcMain.removeListener(channel, listener)
  }

  render() {
   // stuff
  }

}