I pericoli delle ottimizzazioni in React

Come abbiamo appena visto, tutte le funzioni hook che richiedono una lista di dipendenze in React (useEffect, useMemo e useCallback, per esempio) creano un albero di dipendenze che può diventare molto facilmente un ammasso di costrizioni auto-imposte.

Per ogni uso delle funzioni hook che richiedono una lista di dipendenze, siamo costretti a prendere in considerazione tutte le dipendenze. Sappiamo che qualsiasi costante, variabile o funzione che non è generata da una funzione hook di questo tipo sarà ricalcolata per ogni ciclo di rendering e possiamo intuire che, se anche una sola delle dipendenze passate a una di queste funzioni hook è ricalcolata per ogni ciclo di rendering, allora l’intera catena di chiamate alle funzioni hook sarà a sua volta fatta per ogni ciclo di rendering, rendendo l’uso delle funzioni hook praticamente inutile.

Questo significa che, ogni volta che decidiamo di usare una funzione hook che richiede una lista di dipendenze, dobbiamo poi “inseguire” tutte le dipendenze per chiuderle a loro volta in una chiamata che richiede dipendenze, e così via. Questo può facilmente portare a “inseguire” dipendenze nei componenti genitori, e nei componenti genitori dei componenti genitori, fino a creare una rete inestricabile di dipendenze che impazziremmo per tenere sotto controllo.

Quando ha senso, allora, utilizzare i metodi di ottimizzazione dei cicli di rendering? 

Utilizzare i metodi di ottimizzazione dei cicli di rendering ha senso solo quando non abbiamo controllo su altre parti del sistema che potrebbero risolvere meglio il problema (la maggior parte delle volte, il back-end e il database) e nel modo più isolato e ristretto possibile. Il concetto non dista molto da quello di effetto collaterale: evitiamolo se possiamo, altrimenti isoliamolo, così che sia facile controllarlo.

Questo discorso vale per useMemo e useCallback, mentre memo e lazy sono molto meno pericolosi, soprattutto se utilizzati con componenti molto in alto rispetto all’albero, quelli con molti discendenti.

Se la nostra guida React ha stuzzicato il tuo interesse e vuoi approfondire l’apprendimento di questa libreria, iscriviti alla nostra masterclass React!