What's the React Functional Component Equivalent of componentDidMount()?

The React useEffect() hook can be used as the functional component alternative for the class component lifecycle method componentDidMount(). It has the following syntax:

useEffect(callback, dependencies);

To make an effect run when the component is mounted, you would have to pass in an empty array for useEffect() dependencies list, for example, like so:

useEffect(() => {
  // ...
}, []);

This would mean that:

  • The effect is run when the component is mounted (after the browser has painted);
  • The effect has no dependencies (such as values from props or state), therefore, it never needs to re-run;
  • Any props and/or state used inside the effect will have their initial values when the effect is run on mount.

Hope you found this post useful. It was published . Please show your love and support by sharing this post.