How to use componentWillMount() in React Hooks?

by

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', () => {})
  }
}, [])

More Related Contents:

  1. Loop inside React JSX
  2. Why shouldn’t JSX props use arrow functions or bind?
  3. How can I use multiple refs for an array of elements with hooks?
  4. React useEffect in depth / use of useEffect?
  5. Is useState synchronous? [duplicate]
  6. React hooks – right way to clear timeouts and intervals
  7. React Hooks useState() with Object
  8. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  9. Where can I make API call with hooks in react?
  10. How to render HTML string as real HTML?
  11. Multiple calls to state updater from useState in component causes multiple re-renders
  12. How can I force a component to re-render with hooks in React?
  13. Executing async code on update of state with react-hooks
  14. Why React Hook useState uses const and not let
  15. Passing props into external stylesheet in React Native?
  16. How to change the value of a Context with useContext?
  17. How to prevent re-rendering of components that have not changed?
  18. How target DOM with react useRef in map
  19. How to programmatically clear/reset React-Select?
  20. React Hooks Error: Hooks can only be called inside the body of a function component
  21. React hooks: call component as function vs render as element
  22. Why can’t React Hooks be called inside loops or nested function?
  23. How to set initial state for useState Hook in jest and enzyme?
  24. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  25. React Hook “useEffect” is called conditionally
  26. How to have nested loops with map in JSX?
  27. What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. Why would we use useEffect without a dependency array?

Leave a Comment