Loading...

What's the use of useEffect hook in React?

question react front-end
Ram Patra Published on February 2, 2024

In React, the useEffect hook is used to perform side effects in functional components. Side effects can include data fetching, subscriptions, manual DOM manipulations, and other operations that cannot be handled during the render phase.

The useEffect hook is called after the component has rendered, and it runs the specified function (the effect) that can contain code with side effects. Here’s a basic example to illustrate its usage:

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

function ExampleComponent() {
  // State to store data fetched from an API
  const [data, setData] = useState(null);

  // useEffect hook to fetch data when the component mounts
  useEffect(() => {
    const fetchData = async () => {
      try {
        // Simulating an API call
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData(); // Call the function to fetch data

    // Cleanup function (optional): will be called when the component unmounts
    return () => {
      // Perform cleanup, unsubscribe, etc.
    };
  }, []); // Empty dependency array means the effect runs only once after the initial render

  return (
    <div>
      {/* Render component using the fetched data */}
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
}

export default ExampleComponent;

In this example:

  • The useEffect hook is used to fetch data from an API after the component has mounted.
  • The function passed to useEffect is the effect itself.
  • The empty dependency array ([]) means that the effect runs only once after the initial render. If you provide dependencies, the effect will run whenever those dependencies change.

Key points about useEffect:

  1. Side Effects: It is primarily used for handling side effects in functional components, where side effects might include data fetching, subscriptions, or manual DOM manipulations.
  2. Asynchronous Operations: You can perform asynchronous operations inside the useEffect function, such as fetching data using async/await.
  3. Cleanup: If your effect involves any cleanup (e.g., clearing intervals, unsubscribing from subscriptions), you can return a cleanup function from the useEffect.
  4. Dependency Array: By providing a dependency array, you can control when the effect runs. If the array is empty, the effect runs once after the initial render. If dependencies are specified, the effect runs whenever those dependencies change.

useEffect is a crucial tool for managing side effects in React functional components, contributing to better organization and lifecycle management.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on February 2, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question nextjs react July 18, 2024 How to programmatically navigate to a page in Next.js?

In Next.js, you can programmatically navigate to different pages using the useRouter hook from the next/navigation module. This hook provides a convenient way to navigate between pages within your Next.js application. Below is an example demonstrating how to use the useRouter hook to programmatically navigate to another page.

question nextjs react July 19, 2024 How to get the current path in Next.js?

To get the current path in a Next.js application, you can use the usePathname hook from next/navigation module. This hook allows you to access the current pathname within your components. Here’s how you can use it:

question nextjs react July 11, 2024 How to set environment variable in a Nextjs App and when to use NEXT_PUBLIC prefix?

Setting environment variables in a Next.js app is straightforward. Next.js supports loading environment variables from .env files. Here’s a step-by-step guide on how to set and use environment variables in your Next.js application: