React Academy · Lezione

useTransition per aggiornamenti UI non bloccanti

Racchiuda gli aggiornamenti di stato costosi in startTransition, così l'interfaccia rimane reattiva.

Lezione 2 di 413 passaggi

useTransition per aggiornamenti UI non bloccanti è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione userà l'hook useTransition per contrassegnare come non urgenti gli aggiornamenti di stato costosi, mantenendo reattiva l'interfaccia mentre il rendering pesante avviene in background.

Il problema degli aggiornamenti bloccanti

Quando digita in una casella di ricerca che filtra un elenco ampio, React deve eseguire nuovamente il rendering dell'intero elenco filtrato a ogni pressione di un tasto. Questo impedisce l'aggiornamento immediato dell'input e rende l'interfaccia poco reattiva.

Modalità concorrente di React

React 18 ha introdotto il rendering concorrente: React può iniziare a eseguire il rendering di un aggiornamento di stato, metterlo in pausa e dare priorità agli aggiornamenti più urgenti, come la digitazione. useTransition è l'hook che consente di classificare gli aggiornamenti come transizioni a bassa priorità.

Nozioni di base su useTransition

useTransition restituisce `[isPending, startTransition]`. Racchiuda l'aggiornamento di stato non urgente in `startTransition()`. React darà priorità agli altri aggiornamenti, come quelli di un input controllato, rispetto alla transizione.

const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
  setInputValue(e.target.value); // urgent: update input immediately
  startTransition(() => {
    setFilteredList(filter(e.target.value)); // non-urgent
  });
};

isPending per l'interfaccia di caricamento

Mentre la transizione è in corso, `isPending` vale `true`. Lo utilizzi per mostrare uno spinner di caricamento o attenuare la lista dei risultati obsoleti, fornendo agli utenti un'indicazione che l'aggiornamento è in corso.

return (
  <>
    <input value={inputValue} onChange={handleChange} />
    {isPending && <Spinner />}
    <ResultList items={filteredList} />
  </>
);

Cosa inserire in startTransition

Inserisca in startTransition solo gli aggiornamenti di stato, non le operazioni asincrone. Deve racchiudere l'aggiornamento dello stato che attiva il rendering costoso.

// Correct
startTransition(() => setTab('heavy'));

// Wrong — async work outside React state
startTransition(async () => { await fetch(...); }); // not supported

startTransition senza l'hook

Se non ha bisogno di `isPending`, può importare e chiamare direttamente `startTransition` da React, senza usare l'hook.

import { startTransition } from 'react';

startTransition(() => setQuery(newValue));

Esempio di cambio scheda

Un caso d'uso comune consiste nel fare clic su una scheda per cambiare un componente pesante. Racchiuda il cambio di scheda in startTransition, così l'indicatore della scheda attiva si aggiornerà immediatamente mentre il componente pesante viene renderizzato in background.

const [tab, setTab] = useState('posts');
const [isPending, startTransition] = useTransition();

const selectTab = (t) =>
  startTransition(() => setTab(t));

useTransition e useDeferredValue a confronto

Utilizzi useTransition quando gestisce direttamente l'aggiornamento di stato, cioè quando chiama setState. Utilizzi useDeferredValue quando riceve una prop o un valore che non può ritardare direttamente: rimanda il valore stesso.

Non sostituisce l'ottimizzazione

startTransition non rende più veloce il rendering: lo rimanda soltanto. Se un componente impiega 500 ms per essere renderizzato, continuerà a impiegare 500 ms. Lo combini con React.memo o con la virtualizzazione per gli elenchi realmente lenti.

Verifica rapida

Che cosa rappresenta isPending restituito da useTransition?

Rispondi nella lezione interattiva

Riepilogo

useTransition consente di classificare gli aggiornamenti di stato come transizioni non urgenti. Gli aggiornamenti urgenti, come quelli degli input, vengono renderizzati immediatamente; le transizioni vengono renderizzate quando React ha risorse disponibili. Utilizzi isPending per mostrare un feedback di caricamento.

Prossima lezione

Prossima lezione: **useDeferredValue per il debounce dell'input**: ritarderà il rendering delle parti lente dell'interfaccia mantenendo l'input reattivo.

Gratis per iniziare

Impara React con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 88
Lezioni: 324

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «useTransition per aggiornamenti UI non bloccanti» è gratuita?

Sì — il testo completo di «useTransition per aggiornamenti UI non bloccanti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «useTransition per aggiornamenti UI non bloccanti»?

Racchiuda gli aggiornamenti di stato costosi in startTransition, così l'interfaccia rimane reattiva. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «useTransition per aggiornamenti UI non bloccanti»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Race condition e pulizia degli effect
useTransition per aggiornamenti UI non bloccanti
useDeferredValue per il debounce degli input
Suspense per i confini di dati e codice

← Torna a React Academy