React 19: la nuova API "use"

Vasco: Ciao a tutti! Oggi, insieme a Mario, vogliamo parlarvi di un'altra grande novità introdotta in React 19: il nuovo hook use. Questo hook è stato progettato per semplificare ulteriormente la gestione delle promesse e dei dati asincroni nei vostri componenti React.

Mario: Esatto, Vasco. Chiunque abbia lavorato con richieste API o altre operazioni asincrone in React sa che la gestione dello stato di caricamento, degli errori e dei dati può diventare rapidamente complessa. Il nuovo hook use mira a risolvere proprio questo problema.

Cos'è il nuovo hook use?

Vasco: Il hook use consente ai componenti React di leggere direttamente una promessa o una risorsa asincrona e sospendere l'esecuzione fino a quando la risorsa non è pronta. In pratica, React si occupa automaticamente della gestione dello stato di caricamento e degli errori, senza bisogno di codice aggiuntivo.

Mario: È particolarmente utile se già usate la funzionalità di Suspense introdotta nelle versioni precedenti di React. Con use, la gestione asincrona è perfettamente integrata nel flusso di rendering dei vostri componenti.

Perché use è rivoluzionario?

Vasco: Prima di use, gestire i dati asincroni richiedeva spesso una combinazione di useEffect, useState e un sacco di logica per gestire i casi di errore o stato di caricamento. Con use, tutto questo viene condensato in un'implementazione più pulita e dichiarativa.

Mario: Immaginate di voler recuperare dei dati da un'API. Con use, potete farlo con una sintassi semplicissima:

import { use } from 'react';
    
async function fetchUser(userId) {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) {
     throw new Error('Errore durante il caricamento dei dati');
  }
   return response.json();
  }
        
export default function UserComponent({ userId }) {
  const user = use(fetchUser(userId));
        
  return (
    <div>
      <h1>{user.name} </h1>
      <p>{user.email} </p>
    </div>
   );
}

Come funziona use?

Vasco: L'hook use prende in input una promessa. Quando il componente viene renderizzato, React sospende il rendering fino a quando la promessa non è risolta o rifiutata. Questo significa che il componente può concentrarsi esclusivamente su come visualizzare i dati, senza preoccuparsi dello stato intermedio.

Mario: Ma attenzione, per usare use è necessario che il componente sia avvolto da un componente Suspense, altrimenti React non sa come gestire la sospensione.

Esempio con Suspense

Vasco: Vediamo come avvolgere il componente UserComponent in un wrapper di Suspense:

import React, { Suspense } from 'react';
import UserComponent from './UserComponent';
    
export default function App() {
  return (
    <Suspense fallback={<p>Caricamento...&lt/p>}>
        <UserComponent userId={123} />
    </Suspense>
 );
}

Mario: Con il fallback definito da Suspense, React mostrerà il messaggio "Caricamento..." fino a quando i dati non saranno pronti. Se c'è un errore nella promessa, React mostrerà un errore tramite un boundary di errore, se configurato.

Come si faceva prima di use?

Vasco: Prima di use, avremmo dovuto scrivere codice molto più verboso per gestire lo stato asincrono:

import React, { useState, useEffect } from 'react';

function UserComponent({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
    
  useEffect(() => {
     setLoading(true);
     fetch(`/api/users/${userId}`)
       .then(response => {
         if (!response.ok) throw new Error('Errore durante il caricamento');
         return response.json();
       })
       .then(data => {
         setUser(data);
         setLoading(false);
       })
       .catch(err => {
         setError(err);
         setLoading(false);
       });
  }, [userId]);
    
  if (loading) return <p>Caricamento...</p>;
  if (error) return <p>Errore: {error.message}</p>;
    
  return (
    <div>
        <h1>{user.name}</h1>
        <p>{user.email}</p>
    </div>
  );
}

Mario: Come vedete, è più verboso e contiene molta logica ripetitiva per gestire gli stati.
use semplifica tutto, rendendo il codice più leggibile e meno propenso agli errori.

Conclusioni

Vasco: In sintesi, il nuovo hook use di React 19 è una funzionalità potente che semplifica la gestione delle promesse nei componenti React. Se state già utilizzando React 19, vi consigliamo vivamente di provarlo nei vostri progetti.

Mario: E voi? Avete già utilizzato il hook use? Raccontateci le vostre esperienze e i vostri casi d'uso nei commenti. Siamo curiosi di sapere come lo state sfruttando!