React Academy · Lezione

L'hook use() per le risorse asincrone

Legga promise e context durante il render con l'hook use() in React 19.

L'hook use() per le risorse asincrone è 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 utilizzerà l'hook use() di React 19 per leggere Promise e valori di context direttamente all'interno della funzione di rendering, semplificando l'accesso asincrono ai dati.

Che cos'è use()?

use() è un hook di React 19 che legge una risorsa, ossia una Promise o un Context, in modo sincrono all'interno della funzione di rendering. Se la Promise è in sospeso, il componente viene sospeso e il confine Suspense più vicino mostra il proprio fallback.

import { use } from 'react';

function UserProfile({ userPromise }) {
  const user = use(userPromise); // suspends if pending
  return <h1>{user.name}</h1>;
}

Passaggio di Promise come props

Un pattern comune in React 19 è il seguente: il Server Component crea una Promise (ad esempio per una query al database), la passa a un Client Component e il Client Component la legge con use(). Il confine Suspense può trovarsi in qualsiasi punto al di sopra.

// Server Component
export default function Page() {
  const userPromise = fetchUser(1); // NOT awaited
  return (
    <Suspense fallback={<Spinner />}>
      <Profile userPromise={userPromise} />
    </Suspense>
  );
}

// Client Component
'use client';
export function Profile({ userPromise }) {
  const user = use(userPromise);
  return <p>{user.name}</p>;
}

use() e useEffect per i dati

Il recupero dei dati con useEffect richiede la gestione manuale dello stato di caricamento e degli errori. use() con Suspense elimina tutto questo codice ripetitivo: il corpo del componente legge semplicemente i dati come se fossero sincroni.

use() per il Context

use() può anche leggere i valori del context, proprio come useContext. La differenza è che use() può essere chiamato in modo condizionale (all'interno di if o cicli), a differenza di useContext, che deve seguire le Rules of Hooks.

import { use } from 'react';
import { ThemeContext } from './ThemeContext';

function Button({ danger }) {
  if (danger) {
    const theme = use(ThemeContext); // conditional — allowed with use()!
    return <button style={{ color: theme.red }}>Delete</button>;
  }
  return <button>Click</button>;
}

Gestione degli errori con ErrorBoundary

Se la Promise passata a use() viene rifiutata, React genera l'errore. Avvolga il componente in un ErrorBoundary per intercettarlo e visualizzare un fallback.

<ErrorBoundary fallback={<Error />}>
  <Suspense fallback={<Loading />}>
    <Profile userPromise={fetchUser(id)} />
  </Suspense>
</ErrorBoundary>

use() solo nei Client Components

use() con una Promise funziona nei Client Components. Nei Server Components utilizzi direttamente async/await: sul server non è necessario usare use() con le Promise.

Caching delle Promise

Se un componente esegue nuovamente il rendering, deve ricevere lo stesso riferimento alla Promise per evitare un nuovo recupero dei dati. Crei le Promise al di fuori del componente o in una posizione stabile (server, cache o stato) e le passi come props.

Streaming con use()

La combinazione di use() con l'SSR in streaming consente a React di inviare progressivamente l'HTML della pagina, mostrare il fallback di Suspense e poi inviare il contenuto risolto quando la Promise viene risolta, il tutto in un'unica connessione HTTP.

React.cache() per la deduplicazione

Sul server, React.cache() (o unstable_cache di Next.js) elimina le chiamate duplicate alla stessa funzione asincrona durante un singolo rendering, quindi il database viene interrogato una sola volta anche se più componenti utilizzano la stessa promise.

Verifica rapida

Che cosa fa un Client Component quando viene chiamato use(promise) e la promise è ancora in sospeso?

Riepilogo

use(promise) legge i dati asincroni in modo sincrono durante il rendering e sospende il rendering se la promise è ancora in sospeso. use(context) funziona anche in modo condizionale, a differenza di useContext. Lo si abbini sempre a Suspense per il caricamento e a ErrorBoundary per gli errori.

Prossimo argomento

Prossima lezione: **React Actions & useActionState** — definirà azioni server e client e gestirà l'invio dei moduli con lo stato di attesa.

Domande Frequenti

La lezione «L'hook use() per le risorse asincrone» è gratuita?

Sì — il testo completo di «L'hook use() per le risorse asincrone» è 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 «L'hook use() per le risorse asincrone»?

Legga promise e context durante il render con l'hook use() in React 19. 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 «L'hook use() per le risorse asincrone»?

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

← Torna a React Academy