How to use lifecycle methods with hooks in React?

Question

I have gone through hooks introduced in react v16.7.0.

https://reactjs.org/docs/hooks-intro.html

So my understanding about hooks is we can play with state in functional component without writing class components in react. This is really amazing feature.

But I am not getting clear picture about using hooks in functional components.

   import { useState } from 'react';

   function Example() {
   const [count, setCount] = useState(0);

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
      </div>
   );
  }

how can I use life cycle methods in the above functional component if I use hooks?

Answer 1

Here are examples for the most common lifecycles:

componentDidMount

Pass an empty array as the second argument to useEffect() to run only the callback on mount only.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, []); // Pass an empty array to run only callback on mount only.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

componentDidUpdate (loose)

By passing just the single argument into useEffect , it will run after every render. This is a loose equivalent because there's a slight difference here being componentDidUpdate will not run after the first render but this hooks version runs after every render.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }); // No second argument, so run after every render.

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

componentDidUpdate (strict)

The difference of this example with the example above is that the callback here would not run on initial render, strictly emulating the semantics of componentDidUpdate . This answer is by Tholle , all credit goes to him.

function Example() {
  const [count, setCount] = useState(0);

  const firstUpdate = useRef(true);
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log('componentDidUpdate');
  });

  return (
    <div>
      <p>componentDidUpdate: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

componentWillUnmount

Return a callback in useEffect 's callback argument and it will be called before unmounting.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Return a callback in useEffect and it will be called before unmounting.
    return () => {
      console.log('componentWillUnmount!');
    };
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

shouldComponentUpdate

You can already achieve this on the component level using React.PureComponent or React.memo . For preventing rerendering of the child components, this example is taken from React docs :

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

getDerivedStateFromProps

Again, taken from the React docs

function ScrollView({row}) {
  let [isScrollingDown, setIsScrollingDown] = useState(false);
  let [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    // Row changed since last render. Update isScrollingDown.
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }

  return `Scrolling down: ${isScrollingDown}`;
}

getSnapshotBeforeUpdate

No equivalent for hooks yet.

componentDidCatch

No equivalent for hooks yet.

Answer 2

Well, you don't really have lifecycle methods. =) But you could use the effect hook as shown here https://reactjs.org/docs/hooks-effect.html

The effect hook will be able to replicate the behavior of componentDidMount, componentDidUpdate, and componentWillUnmount

So you really don't need lifecycle methods in the component. The effect hook is taking their place instead. =)

Read the link above and you will get a few examples on how they work.

Answer 3

The React team has provided a useEffect hook for this purpose. Let's take the component in your example and add server uploading for the count, which we would otherwise put in eg componentDidUpdate :

 import { useState, useEffect } from 'react';

 function Example() {
   const [count, setCount] = useState(0);
   useEffect(() => {
     fetch(
       'server/url',
       {
         headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({count}),
       }
     ); 
   });

   return (
     <div>
       <p>You clicked {count} times</p>
       <button onClick={() => setCount(count + 1)}>
         Click me
       </button>
     </div>
   );
 }

This doesn't seem like a huge win in this example because it isn't. But the problem with the lifecycle methods is that you only get one of each of them in your component. What if you want to upload to the server, and trigger an event, and put a message on a queue, and none of those things are related? Too bad, they all get crammed together in componentDidUpdate . Or you have n layers of wrapped HOCs for your n things you want to do. But with hooks, you can split all of those up into decoupled calls to useEffect without unnecessary layers of HOCs.

Answer 4

Functional components are purly stateless components. But in React 16.8, they have added Hooks. Hooks can be used in place of state and lifecycle methods.

Yes, you can think of useEffect Hook as Like

• componentDidMount

• componentDidUpdate ,

• componentWillUnmount

• shouldComponentUpdate combined.

• Note It is a close replacement for componentDidMount , componentDidUpdate and , componentWillUnmount & shouldComponentUpdate