UseEffect in Functional Component Vs Class Component Methods (Also Starting a Learn React Hooks Series)

Source: Literally searched for “useEffect vs lifecycles images”

Note: I will be starting a series on React Hooks, where I follow no particular order of hooks but will surely cover all the in-built hooks in React and probably cover some of the most useful custom hooks. If you would like to get the notifications for the same, you can follow me and subscribe to my emails to join the journey!

Beginners get confused when we talk about the life-cycle methods of class components that compare to useEffectin functional components.
In this short post, we will be understanding the comparison between them so as to provide a clearer picture of how they relate. Let’s get started.

It is required for you to know about useEffecthook beforehand. I’m just going to compare the hook, not explain it. I will explain it in the series though :)

If you do not know yet, a component’s lifecycle has three main phases: the Mounting Phase, the Updating Phase, and the Unmounting Phase. These phases had separate methods each to handle different things at phases in class components, which are all now replaced by useEffectin functional components. A simple summary with a code as an example is provided at the end.

Mounting Phase:

componentDidMount() (Class Component):

• Executes after the component is mounted in the DOM.
• Used for initial setup, data fetching, or subscriptions.

useEffect(() => {}, []) (Functional Component):

• Runs after the initial render.
• Equivalent to componentDidMount() when an empty dependency array ([]) is provided.
• Use it for initial setup and fetching data similar to componentDidMount().

Update Phase:

componentDidUpdate() (Class Component):

• Triggers after each update caused by changes in props or state.
• Used for performing actions based on new prop/state values.

useEffect(() => {}, [dependencies]) (Functional Component):

• Executes after every render if any of the dependencies in the array change.
• Equivalent to componentDidUpdate() when dependencies are provided.
• Use it to handle side effects based on specific prop or state changes.

NOTE: Unlike componentDidMount, the behavior of componentDidUpdate is subjective and depends on how you want the hook to behave. It could include componentDidMount mapping or a combination of componentDidMount and shouldComponentUpdate mapping with an additional reference variable to check if the component has been mounted.
This can be handled in functional components with the useRefhook as shown below.

const hasMount = useRef(false);

useEffect(() => {

  if (hasMount.current) {
    // code to run when the component is updated
  } 
  else {
    hasMount.current = true;
  }
}, [/* dependencies */]);

Unmounting Phase:

componentWillUnmount() (Class Component):

• Executes just before the component is removed from the DOM.
• Used for cleanup tasks like unsubscribing, removing event listeners, etc.

useEffect(() => { return () => {} }, []) (Functional Component):

• The return function inside useEffect acts as the cleanup phase.
• It runs before the component unmounts.
• Use it for cleanup tasks similar to componentWillUnmount().

Hence, Functional Components with useEffect:

• Provides a unified way to handle side effects in different phases of a component’s lifecycle.
• Requires defining dependencies explicitly, making it more controlled and precise.
• In a class component, you can only define one of each lifecycle method. With hooks, you can define as many useEffect hooks as needed.

A Simple summary with code:

// Class Component

class MyComponent extends React.Component {

  componentDidMount() {
    // Runs after initial render
    // Setup, data fetching, subscriptions
  }  

  componentDidUpdate(prevProps, prevState) {
      // Runs on updates
      // Actions based on prop/state changes
    }

  componentWillUnmount() {
      // Runs before unmount
      // Cleanup tasks
  }

  render() {
    // ...
  }
}

// Functional Component with useEffect
function MyFunctionalComponent() {

  useEffect(() => {
    // Equivalent to componentDidMount when [] provided
    // Setup, data fetching, subscriptions

    return () => {
      // Equivalent to componentWillUnmount
      // Cleanup tasks
    };

  }, []); // Dependency array to control when to run

  return ()
}

Please consider showing your appreciation by providing feedback or suggestions in the comments and if you are pleased too much, you can always buy me a coffee 😉

Thanks for reading till the end!

You can read some of my other popular posts:

map(), filter(), reduce() in JavaScript with simple examples

All You Need to Know About the “Fetch API”

I Coded a Script to Download the “Download Restricted” Files from Google Drive

The Best Readme Generators for Your GitHub Profile

parseInt(0.000005) = 0 whereas parseInt(0.0000005) = 5, but how?

Did you know ‘x === x’ can return FALSE?

So what’s new in ECMA 2023?

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.