React rendering: triggers, reconciliation, memoization and transitions

HOW IT FITS TOGETHER

KEY TERMS

Render vs commit, and purity

Render calls components to produce elements; commit mutates the DOM. Because React may render without committing (an interrupted transition, a suspended tree, StrictMode), render must be pure: no mutation of props or outer variables, no subscriptions, no fetches. Side effects belong in event handlers or effects.

Reconciliation and keys

State belongs to a position in the tree. Same component type at the same position keeps state; a different type, or a different key, destroys the subtree and mounts a fresh one. In lists the key is the identity: index keys attach state to the wrong row after inserts or reorders. A changing key is also the idiomatic way to reset a component.

Batching

Since React 18 all updates queued in the same tick are batched into one render, including those in timeouts, promises and native handlers. Inside a handler state is a snapshot, so setCount(count + 1) three times adds one; use the updater form setCount(c => c + 1) when the next value depends on the previous. flushSync forces a synchronous commit and should be rare.

Memoization and the React Compiler

memo, useMemo and useCallback skip work when inputs are referentially equal; one new inline object or function as a prop defeats memo for the whole component. React Compiler 1.0 (stable since October 2025, works with React 17+) inserts this memoization automatically at build time, at finer granularity than hand-written hooks, and skips components that break the Rules of React.

Context re-renders

Every component that reads a context re-renders when the Provider's value changes by Object.is, and memo does not stop that. A value object built inline in the Provider's parent changes on every render. Split rarely and frequently changing values into separate contexts, memoize the value, or move fast-changing state into a store read with useSyncExternalStore and selectors.

StrictMode in development

StrictMode calls component bodies, state initializers, updaters, reducers and useMemo callbacks twice, and runs every effect and ref callback through an extra setup, cleanup, setup cycle on mount. It surfaces impure renders and missing cleanups. It does nothing in production builds; removing it hides the bug instead of fixing it.

Transitions and deferred values

startTransition marks updates as non-urgent: React renders them in the background, abandons the work if a newer urgent update arrives, and keeps showing the old UI (isPending is true) instead of a Suspense fallback. useDeferredValue does the same for a value you do not own, such as a prop. Neither makes a render faster; they only stop it from blocking input.

IN YOUR STACK

// Stable keys: state stays with the row, not the index.
function TodoList({ todos }: { todos: Todo[] }) {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoRow key={todo.id} todo={todo} /> // not key={index}
      ))}
    </ul>
  );
}

// Changing key = new identity: the editor remounts with fresh state
// when the user switches contacts, instead of keeping the old draft.
function Inbox({ contact }: { contact: Contact }) {
  return <DraftEditor key={contact.id} contact={contact} />;
}

// Anti-pattern: a component defined inside another is a new type on
// every render, so its state and DOM are thrown away each time.
function Form() {
  // function Field() { const [v, setV] = useState(""); ... }  // don't
  return <Field />; // declare Field at module level
}

function Cart() {
  const [count, setCount] = useState(0);
  const [saving, setSaving] = useState(false);

  async function addThree() {
    setCount((c) => c + 1); // updaters chain: 0 -> 1 -> 2 -> 3
    setCount((c) => c + 1);
    setCount((c) => c + 1);
    setSaving(true);        // still one render for all four updates

    await saveCart();
    // After an await, updates are still batched together (React 18+).
    setSaving(false);
    setCount((c) => c - 1); // read the latest value, not the stale snapshot
  }

  return (
    <button onClick={addThree} disabled={saving}>
      Items: {count}
    </button>
  );
}

// 1. Structural fix first: the state that changes often lives in a small
// component, and the expensive tree is passed in as children, so it is
// created by the parent and is the same element on every pointer move.
function Hover({ children }: { children: React.ReactNode }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return <div onPointerMove={(e) => setPos({ x: e.clientX, y: e.clientY })}>
    <Cursor pos={pos} />
    {children}
  </div>;
}

// 2. Manual memo: only useful if every prop is stable.
const Chart = memo(function Chart({ points, onSelect }: ChartProps) {
  return <svg>{/* expensive */}</svg>;
});

function Dashboard({ rows, filter }: { rows: Row[]; filter: string }) {
  const points = useMemo(() => toPoints(rows, filter), [rows, filter]);
  const onSelect = useCallback((id: string) => track("select", id), []);
  return <Chart points={points} onSelect={onSelect} />;
  // <Chart points={toPoints(rows, filter)} /> would re-render every time
}

// npm i -D @rolldown/plugin-babel   (needs @vitejs/plugin-react >= 6)
// vite.config.ts
import { defineConfig } from "vite";
import react, { reactCompilerPreset } from "@vitejs/plugin-react";
import babel from "@rolldown/plugin-babel";

export default defineConfig({
  plugins: [react(), babel({ presets: [reactCompilerPreset()] })],
});

// next.config.ts (Next.js 16+, after npm i -D babel-plugin-react-compiler)
// const nextConfig: NextConfig = { reactCompiler: true };

// Component code stays plain; the compiler caches derived values,
// callbacks and JSX between renders.
function Dashboard({ rows, filter }: { rows: Row[]; filter: string }) {
  const points = toPoints(rows, filter);
  return <Chart points={points} onSelect={(id) => track("select", id)} />;
}

function Legacy() {
  "use no memo"; // temporary opt-out while fixing a Rules of React violation
  return <Widget />;
}

// One context holding { user, theme, cursor } re-renders every consumer
// whenever the cursor moves. Split by change rate and memoize values.
const UserContext = createContext<User | null>(null);
const ThemeContext = createContext<ThemeApi | null>(null);

function Providers({ user, children }: { user: User | null; children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light");
  // Without useMemo this object is new on every render of Providers.
  const themeValue = useMemo(() => ({ theme, setTheme }), [theme]);

  return (
    <UserContext value={user}>
      <ThemeContext value={themeValue}>{children}</ThemeContext>
    </UserContext>
  );
}

// High-frequency state belongs in an external store with a selector,
// so only components whose slice changed re-render.
function useCursorX() {
  return useSyncExternalStore(cursorStore.subscribe, () => cursorStore.get().x);
}

const SlowResults = memo(function SlowResults({ query }: { query: string }) {
  return <ul>{search(query).map((r) => <li key={r.id}>{r.title}</li>)}</ul>;
});

function Search() {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query); // lags behind while typing
  const stale = query !== deferredQuery;
  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <div style={{ opacity: stale ? 0.6 : 1 }}>
        <SlowResults query={deferredQuery} />
      </div>
    </>
  );
}

function Tabs() {
  const [tab, setTab] = useState("home");
  const [isPending, startTransition] = useTransition();
  const select = (next: string) => startTransition(() => setTab(next));
  return <TabBar current={tab} pending={isPending} onSelect={select} />;
}

// main.tsx
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

// In development StrictMode runs setup -> cleanup -> setup on mount.
// Without the cleanup you would see two open connections.
function ChatRoom({ roomId }: { roomId: string }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect(); // makes the double run harmless
  }, [roomId]);

  // Bug StrictMode exposes: mutating a prop during render.
  // props.items.push(extra)   -> appears twice in development
  return <Messages roomId={roomId} />;
}

WHEN TO REACH FOR WHAT

WHERE IT BITES

• Index keys in lists that insert, delete or reorder: input text, focus and local state attach to the wrong row.
• Creating objects, arrays or arrow functions inline as props to a memoized child, or as a context value, so every render looks like a change.
• Deriving state with an effect (useEffect(() => setFull(first + last))): an extra render per change and a flash of stale UI. Compute it during render.
• Setting state unconditionally in an effect whose dependencies include that state or a new object each render, producing a render loop.
• Disabling StrictMode because effects run twice instead of adding cleanup, which leaves the leak in production paths like remounts and route changes.
• Wrapping everything in memo and useCallback without profiling; the comparisons and dependency arrays cost more than the renders they skip, and wrong deps create stale closures.

WHEN IT BREAKS IN PRODUCTION

• A component re-renders forever or an effect never stops firing
• A handler or timer keeps reading old state
• Clicks and typing feel laggy
• A long list loads and scrolls slowly
• The app gets slower the longer the tab stays open
• Search results show an older query's results
• An object changes somewhere you never touched

SOURCES

• React: Render and Commit (opens in new tab)Checked 2026-11-06
• React: Preserving and Resetting State (opens in new tab)Checked 2026-11-06
• React: memo (opens in new tab)Checked 2026-11-06
• React Compiler v1.0 (opens in new tab)Checked 2026-11-06
• React: useTransition (opens in new tab)Checked 2026-11-06
• React: StrictMode (opens in new tab)Checked 2026-11-06