useEffect Hook in React

In React, managing component lifecycle in functional components was traditionally challenging until the introduction of the useEffect hook. This powerful hook not only simplifies lifecycle management but also allows functional components to mimic the behavior of class-based components effectively.

Using useEffect in Functional Components: To use useEffect in a functional component, import it from ‘react’ along with other necessary hooks like useState. Then, define the effect inside the component using useEffect. The effect can perform tasks such as fetching data, subscribing to events, or updating the document title.

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  };

  return (
    <div>
      <p>{data ? data.message : 'Loading...'}</p>
    </div>
  );
}

Managing Lifecycle Methods: With useEffect, functional components can replicate the behavior of class-based components’ lifecycle methods.

By specifying dependencies as the second argument of useEffect, you can control when the effect runs.

To replicate componentDidMount, specify an empty dependency array ([]). Check the example code below

useEffect(() => { 
   fetchData(); 
}, []);

 

To replicate componentDidUpdate, include the necessary state or props dependencies([ /* Dependencies array */ ]). check the example code below

useEffect(() => {
  // componentDidMount equivalent
  fetchData();

}, [/* Dependencies */]);

 

Finally, to replicate componentWillUnmount, return a function from useEffect. Check the example code below

useEffect(() => {
  window.addEventListener('resize', handleResize);

  // Define cleanup function
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

 

Conclusion:

The useEffect hook revolutionizes how developers manage component lifecycle and side effects in React functional components. By understanding its usage and mimicking lifecycle methods, developers can seamlessly transition from class-based to functional components, unlocking the full potential of React’s modern development paradigm. Experiment with useEffect in your projects and elevate your React development experience to new heights.