Live Coding React — Cheat Sheet

Tag: react, hooks, state, frontend, live-coding, components

Livello: intermedio

TL;DR: Guida rapida per affrontare sessioni di live coding in React, focalizzata su gestione dello stato, side effect, performance e scomposizione UI.

Concetti chiave

Scomposizione UI: dividi sempre una vista complessa in componenti piccoli, testabili e riutilizzabili.

State management: preferisci useState per stati locali, eleva lo stato (lifting state up) solo se i componenti fratelli devono comunicare.

Side effects: usa useEffect dichiarando accuratamente l'array di dipendenze per evitare esecuzioni indesiderate.

Cleanup: restituisci sempre una funzione di cleanup da useEffect per timer, subscription o listener.

Memoization: applica useMemo e useCallback solo per prevenire re-render costosi, non di default.

Custom hooks: estrai logica di business o stateful complessa fuori dai componenti di presentazione.

Data fetching: gestisci esplicitamente gli stati di loading, error e success durante le operazioni asincrone.

Liste e chiavi: fornisci sempre una prop key univoca e stabile (non l'indice) quando renderizzi array di elementi.

Domande tipiche e risposte pronte

Q: Perché il componente si renderizza due volte al mount?R: È il comportamento di StrictMode in sviluppo. Serve a intercettare side effect impuri e problemi nel ciclo di vita.

Q: Come previeni chiamate API multiple mentre l'utente digita in un input?R: Implemento un debounce sul valore dell'input o sulla funzione di fetch usando un custom hook o un timer.

Q: Qual è la differenza pratica tra useMemo e useCallback?R: useMemo memorizza il valore restituito da una funzione, useCallback memorizza la referenza della funzione stessa.

Q: Come eviti memory leak in componenti smontati che fanno fetch?R: Uso un AbortController associato alla fetch, oppure un flag booleano nel cleanup dell'useEffect per ignorare la risposta.

Insidie e errori comuni

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

Usare l'indice dell'array come key in liste che supportano riordinamento, aggiunta o rimozione.

Dimenticare l'array di dipendenze vuoto [] causando loop infiniti di re-render durante le chiamate API.

Creare funzioni inline pesanti passate come prop a child component puri, rompendone la memoization.

Over-engineering: implementare Redux o Context API per passaggi di stato semplici superabili con prop drilling minimo.

Snippet e comandiTypeScript

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

// Template per Data Fetching sicuro con abort

export function useDataFetch(url: string) {

const [data, setData] = useState<any>(null);

const [isLoading, setIsLoading] = useState<boolean>(true);

const [error, setError] = useState<string | null>(null);

useEffect(() => {

const controller = new AbortController();

setIsLoading(true);

fetch(url, { signal: controller.signal })

.then(res => {

if (!res.ok) throw new Error('Network error');

return res.json();

})

.then(result => setData(result))

.catch(err => {

if (err.name !== 'AbortError') setError(err.message);

})

.finally(() => setIsLoading(false));

return () => controller.abort();

}, [url]);

return { data, isLoading, error };

}

```

Da ripassare

[ ] Pattern Compound Components per UI complesse

[ ] Gestione form non controllati tramite useRef

[ ] Gestione del re-render tramite React.memo

[ ] React Testing Library: render e screen queries

Riferimenti

React Ufficiale: react.dev/reference/react

React Testing Library: testing-library.com/docs/react-testing-library/intro