How useEffect() hook internally works?

Before introduction of react hooks, React(before v16.8.0) uses class components to handle component life cycle. Component life cycle is sequence of actions like component mount, component updates state, component un-mount etc. when rendering. These actions will be called its respective methods when rendering as shown below.

React component life cycle

React introduced react hooks from v16.8.0 to handle statement more effectively by using function components instead of class components. One of the react hook useEffect() is used to handle component life cycle actions while rendering. Lets deep dive into useEffect() how it internally works.

How useEffect() works?

This hook takes two arguments to handle component life cycle methods.

1. Call back function
   - This is a mandatory parameter
   - This call back function will be called when react component is mounted/ state is updated
   - This call back function returns another function when component is unmounted or unloaded.
   - This return function is optional, if you want to perform any actions while un-mounting, we can do in this return function
2. List
   - This is optional parameter
   - If this value is not passed, first parameter(call back function) is called all the time for mounting, un-mounting and state updates with in that component
   - If empty list is passed, first parameter only called when mounting and un-mounting. This will NOT be called when state update.
   - If the state variable is passed in the list, first parameter is called only when that state variable is updated.

useEffect hook functionality

Possible use cases for useEffect() hook:

1. Only when component mounting
   - Common use case: Calling external API to show data when loading page
   - Below is the sample code

useEffect(() => {
    console.log("Mounting or loading component)");
  }, 
[]// passing empty list
);

2. Component mounting and un-mounting
- Common use case: when you want to clean up while un-mounting the component
- Below is the sample code

useEffect(() => {
    console.log("Mounting or loading component)");

    // below return runs when component unmounting
    return () => {
      console.log("Clean up process: component unmounting.");
    };
  }, 
[]// passing empty list
);

3. Component state update
- Common use case: Calling when one or more state variable updates
- Below is sample code

//State variables
const [counter, setCounter] = useState(0);
const [visible, setVisible] = useState(false);

useEffect(() => {
    console.log("Mounting or updating state)");

    return () => {
      console.log("Clean up process: component unmounting.");
    };
  }, 
[counter] //Telling useEffect to update only when counter value updated
);

4. Call useEffect for all the events(mounting, un-mounting, updating)
- Avoid using this scenario.
- Not passing second param to useEffect() may have unwanted side effects

// Only passing callback, not passing second params
useEffect(() => {
    console.log("Mounting or updating state)");

    return () => {
      console.log("Clean up process: component unmounting.");
    };
  }, 
);

Please refer this GitHub for complete source code.

Happy Learning!!!