Guida ai React Hooks: useEffect
Utilizziamo useEffect per realizzare un orologio dinamico in SVG.
Nello scorso articolo abbiamo parlato di come implementare uno stato applicativo in un componente React. In questo articolo vedremo invece come poter implementare i cosiddetti side effects tramite l’utilizzo dell’hook useEffect . Tale hook sostituisce i lifecycle hooks componentDidMount, componentDidUpdate e componentWillUnmount dei class components di React e viene principalmente utilizzato per gestire i side effects, come ad esempio chiamate XHR, integrazione con API di terze parti, o semplicemente modifiche allo stato applicativo.
Diamo un’occhiata a questo orologio (ripreso da uno degli esempi di Svelte).
Analizziamo il funzionamento dello snippet di codice che possiamo trovare all’interno del componente Clock :
La porzione di stato relativa al clock è creata in maniera lazy , ovvero la funzione di inizializzazione è chiamata una volta sola al primo render, e si occupa di memorizzare le ore, i minuti ed i secondi visualizzati dall’orologio.
Lo stato dell’orologio viene aggiornato ad ogni render, per ogni secondo che passa, all’interno della callback fornita ad useEffect .
Tale hook prende in input due parametri, ovvero una funzione di callback ed un array di dipendenze. Il tempo di esecuzione di tale funzione è stabilito dal secondo parametro: se il secondo parametro è assente, la callback verrà eseguita ad ogni render del componente. In caso contrario, se ad esempio abbiamo un array di dipendenze vuoto, la callback verrà eseguita solamente dopo il primo render.
L’hook restituisce inoltre una funzione che verrà richiamata all’unmount del componente ed è lo spazio utile per cancellare eventuali dipendenze: in questo caso, chiamiamo la funzione clearInterval per cancellare il timer impostato con setInterval .
Cosa intendiamo con array di dipendenze? Intendiamo quelle variabili da cui dipende il corpo della nostra funzione di callback. Se specifichiamo infatti che l’array di dipendenze è composto da un’unica variabile pluto , allora la callback passata ad useEffect verrà eseguita unicamente se il riferimento a pluto viene aggiornato.
Dobbiamo stare attenti a specificare le corrette dipendenze per la callback eseguita da useEffect , altrimenti potrebbero verificarsi spiacevoli imprevisti, come ad esempio in questo caso:
In questo caso, dato che non forniamo un array di dipendenze ad useEffect, la callback verrà eseguita ad ogni render. Dal momento che la stessa aggiorna lo stato e provoca il rendering del componente, tale componente entrerà in un loop di re-rendering.
In questo esempio, e di seguito nello snippet, possiamo vedere un corretto utilizzo dell’hook: in questo caso il valore della variabile count viene aggiornato ad ogni aggiornamento dello stato text .
