React useEffect Not Working? Complete Guide to Fix Common Issues (2026)

Is your React useEffect hook not working as expected? Learn the most common causes, practical solutions, code examples, and best practices to fix useEffect issues in React. Perfect for beginners and experienced React developers.

React useEffect Not Working? Complete Guide with Examples

Introduction

The useEffect hook is one of the most commonly used features in React. It allows you to perform side effects such as fetching data, updating the DOM, subscribing to events, or running code after a component renders.

However, many developers face situations where useEffect doesn't run, runs too many times, or doesn't update when expected.

In this guide, you'll learn:

• What useEffect does
• Why it may not work
• Common mistakes
• Step-by-step solutions
• Best practices
• Real-world examples

What is useEffect?

The useEffect hook lets you perform side effects in functional components.

Basic syntax:

import { useEffect } from "react";useEffect(() => {  console.log("Component Rendered");});

Without a dependency array, this runs after every render.

Why is useEffect Not Working?

The most common reasons include:

• Missing dependency array
• Incorrect dependencies
• Infinite rendering
• State not updating
• Wrong API call
• React Strict Mode confusion
• Cleanup function issues

1. Missing Dependency Array

Without dependencies:

useEffect(() => {  console.log("Runs every render");});

Fix

useEffect(() => {  console.log("Runs once");}, []);

Using an empty array ensures the effect runs only once after the component mounts.

2. Wrong Dependency Array

Incorrect:

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

If userId changes, the effect won't run again.

Correct:

useEffect(() => {  fetchUsers(userId);}, [userId]);

Always include values used inside the effect that should trigger updates.

3. Infinite Loop

Wrong:

useEffect(() => {  setCount(count + 1);}, [count]);

This continuously updates the state, causing an infinite render loop.

Better:

useEffect(() => {  setCount((prev) => prev + 1);}, []);

4. State Isn't Updating

Wrong:

setUser(user);

Nothing changes because you're setting the same value.

Correct:

setUser({  ...user,  age: 25,});

React only re-renders when the state actually changes.

5. API Not Fetching

Wrong:

useEffect(() => {  fetch("/api/users");}, []);

No data is being processed.

Correct:

useEffect(() => {  async function getUsers() {    const response = await fetch("/api/users");    const data = await response.json();    console.log(data);  }  getUsers();}, []);

6. React Strict Mode

In development, React 18 may run useEffect twice to help detect side effects.

Example:

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

This behaviour usually occurs only in development mode and not in production.

7. Cleanup Function

Always clean up subscriptions, intervals, or event listeners.

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

Complete Example

import { useEffect, useState } from "react";function Users() {  const [users, setUsers] = useState([]);  useEffect(() => {    async function loadUsers() {      const response = await fetch(        "https://jsonplaceholder.typicode.com/users"      );      const data = await response.json();      setUsers(data);    }    loadUsers();  }, []);  return (    <ul>      {users.map((user) => (        <li key={user.id}>{user.name}</li>      ))}    </ul>  );}export default Users;

Common Mistakes

❌ Forgetting the dependency array

❌ Updating state inside every render

❌ Missing cleanup functions

❌ Calling asynchronous functions incorrectly

❌ Ignoring ESLint Hook warnings

Best Practices

✔ Keep each useEffect focused on one task.

✔ Include the correct dependencies.

✔ Use cleanup functions when required.

✔ Avoid unnecessary state updates.

✔ Follow the React Hooks ESLint plugin recommendations.

✔ Split complex effects into multiple smaller useEffect hooks.

Frequently Asked Questions

Why is useEffect running twice?

React 18 Strict Mode intentionally runs effects twice in development to detect unexpected side effects.

Why isn't my API call running?

Check your dependency array, API URL, network requests, and browser console for errors.

Can I use async directly inside useEffect?

No. Instead, define an async function inside the effect and then call it.

Example:

useEffect(() => {  async function loadData() {    // fetch data  }  loadData();}, []);

Should I always add every variable to the dependency array?

Generally, yes. If a value used inside the effect can change and should trigger the effect again, include it in the dependency array. The React Hooks ESLint plugin can help identify missing dependencies.

Related Articles

• React useState Complete Guide
• React useMemo Explained
• React useCallback Tutorial
• React Custom Hooks Guide
• Fix "Module Not Found" Error in React
• React Folder Structure Best Practices

Conclusion

The useEffect hook is essential for handling side effects in React applications. Most issues occur because of incorrect dependency arrays, unnecessary state updates, or misunderstanding when effects run.

By following the best practices in this guide, you can avoid common mistakes, write cleaner React code, and build more reliable applications.