useEffect and fetching data

In this tutorial you will make the Brew & Bean menu page load its items from a server instead of from a hard-coded array. Along the way you will learn useEffect, the hook for work that must happen outside React's rendering: fetching data, timers, subscriptions and changing the page title.

Prerequisites: a Vite + React project and the lessons *State and events* and *Lists, keys and conditional rendering*. Plain JavaScript (JSX).

A component function runs every time it renders, and React may run it more than once. So the function body should only calculate JSX from props and state. If you call fetch directly in the body, it fires on every render; and since the result goes into state, which causes another render, you get an endless loop of requests.

An effect is the place for code that reaches outside the component. React renders first, puts the result on the screen, then runs your effect.

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    document.title = 'Clicked ' + count + ' times';
  }, [count]);

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

export default TitleDemo;

After each render where count changed, React runs the effect and the browser tab title updates.

The second argument tells React when to run the effect again. React compares each value in the array with its value from the previous render.

The rule: every value from the component (props, state, functions) that the effect uses must be in the array. If you leave one out, the effect keeps using an old copy of it. The ESLint rule react-hooks/exhaustive-deps that comes with the Vite template warns you; do not silence it, fix the cause.

To avoid needing a backend, we use a static JSON file. Anything inside the Vite public folder is served from the site root, so public/menu.json is available at /menu.json. Later you can swap the URL for your real GET /menu API.

[
  { "id": "espresso", "name": "Espresso", "category": "coffee", "price": 120 },
  { "id": "cappuccino", "name": "Cappuccino", "category": "coffee", "price": 180 },
  { "id": "cold-brew", "name": "Cold Brew", "category": "coffee", "price": 220 },
  { "id": "filter-coffee", "name": "Filter Coffee", "category": "coffee", "price": 80 },
  { "id": "masala-chai", "name": "Masala Chai", "category": "tea", "price": 90 },
  { "id": "croissant", "name": "Butter Croissant", "category": "bakery", "price": 150 },
  { "id": "banana-bread", "name": "Banana Bread", "category": "bakery", "price": 130 },
  { "id": "veg-sandwich", "name": "Veg Grilled Sandwich", "category": "food", "price": 160 }
]

Same menu as before. Open http://localhost:5173/menu.json in the browser while npm run dev is running to confirm it loads.

Fetching data takes time and can fail, so a screen has three situations beyond success: loading, error and empty. Beginners often handle only success and show a blank page otherwise. Keep three pieces of state: the data, whether it is loading, and the error.

import { useEffect, useState } from 'react';

function Menu() {
  const [menu, setMenu] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function loadMenu() {
      try {
        const response = await fetch('/menu.json');
        if (!response.ok) {
          throw new Error('Could not load the menu (status ' + response.status + ')');
        }
        const data = await response.json();
        setMenu(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    loadMenu();
  }, []);

  if (loading) return <p>Loading menu...</p>;
  if (error) return <p role="alert">Something went wrong: {error}</p>;
  if (menu.length === 0) return <p>The menu is empty today.</p>;

  return (
    <ul>
      {menu.map((item) => (
        <li key={item.id}>
          {item.name} - ₹{item.price}
        </li>
      ))}
    </ul>
  );
}

export default Menu;

Render <Menu /> from App.jsx. The three early returns keep the success JSX simple.

Put the changing value in the dependency array and the effect re-runs. Here is a search box that asks for results as the user types. This brings a new problem: race conditions. If the user types 'ch' then 'chai', two requests are in flight. If the first one finishes last, old results would overwrite the new ones.

The fix is a cleanup function. React runs the function you return from an effect before running the effect again and when the component is removed. We use it to cancel the previous request with an AbortController.

import { useEffect, useState } from 'react';

function SearchMenu() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    async function search() {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch('/menu.json', { signal: controller.signal });
        if (!response.ok) throw new Error('Status ' + response.status);
        const data = await response.json();
        const q = query.trim().toLowerCase();
        setResults(data.filter((item) => item.name.toLowerCase().includes(q)));
        setLoading(false);
      } catch (err) {
        if (err.name === 'AbortError') return; // a newer request replaced this one
        setError(err.message);
        setLoading(false);
      }
    }

    search();

    return () => controller.abort();
  }, [query]);

  return (
    <div>
      <input
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        placeholder="Search the menu"
        aria-label="Search the menu"
      />
      {loading && <p>Searching...</p>}
      {error && <p role="alert">{error}</p>}
      <ul>
        {results.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default SearchMenu;

A static file ignores the query, so we filter in the browser to keep the example runnable. With a real API you would send the query: fetch('/menu?search=' + encodeURIComponent(query)). The cleanup aborts the previous request each time query changes.

When a request is aborted, fetch rejects with an error named AbortError. That is expected, not a failure, so we ignore it. Without cleanup the code often still works in testing but shows wrong data on slow networks.

In development, the Vite template wraps your app in <StrictMode>. React deliberately runs each effect, then its cleanup, then the effect again, to reveal missing cleanup. So you will see two requests in the Network tab. This happens only in development; production runs once.

Do not remove StrictMode or add hacks such as a hasFetched flag. Write a correct cleanup and the double run is harmless.

Cleanup is not only for fetch. Anything you start in an effect, you should stop in its cleanup. A live clock showing the shop's opening status is a classic example.

import { useEffect, useState } from 'react';

function Clock() {
  const [now, setNow] = useState(new Date());

  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  const hour = now.getHours();
  const isOpen = hour >= 8 && hour < 22;

  return (
    <p>
      {now.toLocaleTimeString('en-IN')} - {isOpen ? 'We are open' : 'Closed (8 am to 10 pm)'}
    </p>
  );
}

export default Clock;

Without clearInterval, every time the component was shown and hidden a new timer would be added and none stopped.

Effects are for syncing with the outside world. Do not use them for things React can do during render:

For real apps, data fetching libraries such as TanStack Query handle caching, retries, loading flags and race conditions for you (see *Managing app state: Context, Zustand and server state*). Knowing how to do it by hand makes those libraries easy to understand and is a common interview question.

I am a React beginner. ESLint shows this warning: [paste the exact warning text].

Here is my component:

---
[paste component]
---

Explain in plain English why the warning appears, what bug could happen if I ignore it, and show the smallest correct fix. Do not suggest disabling the rule.

What to expect: A good answer explains stale values, and the fix is usually to add the value to the array or move the function inside the effect.