Componentdidmount Equivalent on a React Function/Hooks Component

componentDidMount equivalent on a React function/Hooks component?

For the stable version of hooks (React Version 16.8.0+)

For componentDidMount

useEffect(() => {
  // Your code here
}, []);

For componentDidUpdate

useEffect(() => {
  // Your code here
}, [yourDependency]);

For componentWillUnmount

useEffect(() => {
  // componentWillUnmount
  return () => {
     // Your code here
  }
}, [yourDependency]);

So in this situation, you need to pass your dependency into this array. Let's assume you have a state like this

const [count, setCount] = useState(0);

And whenever count increases you want to re-render your function component. Then your useEffect should look like this

useEffect(() => {
  // <div>{count}</div>
}, [count]);

This way whenever your count updates your component will re-render. Hopefully this will help a bit.

How to Use componentDidMount() in Functional Component to execute a function

You will want to use the useEffect hook with an empty dependency array which will make it act as componentDidMount source.

export const Search = (props) => {

    const { contacts, setContacts, onSearchComplete } = props;

    const [msgBox, setMsgBox] = useState(null);
    const [loading, setLoading] = useState(false);

    const onSearch = async () => {
      ...
    }

    useEffect(() => {
      onSearch();
    }, []);

    return (
        <Box>      
            {loading ? <LinearProgress /> : <Box>{msgBox && (<a style={{ cursor: 'pointer' }} onClick={() => setMsgBox(null)} title="Click  to dismiss"><MessageBox type={msgBox.type || 'info'}>{msgBox.message}</MessageBox></a>)}</Box>}
        </Box>
    );
}

React Functional Component: how to use componentDidMount()

You're going to need React Hooks! All life-cycle methods we were doing in class components are available in functional components too via React Hooks, even in a better way. Read more about React hooks here: https://reactjs.org/docs/hooks-intro.html

And in this case, the equivalent of componentDidMount is this:

import { useEffect } from 'react'

export default function Daw() {
  useEffect(() => {
    // Code here will run just like componentDidMount
  }, [])

  return (
    <>
        <div>Hello world.</div>
    </>
  )
}

You can also learn about Effects in React by reading my article: A Beginner’s Guide to Effects in React

Does ComponentDidMount not work with react hooks?

With hooks you can use useEffect to get same result.

This one would work like componentDidMount

useEffect(() = > {
}, []) 

If you put a callback in empty array then it would work when you use that callback

How to use componentWillMount() in React Hooks?

You cannot use any of the existing lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount etc.) in a hook. They can only be used in class components. And with Hooks you can only use in functional components. The line below comes from the React doc:

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

suggest is, you can mimic these lifecycle method from class component in a functional components.

Code inside componentDidMount run once when the component is mounted. useEffect hook equivalent for this behaviour is

useEffect(() => {
  // Your code here
}, []);

Notice the second parameter here (empty array). This will run only once.

Without the second parameter the useEffect hook will be called on every render of the component which can be dangerous.

useEffect(() => {
  // Your code here
});

componentWillUnmount is use for cleanup (like removing event listeners, cancel the timer etc). Say you are adding a event listener in componentDidMount and removing it in componentWillUnmount as below.

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

Hook equivalent of above code will be as follows

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])

React hooks: proper way to use useEffect to replace componentDidMount

To have an useEffect equivalent to componentDidMount, use the empty array [] as the second argument. An empty dependency list ensures the function is executed just once, on the first render.

React Hooks and Component Lifecycle Equivalent

componentDidMount

Pass an empty array as the second argument to useEffect() to run only the callback on mount only.

function ComponentDidMount() {  const [count, setCount] = React.useState(0);  React.useEffect(() => {    console.log('componentDidMount');  }, []);
  return (    <div>      <p>componentDidMount: {count} times</p>      <button        onClick={() => {          setCount(count + 1);        }}      >        Click Me      </button>    </div>  );}
ReactDOM.render(  <div>    <ComponentDidMount />  </div>,  document.querySelector("#app"));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>

---

Related Topics