render phase  ->  commit phase

calculate what the UI should look like
call components
produce a tree description
must be pure
can be interrupted/discarded

apply changes to the host environment
update DOM
attach refs
run layout effects
then browser paints
then passive effects run

Render may happen without commit.
Commit happens only for the winning render.

User types into input.
Input text update is urgent.
Large filtered result list update is non-urgent.
React should keep typing responsive while preparing the list in the background.

input update + expensive list render block together

input update commits urgently
list update renders as interruptible background work

const [isPending, startTransition] = useTransition();

function handleSearchChange(nextText: string) {
  setInputText(nextText); // urgent

  startTransition(() => {
    setSearchQuery(nextText); // non-urgent
  });
}

The value controlled by an input should update urgently.
The expensive UI derived from that value may update in a transition.

startTransition(() => {
  setInputText(event.target.value);
});

setInputText(nextText);
startTransition(() => setFilter(nextText));

Concurrent React means two versions of the DOM update at the same time.

function InvoiceRow({ invoice }: { invoice: Invoice }) {
  analytics.track('invoice_row_rendered', { id: invoice.id });
  return <tr>{invoice.number}</tr>;
}

function InvoiceRow({ invoice }: { invoice: Invoice }) {
  useEffect(() => {
    analytics.track('invoice_row_visible', { id: invoice.id });
  }, [invoice.id]);

  return <tr>{invoice.number}</tr>;
}

function Total({ items }: { items: Item[] }) {
  const total = items.reduce((sum, item) => sum + item.price, 0);
  return <span>{formatCurrency(total)}</span>;
}

const renderedIds: string[] = [];

function Row({ item }: { item: Item }) {
  renderedIds.push(item.id);
  return <div>{item.name}</div>;
}

React may call Row during a render that is later discarded.
React may call Row again.
Strict Mode may double invoke in development to expose impurities.
The global array now contains entries that do not correspond to committed UI.

If it changes something outside the component's returned JSX, it probably does not belong in render.

pure calculations
object/array mapping without mutation of inputs
creating JSX
reading props/state/context
throwing Promise/Error for supported Suspense/Error Boundary mechanisms

network request side effect
analytics side effect
global mutation
DOM mutation
subscription
setTimeout
imperative store write
random id used as stable identity
Date.now used as persistent UI fact

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  }

  return <button onClick={handleClick}>{count}</button>;
}

setCount((current) => current + 1);
setCount((current) => current + 1);
setCount((current) => current + 1);

If the next value depends on the previous value, use an updater function or reducer event.

Older background work can be abandoned.
The user should see the latest committed consistent UI.

const [isPending, startTransition] = useTransition();

function CaseSearchPage() {
  const [input, setInput] = useState('');
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    const next = event.target.value;

    setInput(next);

    startTransition(() => {
      setQuery(next);
    });
  }

  return (
    <section>
      <input value={input} onChange={handleChange} />
      {isPending ? <span>Updating results...</span> : null}
      <CaseResults query={query} />
    </section>
  );
}

virtualization
server-side search
memoized selectors
pagination
debounce for network pressure
web worker for CPU-heavy work

Transitions improve scheduling. They do not replace architecture.

import { startTransition } from 'react';

function externalStoreListener(nextState: StoreState) {
  startTransition(() => {
    store.setReactVisibleState(nextState);
  });
}

Urgent updates should stay urgent.
Non-urgent visual preparation can be transitional.

const deferredQuery = useDeferredValue(query);

<SearchInput value={query} onChange={setQuery} />
<CaseResults query={deferredQuery} />

const deferredQuery = useDeferredValue(query);
const isStale = query !== deferredQuery;

return (
  <div style={{ opacity: isStale ? 0.6 : 1 }}>
    <CaseResults query={deferredQuery} />
  </div>
);

If this subtree cannot complete rendering yet, show this fallback while React waits for supported async work.

<Suspense fallback={<CaseDetailSkeleton />}>
  <CaseDetail caseId={caseId} />
</Suspense>

<Suspense fallback={<FullPageSpinner />}>
  <EntireApplication />
</Suspense>

<PageShell>
  <CaseHeader caseId={caseId} />

  <Suspense fallback={<CaseTimelineSkeleton />}>
    <CaseTimeline caseId={caseId} />
  </Suspense>

  <Suspense fallback={<RelatedCasesSkeleton />}>
    <RelatedCases caseId={caseId} />
  </Suspense>
</PageShell>

startTransition(() => {
  setSelectedTab('history');
});

Suspense boundary design is loading architecture.

const [isPending, startTransition] = useTransition();

function handleSubmit() {
  startTransition(async () => {
    await saveCaseDraft();
    setMode('review');
  });
}

idempotency for duplicate command risk
error taxonomy
conflict handling
cache invalidation
permission enforcement
rollback/reconciliation for optimistic UI

React Actions improve UI orchestration. They do not define your domain command semantics.

render winning tree
commit DOM
run cleanup for changed old effects
run setup for new effects

useEffect(() => {
  const connection = createConnection(roomId);
  connection.connect();

  return () => {
    connection.disconnect();
  };
}, [roomId]);

For committed UI with roomId X, synchronize connection to X.
When committed roomId changes or component unmounts, disconnect previous X.

useEffect(() => {
  const connection = createConnection(roomId);
  connection.connect();
  return () => connection.disconnect();
}, []);

const connection = createConnection(roomId);
connection.connect();

Effects synchronize committed UI with external systems. They are not render calculations and not event handlers.

useLayoutEffect(() => {
  const rect = ref.current!.getBoundingClientRect();
  setPosition(computeTooltipPosition(rect));
}, []);

large layout effect blocks visible update
layout effect sets state repeatedly
measuring many rows individually
forced synchronous layout thrashing
using layout effect for work that can happen after paint

Concurrent rendering helps before commit. A heavy layout effect can still block the user at commit time.

function useStoreValue() {
  const [value, setValue] = useState(store.getState());

  useEffect(() => {
    return store.subscribe(() => setValue(store.getState()));
  }, []);

  return value;
}

function useStoreValue() {
  return useSyncExternalStore(
    store.subscribe,
    store.getSnapshot,
    store.getServerSnapshot,
  );
}

getSnapshot must return the same value if the store has not changed.

getSnapshot() {
  return { ...state };
}

let currentSnapshot = state;

function setState(next: State) {
  currentSnapshot = next;
  listeners.forEach((listener) => listener());
}

function getSnapshot() {
  return currentSnapshot;
}

Concurrent-safe external stores are snapshot systems, not random mutable globals.

side effect in render
missing cleanup
non-idempotent setup
mutating props
unstable ref initialization
subscription leak
reducer impurity

useEffect(() => {
  eventBus.subscribe('case.changed', handler);
}, []);

useEffect(() => {
  return eventBus.subscribe('case.changed', handler);
}, [handler]);

If Strict Mode exposes a duplicated effect, the fix is usually cleanup/idempotency, not disabling Strict Mode.

function CaseResults({ cases }: { cases: Case[] }) {
  const scored = expensiveScoreAndSort(cases);
  return <Rows cases={scored} />;
}

server-side sorting/filtering
pagination
virtualization
memoized selector keyed by stable inputs
web worker
precomputed read model
transition/deferred rendering

Scheduling is not a substitute for reducing work.

same component type + same position/key = state preserved
changed type/key/position = state reset

<CaseEditor key={Math.random()} caseId={caseId} />

<CaseEditor key={caseId} caseId={caseId} />

Keys are identity contracts. Under concurrent rendering, identity bugs become UX continuity bugs.

input value
cursor position
focus
composition text
checkbox checked state

large validation summary
search preview
derived expensive recommendation panel
autosave indicator
next-step preview

function CaseForm() {
  const [draft, setDraft] = useState(initialDraft);
  const deferredDraft = useDeferredValue(draft);

  return (
    <>
      <CaseFields value={draft} onChange={setDraft} />
      <ExpensiveRiskPreview draft={deferredDraft} />
    </>
  );
}

User input ownership stays urgent. Expensive projections from that input may lag.

cache subscription
Suspense support
transition-aware navigation
background refetch
stale data retention
optimistic updates

input changes now
old results remain visible
new results load in background
stale indicator shows transition
new results replace when ready

<Suspense fallback={<FullScreenSpinner />}>
  <SearchPage />
</Suspense>

<SearchShell>
  <SearchControls />
  <Suspense fallback={<ResultsSkeleton />}>
    <Results />
  </Suspense>
</SearchShell>

Concurrent UX is built from cache policy + boundary placement + transition semantics.

typing blocked by huge result render
checkbox click blocked by dashboard recomputation
modal close blocked by analytics calculation
route transition blocked by unnecessary global provider rerender

Which update is urgent?
Which update is visual but non-urgent?
Which subtree rerenders because of context/store fan-out?
Can expensive work be deferred, memoized, virtualized, or moved server-side?

1. Remove unnecessary state/effects.
2. Narrow state ownership.
3. Split context/provider boundaries.
4. Add selectors for external store subscriptions.
5. Memoize expensive pure selectors.
6. Virtualize large DOM.
7. Use transition/deferred value for non-urgent rendering.
8. Move CPU-heavy work to worker/server.

function A() {
  return <div>{externalStore.state.count}</div>;
}

function B() {
  return <div>{externalStore.state.count}</div>;
}

const count = useSyncExternalStore(
  externalStore.subscribe,
  externalStore.getSnapshot,
).count;

Concurrent rendering requires reads to be snapshot-consistent.

Is this urgent?
Can it be transitioned?
Is it async data that belongs to cache/Suspense?
Is it an external synchronization that belongs in an effect?
Will render remain pure if React discards it?

[ ] Component render is pure.
[ ] No external mutation during render.
[ ] No network/subscription/timer starts during render.
[ ] Random/time values are not used as stable identity in render.
[ ] State updates depending on previous state use updater/reducer.
[ ] Controlled input value updates are urgent.
[ ] Expensive result updates are transition/deferred where useful.
[ ] Pending/stale UI state is visible when domain requires it.
[ ] Suspense boundaries match user-perceived loading units.
[ ] Error boundaries pair with async/Suspense regions.
[ ] Layout effects are small and necessary.
[ ] External stores use `useSyncExternalStore` or a library with equivalent contract.
[ ] Snapshot values are stable when underlying store data has not changed.
[ ] Context updates do not fan out high-frequency global rerenders.
[ ] Strict Mode warnings/duplicates are treated as signals, not ignored.

function SearchPage() {
  const [query, setQuery] = useState('');
  const results = expensiveSearch(query);

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <Results results={results} />
    </>
  );
}

useDeferredValue(query)
useMemo for expensive pure calculation if inputs are stable
server-side search if dataset is too large
virtualization if result DOM is large

function AuditPanel({ caseId }: { caseId: string }) {
  auditBus.publish('panel.rendered', { caseId });
  const now = Date.now();
  const id = Math.random();

  return <section id={`audit-${id}`}>Rendered at {now}</section>;
}

analytics belongs in effect or visibility observer
stable id belongs in useId or data identity
current time belongs in state/effect if it changes over time

<Suspense fallback={<FullPageSpinner />}>
  <CasePage />
</Suspense>

case header
case timeline
related cases
audit trail
comment editor

Render is pure calculation.
Commit is the only visible host mutation.
Effects synchronize committed UI with external systems.
Urgent updates protect direct manipulation.
Transitions make non-urgent visual work interruptible.
Deferred values let expensive children lag behind urgent input.
Suspense boundaries define loading architecture.
External stores must provide stable snapshots.
Server-state caches must coordinate freshness and identity.

This update is urgent.
That update is non-urgent.
This subtree may suspend.
This fallback preserves user orientation.
This external store read is snapshot-safe.
This render can be thrown away without consequence.