loringabriel/react-18-concurency-first-look

React v18 concurency-first-look

Simple example inspired by @mschwarzmueller with the new useTransition hook.

It uses the new concurrent rendering which allows the user to continue interacting with the page while rendering the update. View docs

function App() {
  const [isPending, startTransition] = useTransition();

  const [filterTerm, setFilterTerm] = useState("");
  const [data, setData] = useState(filterProducts());

  function updateFilterHandler(value) {
    const { value } = e.target;
    if (concurentMode) {
      startTransition(() => {
        setData(filterProducts(value)); //expensive update
      });
    } else {
      setData(filterProducts(value)); //expensive update
    }
    setFilterTerm(value); //urgent update
  }

  return (
    <div id="app">
      <ConcurrentModeToggle
        concurentMode={concurentMode}
        setConcurentMode={setConcurentMode}
      />

      <input
        value={filterTerm}
        className="search"
        type="text"
        onChange={updateFilterHandler}
      />
      <button onClick={updateFilterHandler}>Reset</button>

      <div className="label">{isPending && "Updating..."}</div>

      <ProductList products={data} isPending={isPending} />
    </div>
  );
}