Performance & Patterns
React Common Errors and How to Fix Them
A handful of React error messages account for most of the time beginners lose. Each maps to a specific, well-defined cause, so recognising the wording is usually enough to fix it in seconds.
What is Common Errors and How to Fix Them in React?
A handful of React error messages account for most of the time beginners lose. Each maps to a specific, well-defined cause, so recognising the wording is usually enough to fix it in seconds.
Key points to remember
- Read the component stack in the error overlay — it names the exact file and line.
- "Too many re-renders" is almost always onClick={setOpen(true)} instead of onClick={() => setOpen(true)}.
- Warnings about keys and controlled inputs predict real bugs; do not ignore them.
Error message to cause
| Message | Cause | Fix |
|---|---|---|
| Objects are not valid as a React child | rendering an object or promise directly | render a property, or JSON.stringify for debugging |
| Each child in a list should have a unique "key" | missing key in map | add key={item.id} |
| Too many re-renders | setState called during render | move it into a handler or effect |
| Cannot update a component while rendering a different component | a setter called in another component’s render | move the update into an effect |
| Rendered fewer hooks than expected | a conditional hook call | call all hooks unconditionally at the top |
| A component is changing an uncontrolled input to be controlled | value started undefined | initialise with an empty string, or value={x ?? ""} |
| Hydration failed | server and client markup differ | remove Date.now/random from render, or gate on an effect |
React Common Errors and How to Fix Them— Interview Questions & FAQs
What causes "Too many re-renders" in React?+
A state setter is called during render rather than in an event handler or effect — most often onClick={doThing()} instead of onClick={() => doThing()}. Each render triggers another update, so React stops the loop.