Nei progetti React, spesso usiamo useEffect per riflesso, ma questo approccio può talvolta complicare inutilmente il codice. In questo articolo, vedremo i casi in cui non hai bisogno di useEffect e come ottimizzare il tuo codice evitando di utilizzarlo impropriamente.
Comprendere il ruolo di useEffect
L'hook useEffect è utile per gestire effetti collaterali come sottoscrizioni o operazioni che devono essere eseguite al di fuori del flusso di rendering principale. Tuttavia, alcuni casi d'uso comuni possono essere semplificati senza useEffect.
1. Inizializzare lo stato senza useEffect
Spesso si vuole inizializzare uno stato basato su props o valori iniziali al montaggio del componente. Invece di usare useEffect per impostare questo stato, puoi farlo direttamente con useState, rendendo il codice più chiaro e prevenendo chiamate inutili.
Cattiva pratica con useEffect:
Buona pratica senza useEffect:
Qui, possiamo semplicemente inizializzare lo stato greeting usando una funzione in useState:
Questo approccio rende il codice più conciso ed evita di aggiungere un effetto superfluo che potrebbe rallentare la tua applicazione.
2. Calcolare valori derivati
Se hai bisogno di calcolare un valore in base allo stato o alle props, prova a utilizzare una variabile derivata o un memo invece di useEffect.
Esempio con useEffect (da evitare):
Soluzione senza useEffect:
Qui, il valore total può essere calcolato direttamente durante il rendering, senza dipendere da useEffect:
Questo metodo non solo è più pulito, ma elimina la necessità di gestire stati aggiuntivi.
3. Utilizzare useMemo per calcoli pesanti
Per calcoli costosi o dipendenti da più variabili, usa useMemo per evitare di rieseguire la logica ad ogni rendering, senza dover utilizzare useEffect per gestire lo stato.
Esempio con useEffect:
Approccio ottimizzato con useMemo:
Qui, useMemo permette di memorizzare il risultato senza dover gestire un effetto, rendendo il componente più prevedibile e performante.
4. Sincronizzare le proprietà di un componente controllato
Per gestire gli input controllati, non hai bisogno di usare useEffect per sincronizzare i valori degli input con lo stato del componente genitore. Usa semplicemente le props e le callback per gestire questo stato efficacemente.
Esempio con useEffect (inutile):
Soluzione senza useEffect:
L'uso diretto delle props semplifica il codice e migliora le prestazioni riducendo il numero di aggiornamenti di stato non necessari.
5. Manipolare il DOM direttamente nel rendering
Se vuoi applicare stili o classi basati sullo stato, spesso è inutile passare attraverso useEffect. React gestisce molto bene questo tipo di sincronizzazione durante il rendering.
Esempio con useEffect:
Soluzione senza useEffect:
Conclusione
Evitare useEffect permette spesso di semplificare il codice e migliorare le prestazioni della tua applicazione React. Rivalutando le ragioni per utilizzare un effetto, potrai creare componenti più chiari ed evitare errori legati a dipendenze mal configurate. La chiave è identificare i casi in cui lo stato, i valori derivati o useMemo sono sufficienti per soddisfare le tue esigenze senza effetti collaterali.
