React

React is a JavaScript library for building user interfaces from reusable components. You describe what the UI should look like for a given state, and React efficiently updates the DOM when that state changes — a declarative model instead of manually patching the page.

What it solves: before React, updating complex UIs meant manually tracking which parts of the page changed when data updated — bug-prone, slow, and hard to maintain. React lets you describe what the UI should be for any state and figures out how to update the DOM.

Where it fits: React owns the "view" layer. Created at Facebook and open-sourced in 2013, it pairs with routing (React Router), state (Zustand, Redux), data fetching (TanStack Query), and meta-frameworks (Next.js, Remix) to build complete apps. Its component model shaped Vue, Svelte, and others.

TL;DR

• A component is a function from data (props + state) to UI.
• Props flow down and are read-only; state is local and changes over time.
• Hooks (useState, useEffect, custom hooks) add state and side effects to function components.
• A re-render runs the function again; React updates only the DOM that actually changed.
• React is a library, not a framework — you choose routing, state, and data tools.

Quick Example

A function component with local state via the useState hook:

Core Concepts

Key terms

• Component — a reusable piece of UI (a function returning JSX).
• JSX — HTML-like syntax that compiles to React.createElement calls.
• Props — read-only data passed parent → child.
• State — data a component owns; updating it triggers a re-render.
• Hook — a function that lets function components use React features.
• Virtual DOM — React's in-memory UI representation, used to compute minimal DOM updates.
• Reconciliation — diffing Virtual DOM trees to determine what changed.
• Ref — access a DOM node or persist a value without triggering re-renders.

Mental models

A component is a function from data to UI: given props and state, it returns a description of the screen; when data changes, it runs again and returns a new description. The Virtual DOM is a draft — React writes changes to the draft, compares it to the live page, and updates only what differs.

What beginners misunderstand

• State updates are batched/asynchronous — setState doesn't change the value immediately.
• Props are immutable — never mutate them; they flow down from parents.
• Re-render ≠ DOM update — React may run your function but only touch the DOM if output changed.
• Keys aren't optional — lists need stable key props so React tracks items.
• Effects run after paint — useEffect fires after the browser paints.

How React Works

A scheduler prioritizes and batches updates so the UI stays responsive. Complexity tends to arise around where state lives, effect dependency arrays (stale closures / infinite loops), unnecessary re-renders, and the server/client boundary.

Component Types

Hooks

Hooks let function components use React features:

• useState — local state.
• useEffect — synchronize with external systems (subscriptions, non-React widgets); runs after paint.
• useMemo / useCallback — memoize expensive values/callbacks.
• Custom hooks — extract reusable stateful logic into a useXxx function.

⚠️ Don't reach for useEffect to compute values from props/state — derive them during render. Effects are for syncing with the outside world.

Best Practices

• Derive, don't sync — compute values during render rather than storing them via effects.
• Keep state low — put it in the lowest common parent that needs it; lift only when shared.
• Stable keys — use real IDs for list keys, never array indices for dynamic lists.
• Memoize deliberately — useMemo/useCallback/memo for genuinely expensive work, not by default.
• Accessibility — semantic elements, ARIA where needed, keyboard and focus management.
• Never trust dangerouslySetInnerHTML with unsanitized input (XSS); never put secrets in client code.

Tooling & Ecosystem

React itself is MIT-licensed and maintained by Meta; the ecosystem is overwhelmingly open-source.

Performance & Scaling

Common bottlenecks and the levers that address them:

• Unnecessary re-renders → move state down, memoize, split components.
• Large bundles → code-split routes, lazy-load, audit dependencies.
• Expensive renders → useMemo, virtualize long lists.
• Data waterfalls → fetch in parallel; use a query library or Server Components.
• At very large scale → deliberate global-vs-local state architecture, and module federation for micro-frontends.

Comparison to Other Frameworks

React wins on ecosystem maturity, hiring pool, and flexibility. Vue wins for a gentler curve and built-in defaults; Svelte for performance and tiny bundles; Angular when teams want an enforced architecture. See Vue, Svelte, Angular.

Common Mistakes

Mutating state directly

Missing keys in lists

Overusing useEffect

FAQ

Is React a framework or a library?

A library — it only handles the view. You add routing, state management, and data fetching yourself, or adopt a meta-framework like Next.js that bundles those choices.

Do I need Redux?

Usually not. Local state plus Context covers many apps; reach for Zustand, Jotai, or Redux Toolkit only when shared, frequently-updated state gets unwieldy. See State Management.

Class or function components?

Write new code with function components and hooks. Class components still work and aren't removed, but hooks are the modern standard for state and logic reuse.

What are React Server Components?

Components that render on the server with zero client JavaScript, enabling direct data access and smaller bundles. They can't use hooks or browser APIs. See React Server Components.

Why does my component re-render so often?

Usually because state lives too high or a parent re-renders and recreates props. Move state down, memoize stable callbacks/values, and split components so unrelated updates don't cascade.

When should I not use React?

For static, low-interactivity sites (plain HTML or a static generator may be simpler) or when SEO is critical without SSR/SSG. For maximum runtime performance, Svelte or vanilla JS can be lighter.

Related Topics

• Next.js — The most popular React meta-framework
• React Server Components — Server-rendered, zero-JS components
• React Testing — Testing components and hooks
• State Management — Local, global, and server state
• JavaScript — The language underneath
• TypeScript — Typing props and state
• Frontend Development — The broader landscape

References

• react.dev — Official documentation
• react.dev — Learn React
• react.dev — Rules of Hooks
• react.dev — You Might Not Need an Effect
• React Router