When does useEffect run in a React component?

By default, useEffect runs after every completed render, but you can control this behavior with the dependency array to run it only when specific values change.

Can useEffect run asynchronously?

The useEffect callback itself cannot be async, but you can define and call an async function inside it to perform asynchronous operations like data fetching.

What happens if I omit the dependency array in useEffect?

Omitting the dependency array causes useEffect to run after every render, which can lead to performance issues or infinite loops if the effect updates state.

How do I clean up side effects in useEffect?

Return a cleanup function from useEffect. React calls this function before the component unmounts or before running the effect again to clean up resources like event listeners or timers.

Topic 12624 min readStructured Tutorial

React useEffect Hook Examples

Quick Answer

The React useEffect Hook lets you perform side effects in functional components, such as fetching data, updating the DOM, or setting up subscriptions. It runs after render and can be customized to run only when specific dependencies change, making it essential for managing lifecycle events in React.

Learning Objectives

Understand how to use the useEffect Hook in React functional components.
Learn to manage side effects like data fetching and event listeners with useEffect.
Explore dependency arrays to control when effects run.

Introduction to useEffect Hook Examples

The useEffect Hook is a fundamental part of React functional components, enabling side effects like data fetching, subscriptions, and manual DOM manipulations.

This tutorial provides practical examples to help you understand how to use useEffect effectively and avoid common mistakes.

Course Progress0%

Was this topic helpful?

Your feedback helps us improve this lesson.

Topic information

Author

RPATechnology Team

Last Updated

June 2026

Suggested learning path

Related Courses

Continue learning with related technologies and tracks.

Programming LanguagesBeginner FriendlyCareer Focused

C# Programming Course for Beginners to Advanced | Learn C# and .NET

Master C# programming with a complete beginner-to-advanced course covering OOP, collections, LINQ, async programming, Entity Framework Core, ASP.NET Core, Web APIs, design patterns, and real-world projects.

Structured lessons

View Course

Examples

Basic useEffect Logging Example

import React, { useEffect } from 'react';

function Logger() {
  useEffect(() => {
    console.log('Component rendered');
  });
  return <div>Check the console log</div>;
}

This example logs a message to the console every time the component renders because no dependency array is provided.

useEffect with Dependency Array

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`Count changed to: ${count}`);
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

This effect runs only when the 'count' state changes, logging the new count value.

Cleaning up an Event Listener

import React, { useEffect } from 'react';

function WindowResize() {
  useEffect(() => {
    function handleResize() {
      console.log('Window resized');
    }
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>Resize the window and check the console.</div>;
}

This example adds a resize event listener and cleans it up when the component unmounts.

Fetching Data with useEffect

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  if (loading) return <div>Loading...</div>;
  return <div>Title: {data.title}</div>;
}

This example fetches data once when the component mounts and displays it.

Learning Objectives

Introduction to useEffect Hook Examples

Was this topic helpful?

Topic information

Recommended Next Topics

Creating References

DOM Manipulation

Focus Management

Persistent Values

Related Topics

Related Courses

C# Programming Course for Beginners to Advanced | Learn C# and .NET

Basic useEffect Example

Using Dependency Array

Cleaning Up Effects

Fetching Data with useEffect

Practical Example

Examples

Best Practices

Common Mistakes

Hands-on Exercise

Create a Timer with useEffect

Fetch User Data on Button Click

Interview Questions

What is the purpose of the useEffect Hook in React?

How does the dependency array affect useEffect behavior?

Why is cleanup important in useEffect?

MCQ Quiz

1. What happens if you use useEffect without a dependency array in a React functional component?

2. How can you make a useEffect hook run only once when the component mounts?

3. What is the purpose of returning a function from the useEffect hook?

4. In the example where useEffect depends on a state variable 'count', when does the effect run?

5. Why is it important to manage the dependency array correctly in useEffect?

Key Takeaways

Frequently Asked Questions

When does useEffect run in a React component?

Can useEffect run asynchronously?

What happens if I omit the dependency array in useEffect?

How do I clean up side effects in useEffect?

Summary

Form Handling

Performance Benefits

Java Programming Course for Developers and Interview Success | RPATechnology.in

Complete JavaScript Tutorial for Beginners to Advanced | JavaScript Programming Course

Complete MongoDB Tutorial for Beginners to Advanced | MongoDB Course

Complete MySQL Tutorial for Beginners to Advanced | MySQL Database Course

Complete Python Tutorial for Beginners to Advanced | Python Programming Course