Top 230 React Interview Questions & Answers

No — state updates in React are asynchronous and batched. Calling setState schedules an update; the state variable in your current function still holds the snapshot value from the current render.

You cannot read the new value directly after calling the setter in the same synchronous block. The updated value is only available in the next render.

How to work around it:

1. Use the functional update form setState(prev => ...) when the next state depends on the current
2. Use a ref alongside state if you need the value synchronously (rare)
3. Use useEffect with the state variable as a dependency to react to changes

React schedules a re-render when one of four things happens:

1. State changes — calling a useState setter or useReducer dispatch schedules a re-render of that component and all its descendants
2. Parent re-renders — by default, when a parent re-renders it re-renders all children, even if their props didn't change. React.memo opts a component out of this
3. Props change — technically a consequence of the parent re-rendering with new values
4. Context value changes — any component subscribed via useContext re-renders when the context value changes

React does not watch variables like a proxy. It only knows about changes you tell it about through the state API.

When JavaScript evaluates 0 && <Text />, it short-circuits and returns 0 (the falsy left-hand side). React then renders 0 because zero is a valid renderable value — unlike false, null, or undefined, which render nothing at all.

This is one of the most common React gotchas: developers expect 'render nothing when count is 0', but see a stray 0 on screen instead.

Fix: Always coerce to a proper boolean before using &&.

Function Components (modern, preferred):

• Plain JavaScript functions that accept props and return JSX
• Use Hooks for state and lifecycle
• Less boilerplate, easier to read and test
• Better performance (no class instantiation overhead)

Class Components (legacy):

• ES6 classes that extend React.Component
• Use this.state and lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount)
• More verbose — require this binding for event handlers
• Still fully supported, but not recommended for new code

In development only, React 18+ deliberately mounts → unmounts → remounts every component inside <StrictMode>. This causes each useEffect to run its full setup → cleanup → setup cycle.

Why: React is preparing for the Activity component (formerly Offscreen) — a feature that lets components be hidden and reshown while preserving state. For this to work safely, every effect must tolerate multiple mount/unmount cycles.

If your effect breaks on the second run, it signals a missing cleanup or a hidden side effect that needs to be fixed. StrictMode makes the bug visible before it reaches production.

Return a cleanup function from useEffect. React calls it:

• Before the effect re-runs (when dependencies change)
• When the component unmounts

This prevents memory leaks, stale subscriptions, and race conditions.

Common things to clean up:

• setInterval / setTimeout → clearInterval / clearTimeout
• addEventListener → removeEventListener
• WebSocket connections → ws.close()
• Fetch requests → AbortController.abort()
• Library subscriptions → call the returned unsubscribe function

Named imports enable tree shaking — the build tool (Vite/Rollup/webpack) statically analyzes which exports are used and removes all unused code from the final bundle.

With a namespace import (import * as lib), the bundler cannot know which properties will be accessed at runtime, so it is forced to include the entire library — even functions you never call.

This matters most for large libraries: lodash is ~70KB gzipped, date-fns is ~13KB for just format but ~75KB if you import everything.

React.memo uses shallow equality (Object.is) to compare each prop. Objects and arrays are compared by reference, not by value.

Object and array literals declared inside a component body create a new reference on every render — even if the contents are identical. So React.memo sees them as 'changed' and re-renders anyway.

Fix: Stabilize references using:

• useMemo for object/array props
• useCallback for function props
• Define constants outside the component if they never change

React.lazy() requires a default export. If your component uses a named export, you have two clean options:

1. Map the named export to default using .then() on the dynamic import
2. Add a default export to the source file

Option 1 is useful when you can't modify the source. Option 2 is cleaner and preferred when you can.

Imperative programming describes how to do something — you give step-by-step instructions to mutate state and the DOM directly.

Declarative programming describes what you want — the desired end state — and lets the system figure out how to achieve it.

React is declarative: you describe what the UI should look like for a given state, and React handles the DOM updates. jQuery/vanilla JS DOM manipulation is imperative: you manually select nodes, update text, and toggle classes.

Why declarative wins for UIs:

• Less code to reason about
• No order-of-operations bugs
• UI is always predictable from state alone

No. React renders (calls your component functions) frequently, but only updates the real DOM when something actually changed.

The three-step process:

1. Render phase — React calls your component function, producing a new Virtual DOM tree
2. Reconciliation (diffing) — React compares the new tree against the previous one
3. Commit phase — Only the changed parts are applied to the real DOM

If the output is identical, React skips the DOM update entirely. DOM operations are expensive; in-memory VDOM diffing is cheap.

No — props are read-only. A component must never mutate its props. React enforces this as a design rule because:

• Props belong to the parent — only the parent can change what it passes down
• Mutating props would break unidirectional data flow, making bugs hard to trace
• It violates the 'single source of truth' principle

If a component needs to change something in response to user input, it should either use its own state, or call a callback prop to notify the parent.

You lift state up when two or more sibling components need to share or react to the same state.

The pattern:

1. Remove the state from both siblings
2. Move it to their closest common ancestor
3. Pass state down as props and pass callback functions down so siblings can request updates

Signs you need to lift state:

• Two components are out of sync
• You're duplicating state across siblings
• A parent component needs to know what's happening inside a child

Instead of passing a new value directly to the setter, you pass a function that receives the previous state and returns the new state:

setCount(prev => prev + 1);

When to use it:

1. Inside closures (e.g., useEffect, setTimeout) — the function form always receives the latest state, avoiding stale closure bugs
2. When new state depends on old state — makes the dependency explicit and safe
3. With React 18 batching — multiple functional updates are applied sequentially in the correct order

There are two core rules enforced by the eslint-plugin-react-hooks linter:

1. Only call Hooks at the top level — never inside loops, conditions, or nested functions. This ensures React always calls hooks in the same order on every render, keeping state slots stable.

2. Only call Hooks from React functions — call them from React function components or from custom hooks only. Never from plain utility functions, class methods, or regular JavaScript functions.

React tracks hook state using an internal list indexed by call order. On every render, each hook call maps to its corresponding slot in that list:

Render 1:  useState → slot[0],  useEffect → slot[1]  ✅
Render 2:  useState → slot[0],  useEffect → slot[1]  ✅ stable

If a hook is inside an if and the condition flips:

Render 1 (true):   useState → slot[0],  useEffect → slot[1]
Render 2 (false):  useEffect → slot[0]  ← reads useState's stored value!

React maps the wrong hook to the wrong state slot, producing corrupted, unpredictable behavior.

e.preventDefault() stops the browser's default behavior for an event.

Common use cases in React:

• Form submission — prevents the page from reloading (browser's native POST behavior)
• Link clicks — prevents navigating away from a SPA
• Drag-and-drop — enables custom drop targets
• Right-click — suppresses the browser context menu

Important: it does not stop the event from bubbling up to parent elements. Use e.stopPropagation() for that.

When a component's key prop changes, React completely unmounts the old instance and mounts a brand-new one. All internal state is destroyed and re-initialized from scratch.

This happens because key is React's identity marker for a component instance. A different key = a different instance.

Practical applications:

• Reset form state when switching between records (e.g., editing User A vs User B)
• Force a full remount to flush all internal state without restructuring your component tree

When JavaScript evaluates 0 && <Text />, it short-circuits and returns 0 (the falsy left side). React then renders 0 because zero is a valid renderable value — unlike false, null, or undefined which render nothing.

This is a common bug: developers expect 'render nothing when count is 0', but instead see a stray 0 on the screen.

Fix: Always convert to a proper boolean using a comparison or !!.

Lifting state up means moving state to the nearest common ancestor of the components that need to share it.

When two sibling components need access to the same data, you remove the state from both and place it in their shared parent. The parent passes the state down via props and provides callback functions so children can request updates.

This preserves React's unidirectional data flow — data only ever flows downward through props.

There are three main options:

• React.ReactNode — broadest type; accepts JSX elements, strings, numbers, arrays, portals, null, undefined. Best default for wrapper/layout components.
• React.ReactElement — only JSX elements (no primitives). Use when you need to call React.cloneElement on the child.
• React.PropsWithChildren<Props> — a utility type that automatically adds children?: ReactNode to your existing props interface.

Prefer uncontrolled components (DOM-owned value, accessed via ref) in these situations:

1. File inputs — <input type="file"> is inherently uncontrolled; you cannot set its value programmatically
2. Simple one-time reads — you only need the value on submit, not on every keystroke
3. Integrating with non-React libraries — third-party DOM plugins that manage their own input state
4. Large forms with many fields — avoiding a re-render on every keystroke (though React Hook Form is the modern solution)

For most cases, controlled components are preferred because they enable live validation, conditional logic, and syncing across fields.

Yes — this is a common idiomatic pattern. A ref persists its value across renders without triggering a re-render when changed, making it ideal for tracking previous values.

The key insight: useEffect runs after the render, so updating prevRef.current = value inside an effect means prevRef.current always holds the value from the previous render during the current render.

Arrow functions defined inline in JSX create a new function reference on every render. This has two implications:

1. Breaks React.memo — memoized children receive a new function prop every render, making memoization ineffective
2. Minor GC pressure — more short-lived objects for garbage collection

In practice: inline arrow functions are fine for most components. Only optimize with useCallback when:

• The child is wrapped with React.memo
• The child's re-render is measurably expensive
• You've profiled and confirmed it's the bottleneck

A cleanup function is a function returned from your useEffect. React calls it before the next effect runs and also when the component unmounts. Used for cleaning up:

• Event listeners
• Timers/intervals
• Subscriptions
• Fetch requests (via AbortController)

Use the spread operator to create a new object with only the changed property. Never mutate the state object directly — React won't detect the change.

The Context API allows you to share data globally across the component tree without having to pass props through every level (prop drilling). It consists of:

1. React.createContext() — creates the context
2. Context.Provider — provides the value to children
3. useContext() — consumes the value in any descendant

Never use .push() on a state array — it mutates the original. Use the spread operator or .concat() to create a new array.

Use .filter() to create a new array that excludes the item you want to remove.

Use the functional update pattern to safely flip the boolean value based on the previous state.

dangerouslySetInnerHTML is React's equivalent of setting innerHTML directly. It renders raw HTML strings to the DOM. It's dangerous because it can introduce Cross-Site Scripting (XSS) vulnerabilities if the HTML comes from user input.

The key prop is a React-internal identifier for list items. When key changes, React unmounts the old component and mounts a fresh one, resetting all its state. This makes it a powerful tool beyond just lists:

• Reset form state when a different record is selected: <Form key={userId} />
• Force remount when you want completely fresh component state

Event bubbling means an event triggered on a child element propagates upward through its ancestors. React's Synthetic Events follow the same pattern. Use e.stopPropagation() to prevent an event from bubbling up.

React.forwardRef lets a component expose a DOM node (or any ref) to its parent. Without it, parents can't attach refs to custom components — refs work on DOM elements by default.

useId generates a unique, stable ID for accessibility attributes (like connecting a label to an input). It's server-safe — IDs are consistent between server-rendered HTML and client-side hydration.

A controlled form is one where React state manages all input values. Every keystroke updates state, and the input's displayed value is always derived from state. This gives React full control over the form data.

In plain HTML, forms use the browser's native behavior (POST request that reloads the page). In React:

1. Use e.preventDefault() in onSubmit to stop the page reload
2. Manage values with state (controlled) or refs (uncontrolled)
3. Validate in JavaScript before submission
4. Submit via fetch/axios as an API call

Component composition is the practice of building complex UIs by combining smaller, focused components. React favors composition over inheritance — instead of extending a base component, you wrap or include components inside each other.

Imperative: Step-by-step instructions on how to do something.

// Imperative DOM manipulation
const btn = document.querySelector('#btn');
btn.textContent = 'Clicked!';
btn.style.background = 'red';

Declarative: Describing what you want, and React figures out how.

// Declarative React
<button className={isClicked ? 'clicked' : ''}>{
  isClicked ? 'Clicked!' : 'Click me'
}</button>

A component library is a collection of pre-built, styled React components. They speed up development by providing buttons, modals, forms, tables, etc., without building from scratch.

1. shadcn/ui — Copy-paste components built with Radix + Tailwind (2026 standard)
2. Radix UI — Headless, accessible primitives
3. Material UI (MUI) — Google's Material Design implementation for React

Others: Ant Design, Chakra UI, Mantine, DaisyUI

Both forms set the initial state, but:

• Direct value: useState(expensiveCalculation()) — runs on every render (but only uses the result on first render)
• Initializer function: useState(() => expensiveCalculation()) — runs only once on mount

For expensive initial state (e.g., parsing localStorage), always use the function form.

When two sibling components need to share state, you move the state up to their closest common ancestor. The parent owns the state and passes it down via props.

HMR allows Vite to update only the changed modules in the browser without a full page reload. When you edit a React component, Vite replaces it in the running app without losing current state. This makes development extremely fast.

Each component should do one thing well. A component that fetches data, transforms it, AND renders it is doing too much — split it into a container (logic) and a presentational (UI) component.

Signs a component needs splitting:

• It's longer than 100 lines
• It manages unrelated state
• Deeply nested JSX that's hard to read

• onSubmit on the <form> element — fires when any submit button is clicked OR when Enter is pressed inside an input. Best practice for forms.
• onClick on the button — only fires on button click, misses Enter key submission.

Always use onSubmit on the <form> tag and e.preventDefault() inside it.

Tree shaking is a build optimization that removes unused code (dead code elimination) from the final bundle. Bundlers like Vite/Rollup analyze the dependency tree and exclude exports that are never imported.

The as keyword creates an alias for an imported name, useful when two modules export something with the same name.

pnpm (performant npm) is a package manager that:

1. Uses a single content-addressable store — packages are never duplicated across projects, saving gigabytes of disk space
2. 5-10x faster installs with a hard-link/symlink approach
3. Stricter peer dependency resolution — prevents "phantom dependencies" (using packages that aren't in your package.json)
4. Preferred by most professional teams in 2026

tsconfig.json configures the TypeScript compiler. Key options:

• "strict": true — Enables all strict type checks (strongly recommended)
• "target" — Which JS version to compile to (ES2022+)
• "jsx": "react-jsx" — Enable JSX transformation
• "paths" — Absolute import aliases (e.g., @/components)
• "types" — Which @types packages to include

React.memo is a Higher-Order Component (HOC) that skips re-rendering a component if its props haven't changed. It does a shallow comparison of all props — if none changed, the previous render result is reused.

Error Boundaries are class components that catch JavaScript errors in their child component tree, log them, and display a fallback UI instead of crashing the entire app. They catch errors during rendering, in lifecycle methods, and in constructors.

⚠️ They do NOT catch:

• Errors inside event handlers (use try/catch)
• Async errors (fetch failures)
• Server-side rendering errors

Synthetic Events are React's cross-browser wrapper around native browser events. They:

• Have a consistent interface across all browsers
• Are pooled for performance (in older React versions)
• Support the same interface as native events (target, preventDefault, stopPropagation)

In React 17+, events are attached to the root rather than individual elements, changing how event propagation works slightly.

Store the previous value in a ref — refs don't trigger re-renders and persist across renders.

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like code inside JavaScript. Under the hood, it compiles to React.createElement() calls:

// JSX
const el = <h1 className="title">Hello</h1>;
// Compiles to:
const el = React.createElement('h1', { className: 'title' }, 'Hello');

JSX is not required because you can write React.createElement() directly. However, JSX is far more readable and is universally used.

Props (properties) are the way you pass data from a parent component to a child component. They are:

• Read-only: A child component must never modify its props
• Unidirectional: Data flows only downward (parent → child)
• Passed like HTML attributes: <Button label="Submit" disabled={false} />

State is data that is managed within a component and can change over time. Props are data passed into a component from outside.

useState is a React Hook that lets you add state to function components. It returns an array with two elements: the current state value and a setter function to update it.

React Hooks are functions that let you 'hook into' React state and lifecycle features from function components. The 5 most common are:

1. useState — Add state to function components
2. useEffect — Synchronize with external systems (APIs, subscriptions)
3. useContext — Access a Context value from anywhere in the tree
4. useRef — Hold a mutable value that doesn't cause re-renders
5. useMemo — Cache the result of an expensive calculation

1. Only call Hooks at the top level — Never inside loops, conditions, or nested functions. This ensures React calls Hooks in the same order on every render.
2. Only call Hooks from React functions — Call them from React function components or from custom Hooks, never from regular JavaScript functions.

A component is a reusable, self-contained piece of UI. In modern React, all components are JavaScript functions that:

• Accept props as input
• Return JSX (what to render)
• Can manage their own state
• Follow PascalCase naming (UserCard, not userCard)

React handles events using Synthetic Events — cross-browser wrappers around native browser events. Event handlers are passed as props using camelCase naming:

• onclick → onClick
• onchange → onChange

The key prop helps React identify which items in a list have changed, been added, or removed. Without keys, React would re-render the entire list on any update — with proper keys, it only re-renders the items that actually changed.

Rules for good keys:

• Must be unique among siblings
• Use stable IDs from your data (database IDs, UUIDs)
• Never use Math.random() (generates new keys every render)
• Avoid using array index if the list can be sorted/filtered

Conditional rendering means displaying different UI based on a condition. Common patterns:

1. Ternary operator — condition ? <A /> : <B />
2. Logical AND (&&) — condition && <Component />
3. if/else before return
4. Optional rendering — returning null from a component

You can't pass data directly upward in React's one-way data flow. Instead, you pass a callback function (as a prop) from parent to child. The child calls that function with the data, which updates the parent's state.

The children prop is a special React prop that represents the content placed between the opening and closing tags of a component. It enables the Composition pattern — building flexible wrapper components.

Controlled Component: React state owns the form input's value. Every keystroke updates state, making React the 'single source of truth'.

Uncontrolled Component: The DOM owns the form input's value. You use a ref to access the value when needed (e.g., on submit).

React.Fragment (or shorthand <>...</>) lets you group multiple elements without adding an extra DOM node. This is useful when a component needs to return multiple siblings.

In JSX:

• null, undefined, false, and true are all valid React children but render nothing
• This is why you can use condition && <Component /> — when condition is false, nothing is rendered

Warning: 0 (zero) is falsy but DOES render as the number 0. Use explicit boolean: count > 0 && <Count />

Function Components (modern, preferred):

• Plain JavaScript functions
• Use Hooks for state and lifecycle
• Simpler, less boilerplate
• Better performance (no class instantiation overhead)

Class Components (legacy):

• ES6 classes extending React.Component
• Use this.state and lifecycle methods (componentDidMount, etc.)
• More verbose
• Still supported but not recommended for new code

The spread operator (...) lets you pass all properties of an object as props at once. It's useful when you want to forward all props from a parent to a child without listing them individually.

Prop drilling is when you pass props through multiple layers of components that don't need the data, just to get it to a deeply nested component.

Problem: Components become tightly coupled, code is harder to maintain, and every intermediary component knows about data it doesn't use.

Solutions: Context API, state management libraries (Zustand, Redux), or component composition.

A component can return null to render nothing at all. This is useful for conditional rendering.

Note: Returning null still means the component's useEffect hooks will run — the component is rendered (runs its function), it just produces no visible output.

Default props allow you to define fallback values for props that are not provided. In modern TypeScript React, this is done using destructuring default values rather than a static defaultProps property.

Calling setState (or a useState setter) does three things:

1. Schedules a state update (does not update immediately)
2. Triggers a re-render — React schedules the component function to run again
3. Batches multiple updates — Multiple setState calls in the same event handler are combined into a single re-render

⚠️ State is a snapshot — the state variable in your handler always refers to the value at the time the handler was created.

• onClick={handleClick} — passes the reference to the function. React calls it when clicked. ✅
• onClick={handleClick()} — calls the function immediately during render and passes its return value. ❌

For passing arguments, use an arrow function: onClick={() => handleDelete(item.id)}

<React.StrictMode> is a development-only wrapper that helps detect potential problems. It:

1. Double-invokes render functions to find side effects in them
2. Double-invokes state initializers and reducers
3. Warns about deprecated APIs

It has NO effect on production builds — it only runs additional checks in development.

There are several approaches:

1. Inline styles — style={{ color: 'red', fontSize: '16px' }} (camelCase)
2. CSS Classes — className="btn primary" (not class)
3. CSS Modules — import styles from './Button.module.css' → styles.button
4. Tailwind CSS — className="bg-blue-500 rounded-lg"
5. CSS-in-JS — Styled-components, Emotion
6. StyleX / Panda CSS — Zero-runtime (2026 standard)

Use the JavaScript .map() method to transform an array of items into an array of JSX elements. Each element needs a unique key prop.

PascalCase means each word starts with a capital letter (e.g., UserCard, NavBar, HeroSection). React uses the first letter to determine whether an element is a native HTML element or a custom component:

• Lowercase → HTML element (<div>, <button>)
• Uppercase → Custom component (<UserCard />, <Button />)

If you name a component myButton (lowercase), React will try to render it as an HTML element and fail.

Rendering in React is the process of React calling your component function to determine what UI should look like — it's a calculation step, not a drawing step. Rendering produces a description of the UI (VDOM), which React then uses to update the actual DOM in the commit phase.

Renders happen when:

• State changes (useState, useReducer)
• Props change
• A parent component re-renders
• Context value changes

useEffect lets you synchronize your component with external systems (APIs, localStorage, subscriptions). It runs after the component renders and commits to the DOM.

• No array: Runs after every render
• Empty array []: Runs once after the first render (mount)
• With deps [a, b]: Runs whenever a or b changes

React is a JavaScript library for building user interfaces. It solves the problem of managing complex UI state by introducing a declarative programming model — you describe what the UI should look like for a given state, and React handles how to update the DOM to match it. Before React, developers manually selected DOM elements and mutated them (imperative), which became unmanageable as apps grew.

The Virtual DOM (VDOM) is a lightweight JavaScript representation of the actual browser DOM. When state changes, React:

1. Creates a new Virtual DOM tree
2. Diffs it against the previous tree (reconciliation)
3. Calculates the minimal set of changes needed
4. Updates only those specific parts of the real DOM

This is more efficient than manually updating the DOM because DOM operations are expensive, and React batches and minimizes them.

Render phase (pure, interruptible):

• React calls component functions, building a new Fiber tree
• Diffs the new tree against the previous one
• Computes a list of DOM mutations to apply
• Can be paused, aborted, or restarted in concurrent mode
• Must be side-effect free — component functions may run more than once

Commit phase (synchronous, not interruptible):

1. Before mutation — getSnapshotBeforeUpdate (class components)
2. Mutation — DOM insertions, updates, and deletions are applied
3. Layout — useLayoutEffect cleanup then setup runs synchronously

After the commit phase, useEffect is scheduled to run asynchronously after the browser paints.

Render phase (pure, interruptible):

• React calls component functions and produces a new Fiber tree
• Diffs against the previous tree
• Builds a list of DOM changes to apply
• Can be paused, aborted, or restarted (in concurrent mode)
• Must have no side effects — components may run more than once

Commit phase (synchronous, not interruptible):

• React applies DOM mutations
• Runs useLayoutEffect cleanup then setup (synchronously)
• Schedules useEffect to run asynchronously after paint
• Cannot be interrupted — DOM is updated atomically

The separation is why component functions should be pure: they may run during an interrupted render that gets discarded.

Choose Zustand when:

• You want minimal boilerplate — no action creators, reducers, or slices required
• The project is small to medium sized
• You want global state accessible outside React (e.g., in WebSocket handlers or utilities)
• You want to skip wrapping the app in a <Provider>

Choose Redux Toolkit when:

• You need time-travel debugging and the full Redux DevTools experience
• You're on a large team that benefits from strict, enforced conventions
• You need RTK Query for sophisticated server state with cache invalidation
• You're already on a Redux codebase with no justification to migrate

In 2026, Zustand is the default for new projects; Redux Toolkit for large teams with complex requirements.

Yes — Server Components can import and render Client Components. This is the primary composition pattern in Next.js App Router.

What happens at the boundary:

• The Client Component's code is included in the browser JS bundle
• Props passed across the boundary must be serializable (strings, numbers, plain objects — no functions, class instances, or Promises)
• The Server Component's own code is never sent to the browser

The reverse is not true: a Client Component cannot import a Server Component. However, you can pass Server Component output as children to a Client Component — it stays server-rendered.

Yes — this is one of the most recommended patterns for medium-complexity global state without a third-party library.

useReducer handles complex state transitions with a pure reducer function. Context makes both the state and the dispatch function available anywhere in the tree.

Best practice: Use two separate contexts — one for state, one for dispatch. Components that only dispatch actions won't re-render when state changes.

useLayoutEffect runs synchronously after DOM mutations, before the browser paints. On the server (SSR / RSC), there is no DOM — React cannot perform layout measurements or painting.

Using useLayoutEffect in a server-rendered component produces this warning:

How to fix:

1. Use useEffect instead if synchronous pre-paint timing isn't critical
2. Mark the component 'use client' in Next.js App Router
3. Guard with typeof window !== 'undefined' for client-only measurement code

useOptimistic (React 19) applies a temporary optimistic state while an async action (Server Action) is in progress, automatically reverting when the action completes.

A <Suspense> boundary wraps components that may suspend (throw a Promise). While suspended, the fallback UI is shown. When the Promise resolves, the component renders.

Data libraries like TanStack Query and SWR can work with Suspense mode. React Server Components work with Suspense naturally.

Imperative: Directly manipulate DOM using useRef + useEffect:

useEffect(() => { gsap.to(ref.current, { opacity: 0, duration: 1 }); }, []);

Declarative: Describe the desired state, the library transitions:

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />

Declarative is preferred for most React animations — it integrates with React's state model naturally.

Best pattern: combine Context API (or Zustand) with a custom hook to provide auth state globally.

Zod is a TypeScript-first schema validation library. Combined with React, it's used for:

1. Form validation via React Hook Form's zodResolver
2. API response validation — validate data before using it
3. TypeScript types from schemas (z.infer<typeof schema>)
4. Server Action input validation — always validate server-side

Discriminated unions use a common literal type field (the discriminant) to narrow between union members. Essential for state machines in React — they ensure exhaustive handling.

Wrap your component tree with an ErrorBoundary component. Libraries like react-error-boundary provide a hook-friendly API and reset functionality.

The React DevTools Profiler records render performance:

• Which components rendered
• Why they rendered (state change, prop change, parent re-render)
• How long each render took
• A flame chart of the render tree

Use it to identify the most expensive components and determine if memoization would be beneficial.

E2E tests simulate real user interactions in a browser — clicking, typing, navigating. Playwright is the 2026 standard:

• Supports Chromium, Firefox, WebKit
• Built-in auto-wait
• Trace viewer for debugging
• Network request interception

All three are memoization strategies but at different levels:

• React.memo: Memoizes a component — prevents re-render if props unchanged
• useMemo: Memoizes a computed value inside a component
• useCallback: Memoizes a function definition inside a component

They work together: React.memo'd components only benefit from memoization if their prop functions are stable (useCallback) and their prop objects/arrays are memoized (useMemo).

Hydration errors happen when the server-rendered HTML doesn't match what React expects to render on the client. Common causes:

1. Math.random() or Date.now() in components (different values server/client)
2. Rendering different content based on window/document (doesn't exist on server)
3. Browser extensions injecting DOM nodes
4. useLayoutEffect (server warning)

Fix: Use useEffect for client-only code, useId for IDs, conditional rendering after mount.

useFormStatus gives you access to the submission status of the parent <form>. It must be called from a component inside the form.

React Hook Form (RHF) manages form state outside React state, using uncontrolled inputs with refs. This results in:

• Minimal re-renders — only the changed field re-renders, not the whole form
• Simpler code — less useState boilerplate
• Built-in validation with Zod/Yup integration
• Better performance for forms with many fields

The ESLint react-hooks/exhaustive-deps rule warns when effect dependencies are missing. Missing deps causes stale closures — the effect uses outdated values.

Valid suppressions (rare):

• Stable refs (ref.current doesn't need to be in deps)
• Stable setters (setState functions are stable)

Always fix (never suppress):

• State variables used in the effect
• Props used in the effect
• External functions called in the effect

Modern patterns use discriminated unions to represent all possible states explicitly:

componentWillUnmount in class components runs only when the component unmounts. The useEffect cleanup function runs before every re-run of the effect AND when the component unmounts.

This is actually more powerful — effects self-clean before re-running, preventing double subscriptions.

The use hook (React 19) is a new primitive that can:

1. Unwrap Promises — const data = use(fetchPromise) — integrates with Suspense
2. Read Context — const theme = use(ThemeContext) — can be called conditionally (unlike useContext)

It's more flexible than useContext because it can be called inside loops and conditionals.

Return an array (like useState) when the values are always used together in a fixed order and renaming is useful:

const [value, setValue] = useCustomState(init);
const [count, increment, decrement] = useCounter(0);

Return an object when:

• The hook returns many values
• Consumers might only need a subset
• Self-documenting names matter

const { data, isLoading, error, refetch } = useFetch(url);

The modern testing stack:

1. Vitest — Test runner (Jest-compatible, Vite-native)
2. React Testing Library (RTL) — Render components and query them as a user would
3. MSW — Mock API calls at the network level
4. Playwright — End-to-end browser tests

Philosophy: Test behavior, not implementation. Use getByRole, getByLabelText rather than getByTestId.

Headless UI components provide behavior and accessibility without any styling. They return:

• State (isOpen, selectedValue)
• Props to spread onto elements (aria-*, role, event handlers)
• Refs for DOM access

Consumers provide all the rendering. This enables complete styling freedom while reusing complex logic (keyboard navigation, ARIA, focus management).

URL state stores application state in URL parameters, making it shareable and bookmarkable. Use for:

• Search queries
• Active filters
• Selected page/tab
• Sort order

Rule: If sharing a URL should reproduce the exact same view, that state belongs in the URL.

as const makes TypeScript infer the most specific (narrowest) type for a value, preventing widening. Useful for defining tuples (like the return from useState) and string literal unions.

The pattern: store preference in localStorage → apply to the document root → use CSS custom properties for all colors. React manages the JS side, CSS handles the visual changes.

React stores state by component position in the tree, not by the component instance. Two identical components at different positions have separate state. The key prop overrides this — giving React a stable identity independent of position.

React automatically escapes all content rendered in JSX — strings are encoded before insertion into the DOM. Key rules:

1. Never use dangerouslySetInnerHTML with unsanitized user input
2. Always sanitize with DOMPurify before dangerouslySetInnerHTML
3. Avoid eval(), Function(), or innerHTML with user data
4. Use a Content Security Policy (CSP) header to block inline scripts

useTransition returns [isPending, startTransition]. The isPending flag is true while a transition is in progress, allowing you to show a loading indicator without blocking the UI.

React 18 automatically batches multiple state updates that happen together. You can use flushSync to force a synchronous, unbatched update when you need the DOM to update immediately (e.g., for measuring after a state change).

Use IntersectionObserver to detect when a sentinel element (at the bottom of the list) becomes visible, then load more data.

A polymorphic component renders different HTML elements based on an as or asChild prop, while preserving its styling and behavior. Used by design systems to allow semantic flexibility.

flushSync from react-dom forces React to synchronously flush updates inside the callback and update the DOM before returning. Rarely needed — use only when you must read the DOM immediately after a state update.

Store current page in URL state (searchParams) or local state. Derive the visible slice from the full dataset or fetch only the current page from the API.

Jotai (Japanese: 'state') uses an atomic model — you define small pieces of state (atoms) and compose them:

• Bottom-up (start small, compose larger)
• No Provider needed
• Derived atoms with atom(get => get(baseAtom) * 2)

Zustand is top-down:

• Define one store with all state
• Select specific slices

When to use Jotai: Fine-grained reactive state, complex derived values, when Component A and B need isolated but related state.

• staleTime: How long (ms) cached data is considered fresh before it's refetched in the background. Default: 0 (immediately stale)
• gcTime (formerly cacheTime): How long unused (no active subscriptions) cached data is kept before garbage collection. Default: 5 minutes

If gcTime < staleTime, the cached data would be garbage-collected before it becomes stale — a misconfiguration.

act() ensures all state updates, effects, and re-renders are processed before assertions run. React Testing Library wraps interactions in act() automatically, but you may need it manually for:

• Custom hook tests
• State updates triggered outside of React
• Async operations in tests

useId generates a stable, unique ID that is the same between server and client renders. Using Math.random() for IDs causes hydration mismatches — the server ID doesn't match the client-generated ID, causing React to re-render the entire component.

The use hook unwraps a Promise inside a component. The component suspends (doesn't render) until the Promise resolves. Works with Suspense. Unlike await, it can be called conditionally.

Forms can use Server Actions directly via the action prop. This enables progressive enhancement — forms work even without JavaScript. React enhances them with client-side handling when JS is available.

• Library: Code YOU call — you are in control of the flow (React, TanStack Query, Zustand)
• Framework: Code that calls YOU — the framework controls the flow (Angular, Next.js, Remix)

React is technically a library — it handles rendering but doesn't dictate how you structure your app, handle routing, or fetch data. Next.js is a framework built on React.

useDeferredValue returns a deferred copy of a value that lags behind the original. React renders the deferred version with lower priority, keeping the UI responsive while deferring expensive renders.

The React Compiler (formerly React Forget) is a build-time optimization that automatically adds memoization to your components. It analyzes your code and inserts useMemo and useCallback where beneficial — making manual memoization largely unnecessary. Available in React 19 and the React 2026 roadmap.

Options:

1. HTML5 Drag and Drop API — native but limited and inconsistent styling
2. @dnd-kit — flexible, accessible, supports touch/keyboard
3. react-beautiful-dnd (legacy but popular)

For most apps, @dnd-kit is the 2026 standard.

useReducer is an alternative to useState for managing complex state logic. It takes a reducer function (state, action) => newState and an initial state.

Prefer useReducer when:

• Next state depends on the previous state in complex ways
• Multiple sub-values update together
• You have many related state transitions
• You want testable state logic (pure reducer function)

Redux-like pattern without Redux!

useCallback returns a memoized version of a function that only changes if its dependencies change. It stabilizes function references between renders.

Use it when:

• Passing a callback to a memoized child (React.memo) — unstable functions break memoization
• A function is in a useEffect dependency array
• Passing callbacks to expensive custom hooks

Don't use it for:

• Every function (adds overhead)
• Functions passed to native DOM events

Both are memoization hooks:

• useMemo — caches the result of a computation: useMemo(() => expensiveValue, deps)
• useCallback — caches the function itself: useCallback(() => doSomething(), deps)

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps)

Both run after every committed render, but at different times:

• useEffect: Runs asynchronously after browser paint. Safe for most cases. Better for performance.
• useLayoutEffect: Runs synchronously before browser paint, after DOM mutations. Blocks visual updates. Use for DOM measurements that need to be reflected before the user sees the result.

Causes of unnecessary re-renders:

1. Parent re-renders → all children re-render by default
2. Context value changing → all consumers re-render
3. New object/array/function references created in render
4. Incorrect useEffect dependencies

Prevention:

• React.memo — skip rendering if props unchanged
• useMemo — stable references for computed values
• useCallback — stable function references
• State colocation — keep state close to where it's used
• Context splitting — separate frequently-changing values

React.lazy enables code splitting — loading components only when they're needed, reducing initial bundle size.

Suspense provides a loading fallback while the lazy component loads.

When to use:

• Large components that aren't needed immediately (modals, settings pages, dashboards)
• Route-based code splitting in SPAs

React Fiber is the reimplemented reconciliation algorithm introduced in React 16. Key features:

1. Work units: The Fiber tree breaks rendering into individual units of work (Fiber nodes)
2. Interruptibility: Work can be paused and resumed, allowing high-priority updates to jump the queue
3. Prioritization: User interactions get higher priority than background updates
4. Two phases: Render phase (interruptible, pure) and Commit phase (synchronous, side effects)

useImperativeHandle customizes the ref value exposed by a component when using forwardRef. Instead of exposing the entire DOM node, you can expose only specific methods.

A stale closure occurs when a useEffect (or useCallback/useMemo) captures a snapshot of variables from a specific render, but those variables later become outdated while the closure still has the old values.

Most common in effects with timers or missing dependencies.

Context API drawback: When the context value changes, every consumer re-renders — even if they only use a small slice of the context. This can cause performance issues in large apps with frequently updated context.

Solutions:

1. Split contexts — separate stable data from frequently-changing data
2. useMemo — memoize the context value
3. Zustand/Jotai — selector-based subscriptions (only re-render when the specific slice changes)
4. Redux + useSelector — granular subscriptions to state slices

TanStack Query is a server state management library that handles:

• Caching fetched data with configurable staleness
• Background re-fetching (stale-while-revalidate pattern)
• Deduplication of simultaneous requests
• Mutations with optimistic updates and rollback
• Loading, error, and success states automatically

It replaces the common useEffect + useState + manual loading state pattern with a single, battle-tested solution.

Optimistic UI updates the interface immediately (assuming success) before the server confirms, then reverts if the server returns an error. This makes apps feel instantaneous.

In TanStack Query, use onMutate to apply the optimistic update, and onError to rollback.

CSR (Client-Side Rendering):

• HTML shell sent immediately, React renders in browser
• Slower first paint (empty shell → hydration)
• Best for: Apps behind auth where SEO doesn't matter

SSR (Server-Side Rendering):

• Full HTML generated on server per request
• Faster first paint, better SEO
• Slower to TTFB than static content
• Best for: Personalized pages (user dashboard, cart)

SSG (Static Site Generation):

• HTML pre-built at deploy time
• Instant delivery from CDN
• Best for: Blog posts, marketing pages, documentation

React Server Components (RSC) are components that run exclusively on the server and are never sent to the browser. They:

• Can directly access databases, file systems, and secrets
• Have zero bundle size impact (code never reaches the browser)
• Cannot use hooks (useState, useEffect) or browser APIs
• Reduce client-side JavaScript significantly

In Next.js App Router, all components are Server Components by default. Add 'use client' to opt into the client.

The compound component pattern uses multiple components that work together to share implicit state via React Context. The parent holds state and sub-components access it through context — without prop drilling.

Examples in the wild: <Select>, <Tabs>, <Accordion> from Radix UI.

Render props is a pattern where a component accepts a function as a prop that returns JSX. The component calls that function with its internal state, giving the parent control over rendering.

Largely replaced by custom hooks in modern React, but still useful for cross-component communication.

A Higher-Order Component (HOC) is a function that takes a component and returns a new, enhanced component. It's a pattern for reusing component logic — like wrapping with auth checks, analytics, or feature flags.

Reconciliation is the process React uses to efficiently update the DOM by comparing the previous and new Virtual DOM trees (diffing).

React's diffing algorithm assumptions:

1. Elements of different types → unmount old, mount new
2. Same type → update the existing DOM node
3. Keys → identify which list items have moved/changed

This makes reconciliation O(n) instead of O(n³) (general tree diffing).

• useRef: Returns the same ref object on every render. Used in function components.
• createRef: Creates a new ref object on every render. Use in class components or when you need a different ref per render.

In function components, always use useRef — createRef inside a function component would create a new ref every render, defeating the purpose.

Zustand is a minimal, flexible state management library. Key differences from Context API:

• No Provider required — state is accessed directly via the store hook
• Selector subscriptions — components only re-render when the specific slice they subscribe to changes
• Devtools integration — Redux DevTools support out of the box
• Simpler API — no boilerplate, just create a store

Prefer Zustand when:

• Context is causing too many re-renders
• You need global state accessible outside React components
• You need time-travel debugging

Debouncing delays a function from executing until after a specified wait time has passed since the last invocation. Common use case: search inputs — wait until the user stops typing before sending an API request.

AbortController provides a way to cancel pending fetch requests. In React, this is critical for preventing race conditions when components unmount while a request is in flight.

ReactDOM.createPortal() renders a component into a DOM node outside its parent component's DOM hierarchy. Used for modals, tooltips, and dropdowns that need to visually escape the parent's overflow or z-index constraints.

When to use event handlers:

• Side effects triggered by user interaction (button click, form submit)
• API calls FOR a specific user action (buying a product)

When to use useEffect:

• Side effects that need to happen because a component was rendered (subscribing to a WebSocket, syncing with localStorage)
• Connecting to external systems

The rule: effects are for synchronization with external systems, not for reacting to user events.

Combining useReducer with Context API creates a lightweight, built-in state management solution:

• useReducer handles complex state transitions
• Context makes the state and dispatch globally accessible
• Split into separate StateContext and DispatchContext to prevent unnecessary re-renders

Concurrent React allows React to work on multiple tasks simultaneously and interrupt rendering to handle higher-priority updates. Key features:

• startTransition: Mark updates as non-urgent (won't block user input)
• useTransition: Access the isPending state during a transition
• useDeferredValue: Defer an expensive computation to keep the UI responsive
• Automatic batching: Multiple state updates batch automatically in React 18

startTransition marks state updates as non-urgent transitions. React may interrupt them to handle user input (clicks, typing). The UI remains responsive during expensive state transitions.

Use for: Tab switching, filter changes, page transitions — any heavy update that shouldn't block user input.

Before React 18, only state updates inside React event handlers were batched. React 18 automatically batches all state updates — including those inside:

• setTimeout/setInterval
• Native event listeners
• Promise callbacks
• Fetch .then() handlers

This means multiple setState calls in any async context result in a single re-render instead of one per setState.

Server Actions are async functions that run on the server and can be called directly from React components (including Client Components). They:

• Eliminate the need for separate API routes for mutations
• Are marked with 'use server' directive
• Work with forms natively (progressive enhancement — works without JavaScript!)
• Automatically handle CSRF protection

Zustand uses selector-based subscriptions — components only re-render when their selected slice changes:

// Only re-renders when count changes, not when user changes
const count = useStore(state => state.count);

Naive Context implementation would re-render ALL consumers on ANY change. Zustand uses useSyncExternalStore internally with a selector that's compared with Object.is — bypassing Context entirely.

Both are Next.js navigation helpers:

• notFound(): Throws an error that triggers the nearest not-found.tsx boundary. Sets HTTP status 404. Use for resources that don't exist.

• redirect(url, type?): Performs an HTTP redirect. Default type is 'replace' in Server Actions, 'push' elsewhere. Sets 307 (temporary) or 308 (permanent) status.

Both work in Server Components, Server Actions, and Route Handlers.

A write-through cache updates both local cache and server simultaneously, keeping them in sync:

1. Mutate → update cache optimistically AND call API
2. On success → server response replaces optimistic update
3. On error → rollback to previous cache state

taintUniqueValue is a React 19 experimental API that marks a value as secret so it cannot be passed from Server Components to Client Components. If a tainted value is passed as a prop, React throws an error in development.

Use case: Prevent accidentally leaking secrets (API keys, private user data) through RSC props to the browser.

Async event handlers:

• Fine — React doesn't care if an event handler is async
• State updates inside async handlers (after an await) are batched in React 18
• BUT: Error handling is the developer's responsibility (async handlers that throw don't trigger Error Boundaries)

What's NOT fine:

• Calling async functions in useState initializer (not supported)
• Calling async functions as useEffect callbacks (must return function or void, not Promise)

Next.js 15 includes the next/navigation router with typed routes via the typedRoutes experimental flag. But manual typing is possible with template literal types.

The Container/Presentation (Smart/Dumb) pattern separates:

• Container (Smart) — fetches data, manages state, contains logic
• Presentation (Dumb) — receives data via props, only renders UI

In 2026, this is largely replaced by custom hooks (which encapsulate the 'container' logic) and server/client component separation. Still useful for:

• Making presentation components easier to test (pure props-in, JSX-out)
• Storybook stories (no data fetching needed)
• UI libraries

Middleware (middleware.ts at project root):

• Runs at the Edge (CDN) before the request reaches Server Components
• Can rewrite, redirect, OR set response headers
• Runs on EVERY request matching the matcher config
• No React — pure NextRequest/NextResponse

Server Components:

• Run on the Origin server (or Edge with export const runtime = 'edge')
• Return JSX (rendered UI)
• Can access databases and secrets

Middleware is for auth guards, A/B testing, geo-routing — NOT for rendering UI.

React's scheduler assigns priority lanes to different kinds of work:

• SyncLane — flushSync(), input/click events (highest)
• InputContinuousLane — pointer move, scroll events
• DefaultLane — startTransition(), default updates
• IdleLane — window.requestIdleCallback() style work (lowest)

The scheduler processes higher lanes first, allowing user input (SyncLane) to preempt background rendering (DefaultLane).

Both are async functions in Next.js Route Segments:

• generateStaticParams: Returns params for which pages to pre-build at build time. Used with dynamic routes like [id]. Each returned param combination generates a static HTML page.

• generateMetadata: Returns metadata (title, description, OpenGraph) for a page. Called per request (or per build for static pages). Supports async data fetching.

Use useSyncExternalStore for consistency in concurrent mode, or a useEffect-based subscription.

Island Architecture renders the majority of pages as static HTML with isolated interactive 'islands' that hydrate independently. Benefits:

• Minimal JavaScript sent to client
• Islands hydrate in isolation (no waterfall)
• Better performance on low-end devices

Frameworks: Astro (uses React for islands), Next.js App Router (server components are essentially islands). Partial Hydration is the implementation mechanism.

React.cache (React 19) wraps an async function and memoizes its result per request for Server Components. Any Server Component that calls the cached function with the same args gets the same Promise — no duplicate database calls.

Difference from unstable_cache (Next.js): React.cache is per-request in memory. unstable_cache persists across requests (like Redis).

Virtualization renders only the visible viewport items, dynamically recycling DOM nodes as the user scrolls. This enables smooth rendering of 10,000+ items with minimal DOM nodes.

Libraries: @tanstack/react-virtual (lightweight, headless), react-window, react-virtuoso.

Next.js traces the exact files needed to run each page/route (using @vercel/nft). The .next/standalone output contains only these traced files — no full node_modules. Result: deployment size drops from hundreds of MB to tens of MB. Essential for Docker deployments on platforms like Railway, Fly.io.

Store all form state in a parent state object and preserve it between steps. Don't clear previous steps' data.

Security recommendation: Store JWTs in httpOnly cookies (inaccessible to JavaScript) for maximum security.

SWR is a caching strategy:

1. Serve stale data immediately (fast response)
2. Revalidate in the background with a fresh fetch
3. Update the UI when fresh data arrives

Result: Users see data instantly (no loading spinner), and the data eventually converges to fresh. TanStack Query implements this with staleTime and background refetching on window focus/interval.

Before React 17, React attached all events to the document root. In React 17+, events are attached to the root DOM container (#root). This matters because:

• Multiple React apps on one page don't interfere
• e.stopPropagation() actually works with native events
• Third-party code doesn't accidentally capture React events

This uses event delegation — single listener at the root rather than one per element — which is also why React's event system is performance-efficient.

useInsertionEffect runs synchronously before any layout effects and before the browser paints. It exists specifically for CSS-in-JS libraries to inject <style> tags before React reads layout measurements, preventing layout thrashing.

Don't use this hook in application code — it's for library authors building CSS-in-JS solutions.

Must handle the case where localStorage is undefined on the server.

ISR allows individual pages to be regenerated after deployment without rebuilding the entire site:

1. First request → serve cached static page
2. If page is stale (past revalidate seconds) → trigger background regeneration
3. Next request → serve newly generated page

In App Router, implemented via export const revalidate = 60 or fetch(url, { next: { revalidate: 60 } }).

Conditional types (T extends U ? X : Y) enable type-level computation. In React, they're used for:

• React.ComponentProps<T> — extract prop types from any component
• React.ElementType — represents any renderable element type

Both are used inside Server Actions or Route Handlers to invalidate the Next.js data cache:

• revalidateTag('posts') — invalidates all cached data tagged with 'posts', regardless of which URL it was fetched from. More granular.

• revalidatePath('/blog') — invalidates all cached data for the /blog route (and sub-paths with type: 'layout'). Broader scope.

Tagging is recommended for most use cases — it's more precise and doesn't couple invalidation logic to URL structure.

Use useInfiniteQuery which handles cursor/offset pagination naturally.

Both cache async function results:

Use React.cache to deduplicate calls within a single request. Use unstable_cache (or cache) for data that persists across requests (ISR-style).

The Fiber work loop processes work units one at a time, checking after each unit whether the browser needs to handle input events. If yes, work is paused and the browser gets control.

Work loop pseudocode:

while (nextUnitOfWork && !shouldYield()) {
  nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
}

shouldYield() uses the MessageChannel/scheduler to detect if the browser is waiting to paint or handle input. Committed work is synchronous — the commit phase can't be interrupted.

React uses Object.is() (same-value equality) to compare state values. For state:

• Primitives: 1 === 1 → skip re-render
• Objects/arrays: {} !== {} → ALWAYS re-render (new reference)

For React.memo, it compares all props with Object.is. For useMemo/useCallback, it compares dependencies.

Implication: Always return new references for changed complex state, same reference for unchanged state (use memoization).

Tearing occurs in concurrent mode when different parts of the UI read the same external store at different times during a single render — some read the old value, some read the new value, causing visual inconsistency.

useSyncExternalStore solves this by:

1. Getting a snapshot of external state synchronously
2. Re-rendering synchronously if the snapshot changes mid-render
3. Ensuring the entire render sees a consistent snapshot

Render Phase (Pure, Interruptible):

• React calls component functions
• Diffs the new VDOM against the old
• Builds a list of effects
• Can be paused, aborted, and restarted
• Must be side-effect free (no DOM manipulation, no subscriptions)
• Components may run MORE THAN ONCE in this phase

Commit Phase (Synchronous, Not Interruptible):

1. before mutation — getSnapshotBeforeUpdate
2. mutation — DOM creation, updates, deletions
3. layout — useLayoutEffect, componentDidMount/Update

After layout phase, useEffect is scheduled to run asynchronously.

When a Server Component renders a Client Component with props, React must serialize those props to send to the browser. Only JSON-serializable values are allowed:

• Strings, numbers, booleans ✅
• Arrays and plain objects ✅
• Dates, Maps, Sets (with special RSC protocol) ✅
• Functions ❌ — NOT serializable
• Class instances ❌

Server Components are rendered to a special RSC payload format (not HTML) that the client React reconciles against the existing DOM.

Concurrent React has two distinct rendering phases:

Phase 1 — Work (Async, Interruptible):

• Builds workInProgress Fiber tree
• Runs component render functions
• Calls useLayoutEffect cleanup functions
• May be restarted if higher priority work arrives

Phase 2 — Commit (Sync, Atomic):

• Updates the DOM
• Calls useLayoutEffect setup functions
• Schedules useEffect calls
• Cannot be interrupted

In StrictMode, Phase 1 runs twice to catch side effects.

Common React memory leaks:

1. Uncleared intervals/timeouts — missing cleanup in useEffect
2. Uncancelled fetch requests — updating state on unmounted component
3. Retained event listeners — not removing window.addEventListener
4. Growing Zustand/Redux store — never removing data from global stores
5. Closure-captured DOM nodes — callback captures a reference preventing GC

Detection:

• Chrome DevTools Memory tab → Heap snapshots
• Memory Timeline recording → look for growing heap
• why-did-you-render library
• React DevTools profiler for repeated unmounting

Controlled input sync issue: After React 18's batching, if you update state in a setTimeout, the input value may briefly show the stale value:

1. User types → onChange fires → setInputValue called
2. React batches with other setState calls
3. DOM briefly shows user-typed character before React update

For text inputs, React has special handling to prevent this 'flicker' — but it's a subtle edge case when state updates are expensive or deferred with startTransition.

Next.js extends fetch() with caching semantics:

• cache: 'force-cache' (default): Cached indefinitely → like getStaticProps
• cache: 'no-store': Never cached → like getServerSideProps
• next: { revalidate: 60 }: ISR — cached for 60 seconds then revalidated
• next: { tags: ['posts'] }: Tagged caching — invalidate with revalidateTag('posts')

Request memoization: Identical fetch() calls in the same render tree are deduplicated to a single network request.

useActionState (replaces useFormState) wraps a Server Action and provides:

• Current action state (the last returned value)
• isPending flag
• A wrapped action to call

Integrates with <form action> for progressive enhancement.

Model state as a discriminated union and actions as another union. The reducer enforces valid transitions — some actions are only valid in certain states.

React 16/17: Only batched updates inside React event handlers (synthetic events). Updates in setTimeout, Promise.then, or native event listeners were NOT batched — each setState caused a separate re-render.

React 18: Automatic batching — ALL updates from any origin are batched:

• React event handlers ✅
• setTimeout/setInterval ✅
• Promise.then() ✅
• Native DOM event handlers ✅

Use flushSync() to opt-out of batching when you need sync updates.

The boundary is established by 'use client' directives. Rules:

• Server Components can import Client Components
• Client Components cannot import Server Components (would need server)
• Server Components can pass Server Component output as children to Client Components
• Props crossing the boundary must be serializable

Performance implication: Every 'use client' converts an entire module subtree to client code. Keep client components at the leaves of the tree.

Use onMutate to apply optimistic updates, onError to rollback, and onSettled to re-sync with server.

Cumulative Layout Shift (CLS) measures unexpected visual shifts during page load. React-specific causes:

1. Images without explicit dimensions
2. Dynamic content injection (ads, banners appearing)
3. Custom fonts loading (FOIT/FOUT)
4. State updates that add/remove elements

Prevention:

• Always specify width/height on <Image> (Next.js)
• Reserve space with CSS aspect-ratio and skeleton loaders
• Use font-display: optional or next/font
• Avoid inserting content above existing content

The Observer pattern defines a one-to-many dependency — when a subject changes, all dependents are notified. In React:

• Zustand uses observers — selectors subscribe to store changes
• useSyncExternalStore implements the observer pattern for external stores
• Event emitters combined with useEffect can create component-to-component communication

Custom hook implementation:

Content layer (or the 'content-as-data' pattern) treats content (MDX, markdown) as typed data:

1. Content files are typed and validated at build time
2. Content is queryable like a database
3. No build step required for content updates (hot reload)

Libraries: contentlayer, velite, @next/mdx, custom RSC-based solutions. In 2026, Velite is the modern alternative to Contentlayer.

Without keys: React reconciles by position — if item 0 becomes item 1 (after prepend), React treats it as item 0 changed and item 1 is new. Every item after the change position re-renders.

With keys: React compares by key identity — moved items retain their DOM nodes and state. Only genuinely added/removed items cause DOM changes.

The index-as-key trap: Stable indexes with filtered/sorted lists mislead React — a deleted item shifts all keys, causing all subsequent items to 'change'.

StrictMode's double-invocation simulates concurrent mode's behavior where:

• Render phase can be interrupted and restarted
• Setup/cleanup cycles may repeat

This exposes bugs in effects and state initializers that rely on running only once. The double-invocation:

• Calls render functions twice
• Calls useState initializers twice
• Calls useReducer functions twice
• Calls useEffect setup and cleanup twice (after React 18)

Effects that aren't properly cleaned up break visibly in StrictMode.

React maintains two Fiber trees: current (what's on screen) and workInProgress (what's being built). This is double-buffering:

1. Current tree has committed state
2. React builds workInProgress tree (render phase)
3. On commit: workInProgress becomes current
4. Old current becomes the template for next workInProgress

This enables:

• Interrupting partial renders (discard workInProgress, start fresh)
• Showing current state while computing new state
• Suspense fallbacks while resolving promises

Modern browsers support passive event listeners (e.g., for touchstart, touchmove, wheel) that tell the browser 'I won't call preventDefault()' — allowing the browser to start scrolling immediately without waiting for the handler to run.

React 17 made all event listeners that support it passive by default, dramatically improving scroll performance. The trade-off: you can't call e.preventDefault() on these events. If you need to prevent default, you must use { passive: false } in native DOM listeners.

React's scheduler uses MessageChannel (or setTimeout as fallback) to yield control back to the browser between tasks:

// Simplified scheduler
const { port1, port2 } = new MessageChannel();
port1.onmessage = performWorkUntilDeadline; // Process Fiber work

function scheduleWork() {
  port2.postMessage(null); // Schedule work for next task
}

MessageChannel fires after the current JavaScript task but before the next browser paint — giving React a chance to work between frames without blocking input.

PPR (Partial Prerendering) combines static and dynamic rendering in a single request:

1. Static shell (layout, navigation) — generated at build time, served from CDN immediately
2. Dynamic holes (user-specific data) — streamed in after the initial shell

Declare dynamic regions with <Suspense>:

export const experimental_ppr = true;

async function Page() {
  return (
    <>
      <StaticHero />         {/* Pre-rendered */}
      <Suspense fallback={<Skeleton />}>
        <DynamicPersonalization /> {/* Streamed */}
      </Suspense>
    </>
  );
}

Custom renderers use react-reconciler to connect React's VDOM to any host environment:

import { createReconciler } from 'react-reconciler';

const reconciler = createReconciler({
  // Define how to create and update 'instance' objects in your environment
  createInstance(type, props) { /* Create your native element */ },
  appendChild(parent, child) { /* Attach child to parent */ },
  commitUpdate(instance, type, newProps) { /* Update element */ },
  // ...20+ more methods
});

Examples: react-three-fiber (Three.js), ink (terminal UI), react-pdf, react-native.

StrictMode: The production render behavior is unchanged. StrictMode double-invokes functions to detect side effects — render, state initializer, reducer, callbacks.

Concurrent mode: Changes WHEN rendering happens — not how functions run. Updates can be:

• Interrupted: React starts rendering then pauses for higher-priority work
• Abandoned: React discards incomplete renders and restarts
• Batched: Multiple updates merge into one render

They interact: StrictMode helps catch bugs that surface under concurrent rendering.

Next.js uses renderToPipeableStream (not renderToString) for streaming:

1. Server calls renderToPipeableStream — returns a readable stream
2. The shell (non-Suspense content) is flushed immediately as HTML
3. For each Suspense boundary, when the Promise resolves, React generates a <script> that inserts the content and removes the fallback
4. Browser progressively renders content as chunks arrive

Key advantage: Users see content faster — they don't wait for ALL data to be fetched before seeing ANYTHING.

In RSC, Server Components own the content they pass to Client Components. If a Server Component passes JSX as children to a Client Component, that JSX remains a Server Component — it's not converted to client:

// ✅ Children from Server Component stay as Server Component!
function Page() { // Server Component
  return (
    <ClientWrapper>       ← Client Component
      <ServerContent />   ← Still a Server Component! React renders on server.
    </ClientWrapper>
  );
}

This is how you 'escape' the client boundary — composition allows server JSX to live inside client boundaries by passing it as children props.

Need to use useSyncExternalStore for concurrent mode safety — regular effect-based subscriptions can cause tearing.

Each Fiber node has a tag field identifying its type, which determines how it's processed:

• FunctionComponent = 0 — calls the function
• ClassComponent = 1 — calls render method
• HostRoot = 3 — the root container
• HostComponent = 5 — native DOM elements
• SuspenseComponent = 13 — handles Promise throwing
• ContextProvider = 10 — provides context values

The reconciler switches on tag to determine which path to take — each type has different create/update/delete logic.

Effect cleanup and setup order during re-renders:

1. Render phase: All component functions run (no effects)
2. Layout effects cleanup: All previous useLayoutEffect cleanups run
3. Layout effects setup: New useLayoutEffect setups run
4. Browser paints
5. Passive effects cleanup: Previous useEffect cleanups run
6. Passive effects setup: New useEffect setups run

For unmount: Layout effects then passive effects, both cleanup only.

For mount: Only setup (no previous state to clean up).

Route-based code splitting with React.lazy + Suspense is the standard approach. But React Router 6.9+ also supports lazy routes directly: