useEffect, usant el Hook d’efecte a React

En articles anteriors hem parlat dels diferents framework que hi ha, les seves diferències i els seus avantatges, però avui parlarem d’un Hook de React que segurament tots els desenvolupadors coneixem, useEffect().

Què és useEffect?

Qualsevol desenvolupador que hagi treballat amb versions recents de React, s’haurà trobat amb el hook useEffect().

Aquest Hook és una de les eines més útils que ens ofereix React per crear una interfície capaç de reaccionar als canvis que es produeixin a la nostra aplicació.

El seu ús és relativament fàcil d’explicar: useEffect s’executa quan el component es munta, cada cop que canvia alguna part de l’estat del component i finalment quan el component es desmunta.

Una de les claus del correcte ús de useEffect és evitar que s’executi amb cada renderitzat. Ja que, per defecte, tots els useEffect hooks del nostre component s’executaran cada cop que el component s’actualitzi. Vegem com evitar-ho, però primer, coneixerem una mica més d’aquest Hook tan útil.

Què fa useEffect?

El primer que cal saber és com funciona. És important saber que en utilitzar aquest Hook, estem indicant a React que el component ha de fer alguna cosa després de renderitzar-se.

React recordarà la funció que li hem passat (ens hi referirem com el nostre “efecte”), i la trucarà més tard després d’actualitzar el DOM.

Per què es crida a useEffect dins del component?

En utilitzar useEffect dins del component ens permet accedir a la variable d’estat count (o qualsevol prop.) directament des de l’efecte.

Això facilita el procés ja que no necessitem una API especial per accedir-hi, ja que es troba a l’àmbit de la funció. Els Hooks aprofiten els closures de JavaScript i eviten introduir APIs específiques de React on JavaScript ja proporciona una solució.

Com evitar l’execució a cada renderitzat?

Com hem comentat anteriorment, per defecte, UseEffect s’executa després del primer renderitzat i després de cada actualització. Explicarem com modificar aquest comportament.

UseEffect, compta amb un segon paràmetre opcional on podem definir quins són els canvis en l’estat que volem que executin la funció. Aquests canvis els introduïm com un array amb les variables amb què volem executar.

Per a que aquest exemple sigui simple i clar, només canviarem el títol del document quan canviïn la variable de l’estat count, i no a cada renderitzat.

És possible afegir múltiples variables a aquest array, però és molt recomanable intentar mantenir les dependències de cada useEffect al mínim possible, això ens ajudarà a evitar errors i execucions no desitjades a l’hora de desenvolupar.

Ús de return per evitar fuites de memòria

Un cas d’ús habitual de useEffect és el de fer trucades asíncrones o subscripcions a detectors desdeveniments. Aquests casos dús solen ser propensos a produir errors si no es fa un ús correcte del hook.

Per la seva banda, React ens facilita dins d’useEffect una funció de retorn amb què podem netejar les subscripcions o trucades asíncrones quan el component es desmunta.

useEffect(() => {

function handleStatusChange(status) {

setIsOnline(status.isOnline);

}

ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

return () => {

ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);

};

}, [props.friend.id]); // Only re-subscribe if props.friend.id changes

Aquest és un exemple en què podem veure com es fa servir la funció de retorn per donar de baixa la subscripció del component a una API i així evitar una fuita de memòria.

És recomanable fer servir useEffect a React?

Com hem explicat en començar l’article, UseEffect és un dels hooks de React més comunament utilitzats i permet fer moltíssimes coses a l’equip de desenvolupament.

És per això que hem de ser molt estrictes quan en definim els casos d’ús i funcionament, ja que un mal ús d’aquest hook pot comportar una infinitat de bugs difícils d’identificar i resoldre, comportaments inesperats en els nostres components i, sobretot, un malbaratament de recursos i temps pel nostre equip, evitable i innecessari.

Si voleu continuar ampliant els vostres coneixements sobre aquest Hook, aquí us deixem un enllaç a la documentació oficial.

Arnau Tresserras Ridao – Product Owner at Itequia