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 i

Answer 1

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 e.g. 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 (
     

       
You clicked {count} times
        setCount(count + 1)}>
         Click me
       
     
   );
 }

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.