`API-ul use() în React 19: Consumarea Asincronă de Promises și Context` în React & Next.js

Ghid complet pentru API-ul use() introdus în React 19: citirea directă a datelor asincrone din Promises și a valorilor de Context în corpul componentelor, inclusiv în interiorul structurilor condiționale.

Sintaxă

const value = use(resource);

În React 19, funcția use() reprezintă un salt arhitectural fundamental: este primul API React care poate citi resurse asincrone (precum obiecte Promise) și valori de Context direct în timpul fazei de randare, având capacitatea unică de a fi apelată în interiorul instrucțiunilor condiționale (if) și al buclelor, încălcând în mod controlat regulile tradiționale ale hook-urilor.

Atunci când este apelat cu o promisiune (Promise), use() suspendă automat componenta până la soluționarea datelor, colaborând nativ cu componenta <Suspense> pentru a afișa un fallback vizual fără a mai necesita un useEffect boilerplate cu variabile de încărcare.

Exemplu: Consumarea unui Promise transmis ca prop cu use() și Suspense

import { use, Suspense } from 'react';

// Componentă copil care citește promisiunea fără useEffect și fără stare locală:
function DetaliiUtilizator({ dateUtilizatorPromise }) {
  // use() deblochează valoarea Promise-ului sau suspendă randarea dacă promisiunea este pending:
  const utilizator = use(dateUtilizatorPromise);

  return (
    <div className="profil-card">
      <h3>{utilizator.nume}</h3>
      <p>Email: {utilizator.email}</p>
      <span className="badge">Rol: {utilizator.rol}</span>
    </div>
  );
}

// Componenta părinte oferă protecția prin Suspense:
export default function PaginaProfil({ promiseDate }) {
  return (
    <section>
      <h2>Panou de Administrare</h2>
      <Suspense fallback={<p>Se încarcă datele utilizatorului...</p>}>
        <DetaliiUtilizator dateUtilizatorPromise={promiseDate} />
      </Suspense>
    </section>
  );
}

use() pentru Context vs. useContext

Spre deosebire de useContext(), care este constrâns să ruleze necondiționat la nivelul superior al componentei, use() poate fi plasat în ramuri logice:

Citirea condiționată a unui Context cu use()

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

function ButonActiune({ folosesteTemaCustom }) {
  // VALID în React 19! use() poate fi apelat în blocuri condiționale:
  if (folosesteTemaCustom) {
    const tema = use(TemaContext);
    return <button style={{ background: tema.culoarePrincipala }}>Personalizat</button>;
  }

  return <button className="btn-default">Standard</button>;
}

Atenție la crearea Promise-urilor: Nu creați o promisiune nouă direct în corpul unei componente de client la fiecare randare (de exemplu use(fetch(...))), deoarece ar declanșa o buclă infinită de suspendare. Generați promisiunea într-un Server Component, într-un handler de evenimente sau folosiți un mecanism de cache dedicat.