React Academy · Lesson

Debugging Common React Errors

Diagnose key-missing warnings, undefined state bugs, and hydration errors.

Debugging Common React Errors is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will diagnose the most common React errors: missing-key warnings, undefined state bugs, too many re-renders, and hydration mismatches.

Missing Key Warning

React logs: *Each child in a list should have a unique "key" prop.* This happens when you render an array without adding a `key` prop. Fix it by adding a stable, unique key to each list item.

// Bad
items.map(item => <li>{item.name}</li>)

// Good
items.map(item => <li key={item.id}>{item.name}</li>)

Cannot Read Properties of Undefined

This crash often means your state is `undefined` on the first render. Always initialise state with a safe default (`[]` for arrays, `{}` for objects, `null` for values you check before using).

// Bad — crashes if data is undefined
const [data, setData] = useState();
return <p>{data.name}</p>;

// Good
const [data, setData] = useState(null);
return data ? <p>{data.name}</p> : <p>Loading...</p>;

Too Many Re-renders Error

React throws *Too many re-renders* when a component enters an infinite render loop — usually because you call `setState` unconditionally during render or pass an inline `() => setState(...)` directly as a prop that triggers on every render.

// Bad — setState called on every render
function Counter() {
  const [n, setN] = useState(0);
  setN(n + 1); // infinite loop!
  return <p>{n}</p>;
}

Fixing Too Many Re-renders

Move state updates into event handlers or useEffect. Never call setState directly at the top level of a component body.

// Good — update only on click
function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Hydration Mismatch Warning

In SSR apps React warns *Hydration failed because the initial UI does not match what was rendered on the server.* Common causes: using `Date.now()` or `Math.random()` in render, or browser extensions injecting HTML.

Fixing Hydration Mismatches

Move dynamic values (timestamps, random IDs) into a `useState` initialised inside `useEffect`, so the server always renders a static value and the client updates after mount.

const [ts, setTs] = useState('');
useEffect(() => {
  setTs(Date.now().toString());
}, []);
return <p>{ts}</p>;

State Not Updating Immediately

Remember that `setState` is asynchronous. Logging state right after calling it shows the old value. To see the updated value, log inside a `useEffect` that has the state variable as a dependency.

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

function handleClick() {
  setCount(count + 1);
  console.log(count); // still old value!
}

useEffect(() => {
  console.log('updated:', count); // correct
}, [count]);

Component Not Updating on Prop Change

If a component does not update when a prop changes, check that you are not mutating an object or array in place. React uses reference equality — mutating an existing object does not trigger a re-render.

// Bad — same reference, no re-render
const list = [];
list.push('item');
setList(list);

// Good — new array reference
setList([...list, 'item']);

Reading Errors in the Error Overlay

When a React app crashes in development, an error overlay appears in the browser. Read the **component stack** at the bottom — it shows every component that rendered the failing component, making the source of the bug clear.

Quick Check

What is the most common cause of the 'Too many re-renders' React error?

Recap

You can now fix the most common React errors: add stable keys to lists, initialise state safely, avoid setState in render, handle hydration mismatches, and read the error overlay component stack.

Course Complete

Congratulations! You have completed **React DevTools & Debugging**. You can now install DevTools, inspect component trees and state, profile renders, and diagnose the most frequent React runtime errors.

Frequently asked questions

Is the “Debugging Common React Errors” lesson free?

Yes — the full text of “Debugging Common React Errors” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Debugging Common React Errors”?

Diagnose key-missing warnings, undefined state bugs, and hydration errors. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Debugging Common React Errors” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy