componentDidMount equivalent on a React function/Hooks component?

javascript reactjs react-hooks
jeyko picture jeyko · Dec 27, 2018 · Viewed 32.8k times · Source

Are there ways to simulate componentDidMount in React functional components via hooks?

Answer

Mertcan Diken picture Mertcan Diken · Feb 12, 2019

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.

Related questions

What is useState() in React?

I am currently learning hooks concept in React and trying to understand below example. import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>…

Read More
How to use componentWillMount() in React Hooks?

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() …

Read More
How to call loading function with React useEffect only once

The useEffect React hook will run the passed in function on every change. This can be optimized to let it call only when the desired properties change. What if I want to call an initialization function from componentDidMount and not …

Read More