React useComponentDidMount hook

React, Hooks, Effect · Oct 13, 2021

Executes a callback immediately after a component is mounted.

  • Use the useEffect() hook with an empty array as the second argument. This will execute the provided callback only once when the component is mounted.
  • Behaves like the componentDidMount() lifecycle method of class components.
const useComponentDidMount = onMountHandler => {
  React.useEffect(() => {
    onMountHandler();
  }, []);
};
const Mounter = () => {
  useComponentDidMount(() => console.log('Component did mount'));

  return <div>Check the console!</div>;
};

ReactDOM.render(<Mounter />, document.getElementById('root'));

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this