Common Mistakes

These bugs show up in almost every first React project. Learn the shape of them.

Mutating state

Missing keys

The console warns. The UI glitches when you sort or delete.

Use a stable id.

Calling the handler during render

Infinite effect loops

An effect that sets state without a tight dependency list can render forever.

Set state from an effect only when you are syncing with something outside, and list deps carefully.

Derived state copies

Do not store fullName in state if you already have first and last.

Using the online compiler for JSX

The FoxSchools JS compiler runs plain JavaScript, not JSX.

Use Vite for these examples. Fox AI can still explain any snippet.

Tip: When the UI is wrong, log the state. If state is right, the JSX is wrong. If state is wrong, the setter is wrong.