Explain concurrent rendering with an example

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

     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.