𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗣𝗿𝗶𝗻𝗰𝗶𝗽𝗹𝗲𝘀
Stop met het gebruiken van useEffect voor alles. Veel ontwikkelaars gebruiken deze hook verkeerd. Dit veroorzaakt bugs en maakt code moeilijk leesbaar.
Beperk het gebruik van useEffect.
Probeer één useEffect per pagina te gebruiken. Het gebruik van veel hooks voor dezelfde state zorgt voor verwarring. Je verliest het overzicht van welke hook welke state bijwerkt.
Stop met het gebruiken van useEffect voor gebruikersgebeurtenissen.
Gebruik useEffect niet voor clicks of taps. Gebruik in plaats daarvan event handlers.
- Fout: useEffect gebruiken om de state bij te werken na een click.
- Goed: Gebruik een functie zoals onClickBar om de state bij te werken.
Eventtypes die je moet kennen:
- Paginanavigatie en initiële renders.
- Wijzigingen in de netwerkverbinding.
- WebSocket- of real-time serverupdates.
Gebruikersacties zoals clicks horen niet in useEffect thuis. Gebruik directe event handlers voor deze acties.
Splits componenten op basis van props.
Als je een boolean prop gebruikt om de logica te veranderen, splits dan je component. Bouw niet één component die zowel het aanmaken als het bijwerken van gegevens afhandelt.
Een enkel component met veel "if"-statements wordt te groot. Dit maakt de app moeilijk te onderhouden.
- Fout: Eén component met een "isAdd"-prop die formuliervelden verandert.
- Goed: Maak een "RegisterComponent" en een "UpdateComponent" aan.
Kleine componenten zijn gemakkelijker te testen. Ze draaien sneller. Ze blijven overzichtelijk.
Bron: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31