Det hele startet med en litt vel svett dag på jobb:
Folk som kjøpte billetter på kollektiv-appen Bekk jobba med, ble ble trukket både to og tre ganger for samme kjøp. For noen kom beløpene opp i 1.000-kroners klassen.
Synderen? En "useEffect" i React-appen, som kjørte flere ganger enn den skulle. Ikke under testing og utvikling – kun i produksjon.
Funksjonen irriterte Bekk-utvikleren Caroline Odden så mye, at hun på kode24-dagen 2.0 holdt lyntalen: "En historie om hvorfor useEffect ødelegger livet mitt".
- I dette tilfellet kom useEffect og bet oss i leggen fordi at vi hadde brukt den feil. Vi fant heldigvis ut av det, og de som ble trukket ble refundert, sier Odden, til kode24.
Misbrukes
For alle som ikke prater flytende React, brukes useEffect til å snakke med ting som React ikke har kontroll over. Dette kan være å hente data fra et API eller å bruke uforutsigbare timing-funksjoner som setTimeout eller setInterval
- Men folk misbruker det ofte, og bruker det til feil ting. Meg selv inkludert, sier Odden, til kode24.
Hun mener derfor at folk burde tenker seg over to ganger før de skriver inn useEffect-er.
- Ikke bare klask den på det du lager.
Snedig oppførsel
- Har du noen eksempler på misbruk av useEffect?
- La oss si at du har en handlekurv som du legger ting i. Der kommer det opp varslinger at for eksempel en genser har blitt lagt inn. Det er mange som bruker useEffect for å utløse varslingen. Men useEffect kan ofte lede til en snedig oppførsel, som gjør at du får varslingen både to og tre ganger, sier Odden, som altså var problemet i kollektivappen.
Hun mener du i stedet kan flytte koden til event-handleren din, som faktisk legger ting i handlekurven.
- Da ville du bare fått varslingen én gang, og den ville vært litt mindre "buggy". Eller hvis du skal vise fornavn og etternavn, så bruker folk gjerne en useEffect for å slå sammen to strenger. Det er ikke det lureste, det er bedre å lage en ny variabel i komponenten din, og eventuelt bruke useMemo dersom beregningen viser seg å være dyr, sier Odden.
Bruk til riktige ting
Ifølge Odden kan du eventuelt bruke useMemo dersom beregningen viser seg å være kostbar.
- Hvis man bare skal resette state, kan man bruke "key" på komponenten, som gjør at React lager en ny instans av klassen isteden for å manuelt resette alt.
Hun anbefaler alle å sjekke ut Reacts dokumentasjon.
- Bruk useEffect til riktige ting. Ikke bare bruk det ukritisk på det du lager!
