React is the most popular frontend library for building user interfaces. Whether you’re just starting out or debugging a production app at 2am, this guide covers the essentials and links to deeper resources for every topic.

Getting started

React lets you build UIs from reusable components. Each component is a JavaScript function that returns JSX (HTML-like syntax). If you’re coming from vanilla JavaScript, the mental shift is from “manipulate the DOM directly” to “describe what the UI should look like, and React figures out the updates.”

If you’re wondering how React compares to alternatives, check out React vs Angular, React vs Vue vs Svelte, or Svelte vs React. For a more unconventional take, there’s also HTMX vs React.

Hooks — the core of modern React

Hooks are how you add state, side effects, and other React features to function components. The most important ones:

• useState — local component state
• useEffect — side effects (API calls, subscriptions, DOM manipulation)
• useRef — mutable values that persist across renders without causing re-renders
• useContext — access shared state without prop drilling
• useMemo and useCallback — performance optimization (use sparingly)

Our React Hooks cheat sheet covers every hook with examples. Bookmark it — you’ll reference it constantly.

The most common hooks mistake is getting the dependency array wrong in useEffect. If you’re seeing warnings about missing dependencies, check out React useEffect missing dependency fix.

State management

For most apps, useState and useContext are enough. When they’re not, the ecosystem has options:

• Zustand vs Redux — Zustand is simpler and has less boilerplate. Redux is more structured and has better devtools for large teams.
• If you’re still using Redux and wondering if you should switch, read Stop Using Redux for an honest take.

For server state (data from APIs), use TanStack Query or SWR instead of putting everything in global state. See TanStack Query vs SWR.

Common React errors and how to fix them

React has some notoriously confusing error messages. Here are the ones you’ll hit most often:

Rendering errors:

• Too many re-renders — usually caused by calling a state setter directly in the render body instead of in an event handler
• Cannot update while rendering — setting state during render, often in a parent component
• Objects are not valid as a React child — trying to render an object instead of a string or component

Hooks errors:

• Invalid hook call — calling hooks outside a component or having duplicate React versions
• Rendered more hooks than during the previous render — hooks called conditionally
• Hooks order fix — hooks must be called in the same order every render

Data errors:

• Cannot read properties of undefined — accessing data before it loads
• Cannot read properties of null — similar issue with null values
• Each child should have a unique key — missing key prop in lists

Hydration errors (SSR):

• Hydration mismatch — server HTML doesn’t match client render
• JSX expressions must have one parent element — wrap multiple elements in a fragment

Other:

• Cannot find module types fix — missing TypeScript type definitions
• State update on unmounted component — async operation completing after component unmounts
• Cannot update during transition — state updates during React transitions

Choosing a React framework

You rarely use React alone anymore. Most projects use a framework:

• Next.js vs Remix — Next.js has more features and a bigger ecosystem. Remix is simpler and closer to web standards.
• Next.js vs Astro — Astro is better for content-heavy sites. Next.js is better for interactive apps.
• Next.js vs Nuxt — if you’re choosing between React and Vue ecosystems.

For rendering strategies, read SSR vs SSG vs CSR to understand when to use each.

Testing React apps

Testing in React typically means:

• Unit tests for logic and hooks
• Component tests for rendering and interactions
• End-to-end tests for full user flows

See Vitest vs Jest for choosing a test runner, and Playwright vs Cypress for E2E testing. Our Jest cheat sheet covers the most common testing patterns.

What to read next

If you’re just starting: read the React Hooks cheat sheet, then build something small.

If you’re debugging: find your error in the list above — each guide has the exact fix with code examples.

If you’re choosing tools: start with React vs Vue vs Svelte for the framework decision, then Next.js vs Remix for the React framework.