React is great, but its errors can feel confusing. The good news: most issues fall into a few patterns. This guide shows the most common React errors, what they mean in plain words, and how to fix them fast - with short examples and clear checklists.

1) “Invalid hook call”

Message: Invalid hook call. Hooks can only be called inside of the body of a function component.

Why it happens

- You used a hook (like useState) outside a component or custom hook.
- You called a hook inside a loop/condition after other renders changed the hook order.
- You have two copies of React (monorepos, linked packages, local npm link).

Fix

- Use hooks only at the top level of React function components or custom hooks.
- Keep hook calls in the same order every render.
- Ensure you have one React copy:

Good

function Profile() {
  const [open, setOpen] = useState(false); // top level
  // ...
}

Bad

function Profile() {
  if (Math.random() > 0.5) {
    const [x] = useState(0); // ❌ conditional hook
  }
}

2) “Rendered more hooks than during the previous render”

Message: Rendered more hooks than during the previous render.

Why

You changed the number/order of hooks between renders (e.g., conditional hooks).

Fix

- Never put hooks in if, for, or try/catch blocks.
- Move conditions below hook declarations.

Pattern

// ✅ hooks first
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);

// then branches
if (loading) return ;
return user ?  : ;

3) “Too many re-renders” / “Maximum update depth exceeded”

Why

- You are setting state while rendering, causing a loop.
- An effect updates state without a stable dependency list.

Fix

- Do not call setState directly in component body.
- In useEffect, add a proper dependency array and guard.

Example

// ❌ BAD: setState in render
function Counter() {
  const [n, setN] = useState(0);
  if (n < 0) setN(0); // triggers re-render loop risks
  return {n}
;
}

// ✅ GOOD: guard inside an effect
function Counter() {
  const [n, setN] = useState(0);
  useEffect(() => {
    if (n < 0) setN(0);
  }, [n]);
  return {n}
;
}

4) “Cannot read property ‘x’ of undefined/null”

Why

- You render before data arrives.
- Props are missing or shape is different.

Fix

- Use optional chaining and fallbacks.
- Check for loading states.

Example

// ✅ Safe access
{user?.name ?? "Guest"}


// ✅ Guarded render
{user ?  : }

5) “Objects are not valid as a React child”

Message: Objects are not valid as a React child (found: [object Object]).

Why

You tried to render a raw object/array instead of text or elements.

Fix

Convert to string or map to elements.

Example

// ❌ BAD
{user}


// ✅ GOOD
{JSON.stringify(user)}


// ✅ Better UI

  {users.map(u => (
    {u.name}

  ))}

6) “A component is changing an uncontrolled input to be controlled”

Why

Input starts without a value (uncontrolled) and later gets a value prop (controlled).

Fix

Pick one: controlled or uncontrolled from the start.

7) “Each child in a list should have a unique ‘key’ prop”

Why

Your list items use index or missing key. Keys help React track items.

Fix

Use a stable unique id: id, uuid, slug, etc.

Example

// ❌ BAD
{items.map((x, i) => )}

// ✅ GOOD
{items. Map(x => )}

8) “setState is not a function” / “is not a function”

Why

You renamed the setter, destructured wrong, or passed setState where a value is expected.

Fix

Check your hook tuple order.
Pass functions correctly.

Example

// ❌ BAD
const { count, setCount } = useState(0); // useState returns an array

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

9) “React has detected a change in the order of Hooks”

Why

Similar to #2: conditional/looped hooks.

Fix

Hoist all hooks; do branching after them.

10) “Effect missing dependency” & stale values

Message: ESLint: React Hook useEffect has missing dependencies: ...

Why

- Effect uses values not listed in its dependency array.
- Stale closure: effect reads old values.

Fix

- Add missing deps.
- Wrap callbacks with useCallback when needed.
- For refs, use useRef to hold mutable values without re-renders.

Example

const [query, setQuery] = useState("");
const onSearch = useCallback(() => doSearch(query), [query]);
useEffect(() => {
  const id = setInterval(onSearch, 5000);
  return () => clearInterval(id);
}, [onSearch]);

11) Slow renders (not an “error”, but common pain)

Why

- Large lists re-render often.
- Heavy computations in render.

Fix

- Memoize with React.memo, useMemo, useCallback.
- Virtualize long lists (e.g., react-window).

const Item = React.memo(function Item({ data }) { /* ... */ });

React is powerful, but debugging it can feel overwhelming if you're new or in a rush. Remember: most bugs are caused by a few simple mistakes. Keep this article saved, revisit the patterns often, and don't hesitate to Google or ask for help when stuck. Over time, your eyes will quickly spot what’s wrong and know how to fix it with confidence.

Happy coding!

Interview

category blog

Common React Errors and How to Fix Them

Ready to do your best work? Let's get you started.

Categories