Scheda di riferimento React
Un riferimento React 19 stampabile e ricercabile — componenti, JSX, hook, le nuove API Actions, context, ref e prestazioni. Gratis.
Componenti e JSX
12function App() { return <h1>Hi</h1>; }
Un componente funzione che restituisce JSX
export default function App() {}
Esporta un componente come default
<Greeting name="Ada" />
Renderizza un componente con props
{1 + 2} or {user.name}
Incorpora un'espressione JS con le parentesi graffe
<>{a}{b}</>
Fragment raggruppa i nodi, senza DOM aggiuntivo
<div className="card">
Usa className, non class, per il CSS
{isOpen && <Menu />}
Renderizza condizionatamente con &&
{ok ? <Yes /> : <No />}
Sceglie tra nodi con un ternario
{items.map(i => <li key={i.id}>{i.t}</li>)}
Renderizza una lista da un array
function Btn({ label, onClick }) {}
Destruttura le props nella firma
function Card({ children }) { return children; }
Legge il JSX annidato tramite la prop children
<input value={v} onChange={onChange} />
Input controllato legato allo state
Rendering e setup
10import { createRoot } from 'react-dom/client'
Importa l'API root del client
createRoot(document.getElementById('root')).render(<App/>)
Monta l'app nel DOM
import { StrictMode } from 'react'
Importa il wrapper StrictMode
<StrictMode><App /></StrictMode>
Fa emergere i bug in sviluppo
import { hydrateRoot } from 'react-dom/client'
Importa l'API di hydration
hydrateRoot(el, <App />)
Collega React all'HTML del server
root.unmount()
Smonta una root montata
import App from './App.jsx'
Importa un componente da un modulo
<App {...props} />
Espande un oggetto come props
export { Button, Card }
Esporta più componenti con nome
State ed effetti
12const [count, setCount] = useState(0)
Dichiara una variabile di state
setCount(c => c + 1)
Aggiorna a partire dal valore precedente
setUser(u => ({ ...u, name }))
Aggiorna lo state oggetto in modo immutabile
useEffect(() => { run(); }, [dep])
Esegue un effetto quando le dipendenze cambiano
useEffect(() => { /* once */ }, [])
Esegue un effetto solo al mount
useEffect(() => () => cleanup(), [])
Restituisce una funzione di cleanup
const ref = useRef(null)
Conserva un valore mutabile tra i render
const [state, dispatch] = useReducer(r, init)
Gestisce uno state complesso con un reducer
const theme = useContext(ThemeContext)
Legge il valore di context più vicino
const memo = useMemo(() => calc(a), [a])
Memoizza un calcolo costoso
useLayoutEffect(() => {}, [])
Esegue in modo sincrono dopo il layout
useSyncExternalStore(sub, get)
Si iscrive a uno store esterno
Hook e API di React 19
12import { use } from 'react'
Importa la nuova API use
const data = use(promise)
Legge una promise, sospende finché non è pronta
const theme = use(ThemeContext)
Legge il context, consentito condizionatamente
const [state, action, pending] = useActionState(fn, init)
Traccia state, action e pending
const [opt, addOpt] = useOptimistic(state, reducer)
Mostra istantaneamente un valore ottimistico
const { pending } = useFormStatus()
Legge lo stato di invio del form genitore
const [isPending, startTransition] = useTransition()
Segna gli aggiornamenti come non urgenti
startTransition(async () => await save())
Esegue un'Action asincrona in una transizione
const deferred = useDeferredValue(value)
Rinvia un valore per mantenere la UI reattiva
const id = useId()
Genera un id univoco stabile
<title>Page title</title>
Renderizza i metadati ovunque nell'albero
function Input({ ref }) {}
ref è una prop normale, niente forwardRef
Form e Action
12<form action={handleSubmit}>
Passa una funzione come Action del form
function handleSubmit(formData) {}
L'Action riceve il FormData
formData.get('email')
Legge un campo dal FormData
const [state, action] = useActionState(submit, null)
Collega un'Action allo state del componente
<form action={action}>
Usa l'Action avvolta sul form
const [s, a, pending] = useActionState(fn, init)
Espone un flag pending per la UI
return { error: 'Invalid' }
Restituisce lo state di errore da un'Action
function Submit() { const { pending } = useFormStatus() }
Legge pending dentro il pulsante di invio
<button disabled={pending}>Save</button>
Disabilita l'invio mentre è in attesa
import { requestFormReset } from 'react-dom'
Importa l'helper di reset del form
requestFormReset(formEl)
Resetta un form non controllato
<form action={action}><Submit /></form>
Compone un form con Action e stato
Props e composizione
10function Hi({ name = 'Guest' }) {}
Prop predefinita tramite destrutturazione
function Box({ children }) { return children; }
Avvolge il contenuto con la prop children
<Box><p>Inside</p></Box>
Passa JSX come children
function List({ render }) { return render(); }
Pattern render prop
<List render={() => <Item />} />
Fornisce una funzione di render
<Input {...props} />
Inoltra tutte le props con lo spread
const { id, ...rest } = props
Seleziona una prop e passa il resto
<Avatar {...rest} size="lg" />
Spread e poi sovrascrive una prop
function Btn(props: BtnProps) {}
Tipizza le props con interfacce TypeScript
<Slot label={<b>Hi</b>} />
Passa JSX tramite una prop con nome
Eventi
10<button onClick={handleClick}>
Collega un gestore di click
function handleClick(e) {}
Riceve l'evento sintetico
<input onChange={e => set(e.target.value)} />
Legge il valore di un input al change
<form onSubmit={e => e.preventDefault()}>
Ferma l'invio predefinito del form
e.stopPropagation()
Impedisce la propagazione dell'evento
<li onClick={() => remove(id)}>
Passa argomenti con una closure
<input onKeyDown={e => e.key === 'Enter'}
Gestisce la pressione di un tasto specifico
<div onMouseEnter={hover}>
Ascolta gli eventi pointer
e.currentTarget.value
Legge l'elemento su cui è il gestore
<button onClick={() => {}} type="button">
Evita l'invio implicito del form
Liste e chiavi
10arr.map(x => <li key={x.id}>{x.t}</li>)
Renderizza un nodo per ogni elemento
key={item.id}
Assegna a ogni elemento una chiave stabile
key={index}
Chiavi indice solo per liste statiche
users.map(u => <Card key={u.id} {...u} />)
Espande i campi dell'elemento come props
{list.length === 0 && <Empty />}
Mostra un fallback per le liste vuote
import { Fragment } from 'react'
Importa Fragment per i gruppi con chiave
<Fragment key={id}>{a}{b}</Fragment>
Un fragment con chiave in una lista
{rows.filter(r => r.on).map(...)}
Filtra prima del mapping
Keys must be unique among siblings
Perché le chiavi aiutano React a confrontare le liste
{[...Array(n)].map((_, i) => ...)}
Mappa un intervallo a lunghezza fissa
Context
10const ThemeContext = createContext('light')
Crea un context con un valore predefinito
import { createContext } from 'react'
Importa la factory del context
<ThemeContext value={theme}>
Fornisce un valore (sintassi React 19)
<ThemeContext value={theme}><App /></ThemeContext>
Avvolge l'albero che lo legge
const theme = useContext(ThemeContext)
Legge il context con useContext
const theme = use(ThemeContext)
Legge il context con l'API use
if (cond) { const t = use(Ctx); }
use può leggere il context condizionatamente
export const ThemeContext = createContext()
Esporta un context condiviso
<Ctx value={{ user, setUser }}>
Passa un oggetto come valore
Avoid new objects each render
Memoizza i valori per limitare i re-render
Ref
10const inputRef = useRef(null)
Crea un contenitore ref
<input ref={inputRef} />
Collega la ref a un nodo
inputRef.current.focus()
Accede al nodo DOM tramite current
function Field({ ref }) { return <input ref={ref} /> }
ref come prop, niente forwardRef
<Field ref={inputRef} />
Passa una ref a un componente
useImperativeHandle(ref, () => ({ focus }))
Espone un'API imperativa
const setRef = node => { box = node; }
Usa una ref callback
<div ref={setRef} />
Collega una ref callback
const count = useRef(0)
Memorizza un valore senza ri-renderizzare
ref={node => { return () => cleanup(); }}
Ref callback con cleanup (React 19)
Prestazioni
10const Memo = memo(Component)
Salta il re-render quando le props sono uguali
import { memo } from 'react'
Importa l'helper memo
const value = useMemo(() => calc(a), [a])
Mette in cache un valore calcolato
const fn = useCallback(() => f(a), [a])
Mette in cache l'identità di una funzione
const Lazy = lazy(() => import('./Big.jsx'))
Effettua il code-split di un componente
import { lazy, Suspense } from 'react'
Importa lazy e Suspense
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Mostra un fallback durante il caricamento
startTransition(() => setQuery(q))
Segna gli aggiornamenti di state non urgenti
const slow = useDeferredValue(query)
Rinvia la UI derivata costosa
React Compiler auto-memoizes
Spesso elimina la memoizzazione manuale
Varie e metadati
10<Suspense fallback={<Loading />}>
Boundary per contenuto asincrono
class ErrorBoundary extends Component {}
Cattura gli errori di render (classe legacy)
<title>My Page</title>
Solleva il titolo del documento da un componente
<meta name="description" content="..." />
Renderizza i meta tag nell'head
<link rel="stylesheet" href="..." />
Solleva un link a un foglio di stile
<Comp key={id} />
Cambia la key per rimontare un componente
React.lazy(() => import('./Page.jsx'))
Importa in modo lazy un componente di route
createPortal(node, container)
Renderizza in un nodo DOM diverso
{/* a comment */}
Scrive un commento dentro JSX
cleanup return in useEffect
Rilascia sempre le sottoscrizioni/i timer
Nessuna voce corrisponde a “:q”.
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.