A sequential journey from the basic building blocks of UI to the advanced concurrent engine. Follow the light.
React is a declarative, component-based JavaScript library for building user interfaces with predictable state.
In declarative UI, you declare the desired UI state directly rather than issuing imperative step-by-step DOM mutations.
A lightweight in-memory JavaScript representation of the real DOM tree used to compute minimal DOM mutation diffs.
JSX is a syntax extension for JavaScript that compiles into React.createElement or react/jsx-runtime function calls.
Components are self-contained, reusable building blocks that accept props and return JSX.
Props pass read-only data from parent components down to child components in a strict unidirectional flow.
State is local, mutable component memory that triggers a re-render whenever updated.
Controlled inputs store their current value in React state; uncontrolled inputs store value directly in the DOM.
React wraps native browser events in SyntheticEvent objects for cross-browser consistency and unified delegation.
Displaying different UI elements or components based on application state or props.
Keys provide unique stable identities to array elements so React can efficiently match, reorder, or delete DOM nodes.
A re-render occurs when React calls a component function again to compute its updated Virtual DOM subtree.
useState stores state in the component Fiber node linked list and provides a setter that schedules a re-render.
useEffect lets you synchronize a component with an external system (DOM, network subscriptions, timers).
useLayoutEffect fires synchronously after all DOM mutations but before the browser paints on screen.
useRef creates a mutable object holding a .current property that persists across renders without triggering re-renders.
useMemo caches the calculated result of an expensive calculation between renders until dependencies change.
useCallback caches a function definition between renders to maintain stable reference equality.
Custom hooks are JavaScript functions whose names start with "use" and can call other React hooks to share stateful logic.
Hooks must only be called at the top level of React function components or custom hooks.
Context provides a way to pass data through the component tree without manually passing props at every level.
The anti-pattern of passing props through multiple levels of intermediate components that do not need the data.
Lifting state up involves moving shared state to the closest common ancestor of the components that need it.
The diffing algorithm React uses to compare the old and new Virtual DOM trees and calculate minimal DOM updates.
React Fiber is the complete rewrite of the core reconciliation engine, enabling incremental rendering and priority-based scheduling.
Render phase computes Virtual DOM diffs without side effects; Commit phase applies changes to the real DOM synchronously.
React groups multiple state updates into a single re-render to optimize performance and prevent unnecessary repaints.
Identifying and diagnosing common React performance issues including wasted renders, heavy computations, and memory leaks.
Strategic use of React.memo, useMemo, and useCallback to preserve reference stability and prevent redundant render cascades.
Error boundaries are components that catch JavaScript errors anywhere in their child component tree and display a fallback UI.
Code splitting splits the application bundle into smaller chunks loaded on demand using React.lazy and dynamic imports.
Suspense lets components suspend rendering while waiting for asynchronous operations (code splitting, data fetching, streaming).
Concurrent React can prepare multiple versions of the UI simultaneously and interrupt background renders for urgent user input.
React Server Components (RSC) execute exclusively on the server, streaming zero client JavaScript bundle size to the browser.
The React Scheduler coordinates all tasks based on priority levels, utilizing MessageChannel and cooperative yielding.