Che cos'è React (e quando non serve)

“What is react” ha una risposta breve: React è una libreria JavaScript per costruire interfacce, mantenuta da Meta con licenza MIT e arrivata alla versione 19.

Cosa fa, cosa lascia fuori

React gestisce il rendering: prende lo stato di un componente, calcola l'albero da mostrare e aggiorna il DOM. Non decide le rotte, non scarica dati e non impone un sistema di stile. Ogni pezzo mancante diventa una scelta esplicita, con la sua licenza e il suo ciclo di aggiornamenti.

Un progetto minimo

npm create vite@latest react-minimal -- --template react
cd react-minimal
npm install
npm run dev

Vite, distribuito con licenza MIT, crea il progetto, installa React e avvia il server di sviluppo. Il file src/App.jsx contiene già un componente con stato: modificalo e la pagina si aggiorna senza ricaricare.

Il confine con le librerie

• Rotte: React Router è MIT e gestisce URL, parametri e navigazione; React da solo non sa cosa sia un indirizzo.
• Dati: TanStack Query è MIT e si occupa di cache, retry e stato di caricamento al posto tuo.
• Stile: Tailwind CSS è MIT; le classi vivono nel markup e i token in variabili CSS.

Il comando node scripts/kw.js react, eseguito il 31 ottobre 2026 sulla Stack Exchange API, restituisce 2.376 voti per la domanda «How can I programmatically navigate using React Router?» e 1.306 per «React-router URLs don't work when refreshing or writing manually». Entrambi i numeri riguardano lo stesso confine: la navigazione non vive in React, vive in un pacchetto che scegli, configuri e aggiorni.

Record vivi nel catalogo

Due componenti React del catalogo mostrano il modello in pratica: sidebar e dropdown-menu, entrambi su primitive Radix con licenza MIT. Per esplorare per categoria parti da 111.985 componenti.

Un esempio concreto: un dato derivato

type Row = { id: string; title: string };

export function VisibleRows({ rows, query }: { rows: Row[]; query: string }) {
  const visible = rows.filter((row) =>
    row.title.toLowerCase().includes(query.toLowerCase()),
  );
  return (
    
      {visible.map((row) => (
        {row.title}
      ))}
    
  );
}

Il filtro si calcola dentro il render, partendo da rows e query. Non c'è stato locale né useEffect: quando una prop cambia, React richiama la funzione e la lista resta una funzione pura dell'input. Aggiungere uno stato intermedio qui produce due render e un valore che può restare indietro rispetto alle prop.

Quando non serve

Un sito di contenuti, un blog o una pagina vetrina rendono meglio come HTML generato: Astro, con licenza MIT, spedisce zero JavaScript di framework finché non aggiungi un'isola interattiva. Un widget isolato in una pagina esistente si risolve con JavaScript semplice, senza build. Se il team lavora già con Vue o Svelte, aggiungere React crea due ecosistemi da mantenere.

La limitazione

React non include nulla di ciò che serve per andare in produzione: rotte, dati, form, test e stile sono decisioni separate. Il costo non è la curva iniziale, è l'assemblaggio: ogni libreria aggiunta porta una versione da seguire e una compatibilità da verificare a ogni aggiornamento.

La regola di decisione

Adotta React quando almeno due schermate condividono uno stato che deve sopravvivere alla navigazione. Se l'interazione vive in un solo punto della pagina, o se lo stato può morire al cambio di URL, un'isola di JavaScript semplice costa meno: nessun bundle di framework, nessuna idratazione. Un preventivo, una pagina prezzi e un form di contatto restano sotto quella soglia.

L'errore da evitare

L'errore più frequente è copiare una prop nello stato con useEffect e poi tenerla sincronizzata a mano. Il valore duplicato parte dal render precedente, il secondo aggiornamento arriva un frame dopo e il test passa solo perché la macchina è veloce. Se un valore si ricava da prop o da altro stato, calcolalo nel corpo del componente: lo stato serve a ciò che nasce da un evento dell'utente.

Dove continuare

Il modello di distribuzione dei componenti è in che cos'è shadcn/ui; il confronto fra le librerie React misurate è in librerie React 2026; la scelta fra i due framework più diffusi è in Vue 3 vs React.