Tukukkk

In the official docs of React it mentions -

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

My question is - how can we use the componentWillMount() lifecyle method in a hook?

You cannot use any of the existing lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount etc.) in a hook.They can only be used in a class components. And Hooks you can only use in a functional components. What the below line 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 listners, cancel the timer etc). Say you are adding a event listner in componentDidMount and remvoing it in componentWillUnmount as below.

componentDidMount() {

  window.addEventListner('mousemove', () => {})

}



componentWillUnmount() {

  window.removeEventListner('mousemove', () => {})

}

Hook equivalent of above code will be

useEffect(() => {

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



  // returned function will be called on component unmount 

  return () => {

    window.removeEventListner('mousemove', () => {})

  }

}, )

According to reactjs.org, componentWillMount will not be supported in the future.
https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

There is no need to use componentWillMount.

If you want to do something before the component mounted, just do it in the constructor().

If you want to do network requests, do not do it in componentWillMount. It is because doing this will lead to unexpected bugs.

Network requests can be done in componentDidMount.

Hope it helps.

https://reactjs.org/docs/hooks-reference.html#usememo

Remember that the function passed to useMemo runs during rendering.
Don’t do anything there that you wouldn’t normally do while rendering.
For example, side effects belong in useEffect, not useMemo.