React life-cycle events in functional components

Functional components are easier to deal with. We need less code to get the same result comparing to Class components.

So the question is: how to deal with life-cycle events? The answer is hook useEffect.
This hook is equivalent to life cycle methods componentDidMount, componentDidUpdate and componentWillUnmount.

import React, { useEffect } from 'react';
const ourComponent => () => {
   useEffect( () => {
      // Anything in here is fired on component mount.
   });
}

How many times this code inside will be executed depends on array of dependencies passed as a second argument.
If we don't pass any array (even empty) our effect will be fired with every render.
If we want to execute effect only on first render we need to pass empty array.

useEffect(() => {
   console.log("Effect has been called");
}, []) // Empty array as dependency, useEffect is invoked once

If we pass value inside array in second parameter, the effect will be fired only when the value from previous render is not the same.

const[state, setState] = useState(0); 
     useEffect(() => { 
          console.log(state); 
          // since we are using state, we have 
          // to pass it as a dependency 
     }, [state]) 

We can manage componentWillUnmount adding return function inside effect. Everything inside return will be fired when component unmounts.

const ComponentExample => () => {
    useEffect(() => {
        return () => {
            // Anything in here is fired on component unmount.
        }
    }, [])
}

There is also possibility to use it in both situations. componentDidMount and componentWillUnmount

const ComponentExample => () => {
    useEffect(() => {
        // Anything in here is fired on component mount.
        return () => {
            // Anything in here is fired on component unmount.
        }
    }, [])
}