AI mistakes in React, and a checklist

what to check beyond "it opened and it works"

What it is

The chapter's closer, and the end of the whole frontend block. React adds its own mistakes to those from chapters 8 and 9 — and almost all of them are invisible to a quick check: the screen opened, the data showed up, the button presses.

Ten AI mistakes in React

1. No key, or key={index} in a list. Deleting from the middle makes the data slide onto the neighbours (article 10.2).

2. A useEffect with no dependency array that changes state — an endless loop. Measured: 49 runs instead of one (article 10.4).

3. An incomplete dependency array. The effect works with a stale value.

4. No cleanup. A setInterval, a subscription or a fetch without cancellation outlives the component.

5. setState in a row depending on the old value. Three calls give +1 instead of +3 (article 10.3).

6. State instead of a computation. An extra useState + useEffect where one line would do.

7. Only the happy state is built. No loading, emptiness or error (article 10.5).

8. {items.length && ...} — on an empty list it prints "0".

9. Props with no types, or with any. Everything TypeScript gives you is lost (article 9.5).

10. Secrets in frontend code. Everything that made it into the build is visible to the user (article 10.1).

A React code checklist

Six steps on top of the frontend checklist (article 8.5).

1. Type checking

npx tsc --noEmit

Catches props: missing ones, wrong types, a handler with a different signature.

2. A linter with the hook rules

npx eslint .

The react-hooks/exhaustive-deps rule catches incomplete dependency arrays — the thing you almost can't see with your eyes.

3. The console

F12. React writes warnings there about key, about state after a component was removed, about wrong props. There should be no red and no yellow.

4. The network when the screen opens

The Network tab (article 8.4). How many requests go out on opening? One or two is normal. Dozens and a rising counter is exactly the loop from point 2.

5. The four states

• Loading — throttle the network in the developer tools.
• Empty — delete all the records.
• Error — turn off the network and reload.
• Data — the ordinary case.

The first three almost nobody checks, and that is exactly where the bugs live.

6. Fast repeated actions

Press the button five times in a row. Switch tabs quickly. This catches both the setState from point 5 and the race condition from point 4.

What to tell the AI

Check your React code against the list:
- is there a key, and is it not the index
- does every useEffect have a dependency array, and is it
  complete
- is there cleanup for subscriptions, timers and requests
- are there setState calls in a row depending on the old value
- are the loading, empty and error states implemented
- is there any in the props

Which of these are there? If none, say so.

This screen is built only for the "data arrived" case.
Add loading, an empty list, and an error with a "Retry"
button. Don't rewrite the existing markup.

Cheat sheet