Prima dell'introduzione della concorrenza in React, il processo di rendering era sincrono e bloccava il thread principale del browser fino al suo completamento. Ciò significava che se un componente impiegava molto tempo per il rendering, l'interfaccia utente non rispondeva e l'utente riscontrava un'applicazione ritardata o bloccata.

Per evitare questo problema, gli sviluppatori spesso suddividevano le loro applicazioni in componenti più piccoli e ne eseguivano il rendering in modo asincrono. Ciò ha richiesto molto lavoro manuale e potrebbe essere difficile coordinare il rendering di più componenti in modo asincrono.

Inoltre, la gestione del recupero e del rendering dei dati in React potrebbe essere complessa e richiedere molto codice boilerplate. Gli sviluppatori spesso utilizzavano librerie esterne come Redux o MobX per gestire lo stato dell'applicazione e gestire il recupero dei dati.

Concorrenza in React

La concorrenza è la capacità di un sistema informatico di gestire più attività o processi contemporaneamente. In React, la concorrenza si ottiene attraverso una funzionalità chiamata "React Concurrent Mode", introdotta in React 18.

La modalità simultanea di React consente a React di stabilire la priorità di quali componenti devono essere visualizzati per primi, in base alla loro importanza per l'esperienza dell'utente. Ciò consente di evitare ritardi nel rendering e migliora le prestazioni complessive dell'applicazione.

useTransition

L' useTransitionhook è una nuova aggiunta alla libreria React che consente di creare transizioni fluide durante l'aggiornamento dello stato di un componente. Avvolge un aggiornamento di stato in una transizione, che dice a React che l'aggiornamento è "in sospeso" e non dovrebbe essere inviato immediatamente al DOM. Al contrario, React può dare la priorità ad altri aggiornamenti o eseguire prima il rendering di parti dell'interfaccia utente con priorità più alta, prima di eseguire il commit dell'aggiornamento in sospeso.

import { useTransition } from 'react';

function App() {
  const [isLoading, setIsLoading] = useState(false);

  const [startTransition, isPending] = useTransition({
    timeoutMs: 2000,
  });

  function handleClick() {
    startTransition(() => {
      setIsLoading(true);
    });
    // make an API call or do some other async task
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      {isPending && <div>Loading...</div>}
      {!isPending && <div>{/* Display data */}</div>}
    </div>
  );
}

useDeferredValue

L' useDeferredValuehook è un'altra nuova aggiunta alla libreria React che ti consente di differire il valore di un oggetto di scena fino al fotogramma successivo, il che può aiutare a ridurre la quantità di lavoro svolto durante il rendering.

import { useDeferredValue } from 'react';

function MyComponent({ value }) {
  const deferredValue = useDeferredValue(value);

  return (
    <div>
      {/* render with the deferred value */}
      Value: {deferredValue}
    </div>
  );
}

Quando usare e quando evitare

Entrambi useTransitione useDeferredValuepossono essere strumenti utili nella cassetta degli attrezzi di sviluppo di React, ma dovrebbero essere usati in modo appropriato. Ecco alcune linee guida su quando usare e quando evitare questi ganci:

Utilizzare useTransitionquando:

• Hai una modifica di stato che richiede molto tempo per essere completata (come una chiamata API).
• Vuoi mostrare uno spinner di caricamento o altre animazioni durante il cambio di stato.
• Vuoi evitare animazioni irregolari causate da aggiornamenti di stato che si verificano troppo rapidamente.

• Non è necessario ritardare il cambio di stato.
• Il ritardo potrebbe causare un'esperienza utente scadente (ad esempio, se il ritardo è troppo lungo).

• Hai un valore che cambia frequentemente, ma non vuoi aggiornare l'interfaccia utente per ogni modifica.
• Vuoi ottimizzare il rendering rinviando gli aggiornamenti fino a quando non è trascorso un certo periodo di tempo.
• Non hai accesso diretto allo stato che potrebbe arrivare attraverso oggetti di scena.

• È necessario aggiornare immediatamente l'interfaccia utente per ogni modifica.