Usare le transition in React

React normalmente tratta tutti gli aggiornamenti di stato come urgenti; ad esempio:

• se digiti in un campo di input di ricerca, il nuovo valore deve apparire subito

• se clicchi un bottone, il feedback deve essere immediato.

Ma a volte, un aggiornamento può essere pesante o meno prioritario:

• filtrare una lista di 10.000 elementi,

• fare un re-render di un grafico complesso,

• aggiornare un pannello secondario della UI.

In questi casi, se React desse la stessa priorità a tutto, si rischierebbe di avere lag nell’interazione (input che si blocca, UI che scatta).

In React 18 sono stati introdotti startTransition e useTransition per ovviare.

In pratica startTransition dice a React: “questo aggiornamento non è urgente, puoi metterlo in background”.

useTransition ha anche un flag isPending per sapere se quell’aggiornamento è ancora in corso, così puoi mostrare un loader o un messaggio "sto caricando...".

In React 19 è stato fatto qualche miglioramento, con queste differenze:

• React 18: transizioni solo manuali → devi dire a React cosa non è urgente

• React 19: transizioni manuali ancora possibili, ma in più ci sono transizioni automatiche (soprattutto in combinazione con nuove feature come form actions, routing, suspense, use)

Qui sotto un esempio per la versione 19:

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

function App() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<string[]>([]);
  const [isPending, startTransition] = useTransition();

  const bigList = Array.from({length: 5000}, (_, i) => `Elemento ${i + 1}`);

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

    startTransition(() => {
      const filtered = bigList.filter((item) =>
          item.toLowerCase().includes(value.toLowerCase())
      );
      
      setResults(filtered);
    });
  }

  return (
      <>
        <input value={query} onChange={handleChange}/>
        {isPending && <p>Sto caricando…</p>}
      </>
  );
}

export default App;

Enjoy!