React Troubleshooting

Introduction

Most React bugs fall into build/config errors, infinite re-renders, Hooks rule violations, router/auth issues, or CORS. This chapter maps symptoms → cause → fix and links to teaching chapters.

Prerequisites

• Environment and Create React Project
• Browser DevTools console open

Diagnostic Flow

Symptom → Console / terminal → classify → fix one layer → reload

Dev Server and Build

White screen

Cause: Runtime error, wrong #root, bad import.

Fix: Check console; confirm index.html has <div id="root"> and main.tsx mounts it.

Failed to resolve "@/..."

Fix: Path alias in vite.config.ts + tsconfig paths — TypeScript With React.

Too many re-renders

Cause: setState during render or effect without deps.

Fix: Move logic to event handler; fix useEffect dependencies — Effects.

Hooks Errors

Rendered more hooks than previous render

Cause: Conditional hook call.

Fix: Call hooks only at top level — Custom Hooks.

Cannot read properties of null (reading 'useState')

Cause: Invalid hook call—duplicate React copies or hook outside component.

Fix: One React version; call hooks only from components/custom hooks.

State Issues

State updates but UI unchanged

Cause: Mutating objects/arrays in place.

Fix: Immutable updates with spread — useState.

Stale closure in effect

Fix: Add deps or functional updates; use useRef for latest value in timers.

Router

404 on refresh in production

Fix: Nginx try_files $uri /index.html — Deploy.

Protected route loop

Fix: /login outside ProtectedRoute — chapter 14.

CORS

Fix: Vite server.proxy or backend CORS — Fetching API, Flask CORS.

Zustand

Component never updates

Cause: Destructuring whole store without selector.

Fix: useStore(s => s.field).

Testing

wrap tests with Router

<MemoryRouter><Component /></MemoryRouter>

Testing.

Quick Reference

FAQ

Strict Mode double fetch?

Dev-only—ensure effect cleanup — Effects.

Chunk load failed after deploy?

User on old tab—refresh or versioned deploy.

TypeScript passes but Vite fails?

Different tools—run npm run build.

Hydration (Next.js)?

Server/client HTML mismatch — SSR intro.