How to Use Componentwillmount() in React Hooks

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 How to get to componentWillUnmount

The basic equivalents for componentDidMount and componentWillUnmount in React Hooks are:

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

//componentWillUnmount
useEffect(() => {
   return () => {
       doSomethingOnUnmount();
   }
}, [])

These can also be combined into one useEffect:

useEffect(() => {
    doSomethingOnMount();
    return () => {
        doSomethingOnUnmount();
    }
}, [])

This process is called effect clean up, you can read more from the documentation.

React hooks in dynamic lists - more hooks than previous render

The problem is in EstateOverview:

return ( 
    <List>
        {props.estateOverview.propertyGroups.map((group) => PropertyGroup(group))}
    </List>
);

This is attempting to render a React component by calling it as a function. What you should do, especially when dealing with functional components that contain hooks:

1. Use React.createElement
2. Use JSX to render the component (Using JSX calls React.createElement under the hood)

This is the correct way to render this:

return ( 
    <List>
        {props.estateOverview.propertyGroups.map((group) => <PropertyGroup {...group} />)}
    </List>
);

How i can use react hooks with native SSR (without NextJS)?

useState returns an array, not an object

const [ greetingsBlockData, setGreetingsBlockData ] = useState({})

---

Related Topics