Q228: Explain concurrent rendering with an example - React & Modern Frontend (445 Qs)

Concurrent rendering in React 18 lets React prepare UI updates in a non-blocking way. This means React can pause low-priority rendering work, handle urgent updates first (like typing or clicking), and then continue rendering.

Example: Search input stays responsive while filtering a large list

jsx

import { useMemo, useState, useTransition } from "react";

const items = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

export default function SearchList() {
const [query, setQuery] = useState("");
const [filter, setFilter] = useState("");
const [isPending, startTransition] = useTransition();

function handleChange(e) {
  const value = e.target.value;
  setQuery(value); // urgent: keep input in sync

  // non-urgent: expensive list filtering can be interrupted
  startTransition(() => {
    setFilter(value);
  });
}

const filteredItems = useMemo(
  () => items.filter((item) => item.toLowerCase().includes(filter.toLowerCase())),
  [filter]
);

return (
  <div>
    <input value={query} onChange={handleChange} placeholder="Type to filter" />
    {isPending && <p>Updating results...</p>}
    <ul>
      {filteredItems.slice(0, 200).map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  </div>
);
}

In this example, typing remains smooth because React prioritizes updating the input first, while list filtering is treated as interruptible background work.