React Hooks: useEffect

Introduction

The useEffect Hook is one of the most important Hooks in React. It is used to handle side effects in functional components, such as data fetching, DOM updates, subscriptions, and timers.

Before Hooks, these tasks were handled using lifecycle methods in class components. useEffect provides a unified and simpler way to manage side effects in modern React.

This article explains how useEffect works, different usage patterns, dependency handling, cleanup logic, common mistakes, and interview questions, suitable for both beginners and professionals.

What Is useEffect?

useEffect is a React Hook that allows you to perform side effects after rendering a component.

It runs after the component renders and can run:

• After every render
• Only once
• When specific data changes

Basic Syntax of useEffect

useEffect(() => {
  // side effect logic
}, [dependencies]);

• The first argument is a function containing side effect logic
• The second argument is the dependency array

useEffect Without Dependency Array

useEffect(() => {
  console.log("Component rendered");
});

This effect runs after every render, including state updates.

Use this carefully as it may cause performance issues.

useEffect With Empty Dependency Array

useEffect(() => {
  console.log("Component mounted");
}, []);

This effect runs only once, after the initial render.

Common use cases:

• API calls
• Event listeners
• Initial setup logic

useEffect With Dependencies

useEffect(() => {
  console.log("Count changed");
}, [count]);

This effect runs:

• On initial render
• Whenever count changes

This is the most common and recommended pattern.

Fetching Data Using useEffect

import { useState, useEffect } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

The empty dependency array ensures the API call happens only once.

Cleanup Function in useEffect

Some side effects need cleanup, such as timers or subscriptions.

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Running");
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

The cleanup function runs:

• Before the component unmounts
• Before the effect re-runs

useEffect With Multiple Effects

You can use multiple useEffect Hooks in a single component.

useEffect(() => {
  console.log("Effect one");
}, []);

useEffect(() => {
  console.log("Effect two");
}, [count]);

This improves readability and separation of concerns.

Common useEffect Mistakes

• Forgetting dependency array
• Adding unnecessary dependencies
• Updating state incorrectly inside effects
• Causing infinite loops

useEffect vs Lifecycle Methods

Best Practices for useEffect

• Keep effects small and focused
• Use multiple effects instead of one large effect
• Always define cleanup when needed
• Avoid unnecessary dependencies

Interview Questions and Answers

What is useEffect used for?

useEffect is used to perform side effects such as data fetching, subscriptions, and DOM updates.

When does useEffect run?

It runs after render, depending on the dependency array.

What happens if dependency array is omitted?

The effect runs after every render.

Why is cleanup important?

Cleanup prevents memory leaks and unexpected behavior.