React Component Lifecycle Events using React Hooks

TL;DR: Full credit to this Stack Overflow answer:

answer re: componentDidMount equivalent on a React function/Hooks component?

Feb 12 '19

533

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…

Open Full Answer

While working on my side project, of which I wrote in my series The Lean Startup hands on, I came across a new challenge. I wanted to reload the content of a functional component when its props changed.

It is great when a side project brings you opportunities to learn new things. In this case I needed to learn how to implement what I would normally do via a Lifecycle Event in a React Class Component, but using React Hooks in a Functional Component.

As my usual way of looking for answers, I first turned to Stack Overflow. A quick search, linked above, gave me all I needed to know and more. How to implement basic lifecycle events using the useEffect hook. So here they are.

componentDidMount

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

componentDidUpdate

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

componentWillUnmount

useEffect(() => {
  // Your mount code here

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