Basic14 min read

React Fundamentals

Core concepts behind React — components, declarative UI, virtual DOM, and the modern React rendering model.

What React Solves

React is a library for building user interfaces through composable components. Instead of imperatively manipulating the DOM when state changes, you declare what the UI should look like for a given state and React reconciles the difference efficiently.

This declarative model scales from single widgets to entire applications. Teams adopt React for its ecosystem, hiring pool, and patterns that keep UI logic testable and reusable across web, native, and server environments.

Declarative UI from state
Component composition over inheritance
Large ecosystem and tooling support

Components as Building Blocks

Everything in React is a component — a function or class that accepts props and returns UI. Components nest to form trees mirroring your product structure: pages contain layouts, layouts contain sections, sections contain atoms.

Split components when they have distinct responsibilities, reusable markup, or independent state. Avoid mega-components that fetch, validate, render tables, and handle modals in one file — decomposition is the primary maintainability lever.

Functions returning JSX are components
Nest components to mirror product structure
Split by responsibility and reuse

function Welcome({ name }: { name: string }) {
  return <h1>Hello, {name}</h1>;
}

Virtual DOM and Reconciliation

React maintains a lightweight representation of the UI in memory. When state changes, React builds a new tree, diffs it against the previous tree, and applies minimal DOM updates. This batching makes frequent updates practical without manual DOM diffing.

Reconciliation uses element type and keys to match children. Understanding keys — stable, unique among siblings — prevents incorrect reuse of DOM nodes and state when lists reorder.

Virtual DOM enables efficient updates
Reconciliation diffs old vs new trees
Keys identify list items across renders

One-Way Data Flow

Data flows down via props from parent to child. Events flow up via callbacks. This unidirectional flow makes data origins traceable — you can follow props from a leaf component up to the source of truth.

Avoid two-way binding patterns that hide state ownership. Lift state to the lowest common ancestor that needs it, then pass down values and updaters. Global state libraries extend this pattern but should not replace clear ownership boundaries.

Props down, events up
Lift state to common ancestor
Traceable data origins

Development Workflow

Use Create React App alternatives like Vite or Next.js for modern tooling with fast refresh. React DevTools inspect component trees, props, state, and profiler data.

Enable Strict Mode in development to surface unsafe lifecycles, deprecated APIs, and double-invocation effects that expose impure side effects. Treat Strict Mode warnings as bugs to fix, not noise to suppress.