React Academy · Lezione

Componenti puri ed evitare effetti collaterali nel render

Scrivere funzioni di render prive di mutazioni e letture esterne.

Componenti puri ed evitare effetti collaterali nel render è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione imparerà che cosa significa avere un componente puro in React, perché le funzioni di rendering devono essere prive di effetti collaterali e come individuare e correggere le violazioni più comuni della purezza.

Che cos'è una funzione pura?

Una funzione pura restituisce sempre lo stesso output per gli stessi input e non produce effetti collaterali osservabili. React si aspetta che la funzione del componente sia pura: date le stesse props e lo stesso stato, dovrebbe restituire sempre lo stesso JSX.

Perché la purezza è importante in React

React può chiamare il componente più volte, ad esempio con StrictMode, le funzionalità concorrenti e il rendering sul server. Se il rendering produce effetti collaterali, come chiamate API, modifiche al DOM o scritture in variabili globali, tali effetti verranno eseguiti più volte in modo imprevedibile.

Impurità comune: modificare lo stato esterno

Non modifichi mai durante il rendering le variabili definite al di fuori del componente. Le modifiche sono corrette nei gestori degli eventi o in useEffect, ma non durante il rendering.

let totalRenders = 0; // external
function Counter() {
  totalRenders++; // BAD: side effect in render
  return <p>{totalRenders}</p>;
}

Impurità comune: modificare le props

Non modifichi mai l'oggetto props all'interno di un componente. Le props sono di sola lettura. Se ha bisogno di una versione modificata, crei una nuova variabile.

// Bad
function Badge({ user }) {
  user.name = user.name.toUpperCase(); // mutates prop!
  return <p>{user.name}</p>;
}

// Good
function Badge({ user }) {
  const displayName = user.name.toUpperCase();
  return <p>{displayName}</p>;
}

Impurità comune: usare valori casuali o date durante il rendering

Chiamare `Math.random()` o `Date.now()` direttamente durante il rendering produce valori diversi a ogni chiamata, compromettendo la purezza. Sposti questi valori negli inizializzatori dello stato o in useEffect.

// Bad
function Token() {
  const id = Math.random(); // different every render!
  return <p>{id}</p>;
}

// Good
function Token() {
  const [id] = useState(() => Math.random());
  return <p>{id}</p>;
}

Le chiamate API appartengono a useEffect

Recuperare dati direttamente nel corpo della funzione del componente, invece che in useEffect, è un'impurità: l'operazione viene attivata a ogni rendering. Sposti sempre le chiamate di fetch in useEffect, specificando le dipendenze appropriate.

// Bad
function Profile({ id }) {
  fetch('/api/user/' + id); // runs on every render!
  return <div />;
}

// Good
useEffect(() => {
  fetch('/api/user/' + id).then(/*...*/);
}, [id]);

Le modifiche locali sono corrette

Creare e modificare oggetti o array creati *all'interno* della stessa chiamata di rendering è perfettamente corretto: nessun altro può osservarli. Si parla di modifica locale.

function List({ items }) {
  const sorted = [...items]; // new array
  sorted.sort();             // mutating a local copy: OK
  return sorted.map(i => <li key={i}>{i}</li>);
}

Usare StrictMode per trovare le impurità

React chiama due volte il componente durante lo sviluppo quando StrictMode è attivo. Se l'interfaccia è incoerente tra le due chiamate o nota effetti collaterali duplicati, il rendering non è puro. Corregga l'impurità finché la doppia chiamata non produce problemi.

Componenti puri e React.memo

Quando un componente è puro, cioè restituisce lo stesso output per le stesse props, racchiuderlo in `React.memo` comunica a React che può saltare il nuovo rendering se le props non sono cambiate, migliorando le prestazioni.

const Pure = React.memo(function Pure({ value }) {
  return <p>{value}</p>;
});

Verifica rapida

Quale dei seguenti è un effetto collaterale accettabile da eseguire direttamente nella funzione di rendering di un componente React?

Riepilogo

I componenti puri restituiscono sempre lo stesso JSX per gli stessi input. Eviti di modificare props o variabili esterne durante il rendering, usi useEffect per gli effetti collaterali e si affidi a StrictMode per individuare le violazioni.

Prossimo argomento

Prossima lezione: **Buone pratiche per key e ref** — imparerà a usare correttamente key stabili, a evitare il problema dell'uso dell'indice come key e a lavorare con le ref callback.

Domande Frequenti

La lezione «Componenti puri ed evitare effetti collaterali nel render» è gratuita?

Sì — il testo completo di «Componenti puri ed evitare effetti collaterali nel render» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Componenti puri ed evitare effetti collaterali nel render»?

Scrivere funzioni di render prive di mutazioni e letture esterne. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Componenti puri ed evitare effetti collaterali nel render»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Cosa fa StrictMode
Componenti puri ed evitare effetti collaterali nel render
Best practice per key e ref
Struttura delle cartelle e convenzioni di denominazione

← Torna a React Academy