Which event to use when React app finishes loading

Question

Am writing a script to be triggered when all React components has been loaded. I tried using

window.addEventListener('load')

an

document.addEventListener('DOMContentLoaded')

but both don't work very well (triggered only at the beginning)

Is there another event to listen to such that it fires only after all loading has been done?

Answer 1

If you want to call external code after your React application has fully loaded, this can be done in the componentDidMount lifecycle method of your root component:

Some global code:

window.runStartupTasks = () => {
  widget.doSomething();
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <RootComponent />
    document.getElementById('app-container')
  );
})

Your root component

class RootComponent extends React.Component {

  componentDidMount () {
    window.runStartupTasks();
  }

  render () {
    return (
      <div></div>
    )
  }
}