React 18 Concurrency: Transitions, Interruptible Rendering, and Why INP Improves

What you’ll learn

• What “concurrent rendering” actually means (practically)
• Urgent vs non-urgent updates
• useTransition and why it helps typing feel responsive
• The connection to INP (Interaction to Next Paint)

The mental model: priority lanes

React 18 can schedule work with different priorities.

• Urgent updates: typing, clicking, direct feedback
• Non-urgent updates: rendering a huge filtered list, loading extra details

If expensive work blocks urgent feedback, the UI feels laggy → INP suffers.

Example: keep typing responsive with useTransition

import { useMemo, useState, useTransition } from 'react';
 
export function SearchList({ items }: { items: string[] }) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  const [deferredQuery, setDeferredQuery] = useState('');
 
  const filtered = useMemo(() => {
    // pretend this is expensive
    return items.filter((x) => x.toLowerCase().includes(deferredQuery.toLowerCase()));
  }, [items, deferredQuery]);
 
  return (
    <div>
      <input
        value={query}
        onChange={(e) => {
          const next = e.target.value;
          setQuery(next); // urgent
          startTransition(() => {
            setDeferredQuery(next); // non-urgent
          });
        }}
      />
      {isPending ? <div>Updating…</div> : null}
      <ul>
        {filtered.map((x) => (
          <li key={x}>{x}</li>
        ))}
      </ul>
    </div>
  );
}

What this does:

• The input stays responsive (urgent update)
• The expensive list update can be interrupted

Interview questions

Q1) What’s a transition?

30-second answer: A transition marks updates as non-urgent so React prioritizes urgent user feedback and can interrupt/restart rendering.

Q2) How does this relate to INP?

30-second answer: INP is about interaction responsiveness. If your main thread is busy rendering expensive updates, clicks/typing feel delayed. Transitions reduce that contention.

Quick recap

• Concurrency is about scheduling priorities
• useTransition helps keep interactions responsive
• Use it when expensive UI updates block input