ReviewMyCodes.comBuild with AI • Validate with Humans

AI-generated React component re-renders forever and floods my API (#XXG2RR) | ReviewMyCodes

AI-Generated Code

Solution proposed

Example from the ReviewMyCodes team

AI-generated React component re-renders forever and floods my API

MAQSOOD AHMED

Asked 2 weeks ago · edited

ReactJavaScript#example #react #useeffect #ai-generated

Description

An AI assistant wrote this component for me. It works, but the Network tab shows hundreds of requests per second and the page becomes slow. — This is an example problem from the ReviewMyCodes team, showing how a good question looks. Real community questions appear alongside it.

Expected

The list should load once when the page opens.

Actual

The fetch runs in an endless loop; the browser tab uses 100% CPU.

Steps to reproduce

Open the Orders page
Open DevTools → Network
See /api/orders requested continuously

Code

javascript

function Orders({ filters }) {
  const [orders, setOrders] = useState([]);
  const query = { ...filters, page: 1 };

  useEffect(() => {
    fetch("/api/orders?" + new URLSearchParams(query))
      .then((r) => r.json())
      .then(setOrders);
  }, [query]); // runs again on every render

  return <OrderList orders={orders} />;
}

Know how to fix this?

Propose a solution, or ask a question first if something is unclear.

Ask a question Propose a solution

Discussion (0)

Proposed solutions (1)

MAQSOOD AHMED

2 weeks ago

Awaiting requester test

The dependency `query` is a new object on every render, so React thinks it changed and runs the effect again — which sets state, which renders, which creates a new object… Depend on stable values instead (or memoise the object). Also ignore responses that arrive after the component re-renders. — Example solution from the ReviewMyCodes team.

Proposed fix

function Orders({ filters }) {
  const [orders, setOrders] = useState([]);
  const params = new URLSearchParams({ ...filters, page: "1" }).toString(); // a string is stable

  useEffect(() => {
    let cancelled = false;
    fetch("/api/orders?" + params)
      .then((r) => r.json())
      .then((data) => { if (!cancelled) setOrders(data); });
    return () => { cancelled = true; };
  }, [params]);

  return <OrderList orders={orders} />;
}

How it was tested

Opened the page with DevTools → Network: one request on load, one more only when a filter changes.