React — Cheat Sheet

Tag: react, hooks, state, frontend, components

Livello: intermedio

TL;DR: React è una libreria JavaScript per creare interfacce utente basate su componenti riutilizzabili, gestione reattiva dello stato e ottimizzazione del rendering tramite Virtual DOM.

Concetti chiave

Virtual DOM: rappresentazione in memoria del DOM reale. React calcola le differenze (reconciliation) e aggiorna solo il necessario.

Componenti funzionali: blocchi costitutivi dell'UI, standard attuale, supportano stato e ciclo di vita tramite hooks.

Props: parametri read-only passati dai componenti padre ai componenti figli.

State: dati gestiti internamente da un componente, la cui modifica innesca automaticamente un re-render.

Hooks: funzioni che permettono di agganciarsi alle feature di React (es. useState, useEffect, useContext).

Context API: sistema per condividere dati (tema, utente loggato) nell'albero dei componenti evitando il prop drilling.

Ciclo di vita: mounting, updating, unmounting. Nei componenti funzionali è gestito interamente tramite useEffect.

JSX: estensione della sintassi JavaScript che permette di scrivere markup simile all'HTML direttamente nei file JS/TS.

Memoization: tecniche per evitare re-render inutili tramite React.memo, useMemo e useCallback.

Domande tipiche e risposte pronte

Q: Qual è la differenza tra Virtual DOM e Real DOM?R: Il Virtual DOM è una copia leggera in memoria. Modificare il Real DOM è costoso, quindi React aggiorna il Virtual DOM, fa il diffing e applica al Real DOM solo i cambiamenti minimi necessari.

Q: A cosa serve e come funziona useEffect?R: Lo uso per gestire side effects come fetch di dati o timer. Accetta una callback e un array di dipendenze: se l'array è vuoto gira solo al mount, altrimenti ogni volta che una dipendenza cambia.

Q: Cos'è il prop drilling e come lo risolvi?R: È il passaggio di props attraverso molti componenti intermedi che non ne hanno bisogno, solo per farle arrivare a un figlio profondo. Lo risolvo usando la Context API o state manager come Zustand o Redux.

Q: Qual è la differenza tra useMemo e useCallback?R: useMemo memorizza il risultato di un calcolo costoso, mentre useCallback memorizza l'istanza di una funzione per evitare che venga ricreata a ogni render.

Insidie e errori comuni

Mutare lo stato direttamente (es. state.count = 1) invece di usare la funzione setter (setCount), impedendo il re-render.

Dimenticare l'array delle dipendenze in useEffect, causando loop infiniti o esecuzioni a ogni render.

Usare l'indice dell'array come key nel rendering di liste dinamiche: causa bug se la lista viene riordinata o filtrata.

Modificare lo stato in modo asincrono senza usare la callback funzionale (es. setCount(prev => prev + 1)).

Snippet e comandiTypeScript

```import { useState, useEffect, useCallback } from 'react';

interface Props {

initialCount?: number;

}

export default function Counter({ initialCount = 0 }: Props) {

const [count, setCount] = useState(initialCount);

// Side effect basato sul cambiamento dello stato

useEffect(() => {

document.title = Cliccato ${count} volte;

// Cleanup function

return () => {

document.title = 'React App';

};

}, [count]);

// Callback memorizzata

const increment = useCallback(() => {

setCount((prev) => prev + 1);

}, []);

return (

<div>

<p>Conteggio: {count}</p>

<button onClick={increment}>Incrementa</button>

</div>

);

}

```

Da ripassare

[ ] React Server Components (RSC) e differenze con SSR

[ ] Pattern avanzati (HOC, Render Props, Custom Hooks complessi)

[ ] Concurrent mode e useTransition / useDeferredValue

Riferimenti

React Documentation (react.dev)