Live Coding React — Cheat Sheet

Tags: react, hooks, component, state, live-coding

Livello: intermedio

TL;DR: Fissa concetti chiave, insidie comuni e pattern di base per affrontare live coding in React con sicurezza.

Concetti chiave

Usa sempre componenti funzionali e Hooks al posto di componenti a classe.

Modificare lo stato è asincrono; non affidarti al valore immediatamente dopo l'aggiornamento.

Pensa per componenti isolati e progetta l'albero in modo gerarchico e logico.

Gestisci effetti collaterali (fetch, timer) tramite useEffect, ricordando le dipendenze corrette.

Solleva lo stato ("lifting state up") quando più componenti devono condividerlo.

Usa le PropTypes o TypeScript per rendere il contratto del componente esplicito.

L'uso della prop key deve essere univoco nei map e stabile nel tempo (non l'indice dell'array).

Domande tipiche e risposte pronte

Q: Perché il componente non si aggiorna subito dopo il setState?

R: Perché il setState è asincrono e React accorpa (batch) gli aggiornamenti per ottimizzare il rendering. Usa useEffect per reagire ai cambiamenti.

Q: Come previeni loop infiniti in useEffect?

R: Dichiaro sempre in modo accurato l'array delle dipendenze per controllare esattamente quando deve scattare l'effetto.

Insidie e errori comuni

Dimenticare l'array delle dipendenze in useEffect provocando rendering continui.

Mutare lo stato direttamente (es. state.val = 2) invece di usare la funzione setter.

Passare prop o funzioni in callback nuove a ogni render causando re-render non necessari.

Usare come key l'indice dell'array nei map, portando a bug grafici se la lista muta ordine.

Snippet e comandiTypeScript

// Update state using previous value safely
const incrementCounter = () => {
  setCount(prevCount => prevCount + 1);
};

// UseEffect fetching data on mount
useEffect(() => {
  const loadData = async () => {
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      setData(data);
    } catch (error) {
      console.error("Fetch error", error);
    }
  };
  loadData();
}, []);

Da ripassare

[ ] Ciclo di vita: come simulare componentWillUnmount (return function dal useEffect).

[ ] Context API contro Props Drilling.

[ ] Regole degli Hooks (chiamata condizionale, annidamento vietato).