startTransition

startTransition(action)

• Reference
  • startTransition(action)
• Usage
  • Contrassegnare un aggiornamento di state come Transizione non bloccante

Reference

startTransition(action)

La funzione startTransition ti permette di contrassegnare un aggiornamento di state come una Transizione.

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Vedi altri esempi sotto.

Parameters

• action: Una funzione che aggiorna dello state chiamando una o più set functions. React chiama action immediatamente senza parametri e contrassegna come Transizioni tutti gli aggiornamenti di state pianificati in modo sincrono durante la chiamata alla funzione action. Qualsiasi chiamata async attesa con await in action sarà inclusa nella Transizione, ma attualmente richiede di avvolgere qualsiasi set function dopo await in un ulteriore startTransition (vedi Troubleshooting). Gli aggiornamenti di state contrassegnati come Transizioni saranno non bloccanti e non mostreranno indicatori di caricamento indesiderati.

Returns

startTransition non restituisce nulla.

Caveats

• startTransition non fornisce un modo per tracciare se una Transizione è in corso. Per mostrare un indicatore di pending mentre la Transizione è in corso, hai bisogno di useTransition al suo posto.

• Puoi avvolgere un aggiornamento in una Transizione solo se hai accesso alla set function di quello state. Se vuoi avviare una Transizione in risposta a una prop o a un valore di un custom Hook, prova useDeferredValue.

• La funzione che passi a startTransition viene chiamata immediatamente, contrassegnando come Transizioni tutti gli aggiornamenti di state che avvengono mentre viene eseguita. Se provi a eseguire aggiornamenti di state in un setTimeout, per esempio, non saranno contrassegnati come Transizioni.

• Devi avvolgere qualsiasi aggiornamento di state dopo richieste async in un altro startTransition per contrassegnarli come Transizioni. Questa è una limitazione nota che correggeremo in futuro (vedi Troubleshooting).

• Un aggiornamento di state contrassegnato come Transizione verrà interrotto da altri aggiornamenti di state. Per esempio, se aggiorni un componente grafico all’interno di una Transizione, ma poi inizi a digitare in un input mentre il grafico è nel mezzo di una ri-renderizzazione, React riavvierà il lavoro di renderizzazione sul componente grafico dopo aver gestito l’aggiornamento dell’input.

• Gli aggiornamenti Transizione non possono essere usati per controllare input di testo.

• Se ci sono più Transizioni in corso, React attualmente le raggruppa insieme. Questa è una limitazione che potrebbe essere rimossa in una release futura.

Usage

Contrassegnare un aggiornamento di state come Transizione non bloccante

Puoi contrassegnare un aggiornamento di state come una Transizione avvolgendolo in una chiamata a startTransition:

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Le Transizioni ti permettono di mantenere reattivi gli aggiornamenti dell’interfaccia utente anche su dispositivi lenti.

Con una Transizione, la tua UI resta reattiva nel mezzo di una ri-renderizzazione. Per esempio, se l’utente clicca una tab ma poi cambia idea e clicca un’altra tab, può farlo senza attendere che la prima ri-renderizzazione sia completata.