Variaties van de useEffect Hook in React

De hook useEffect heeft nog andere variaties, die specifiek zijn en zeer zelden gebruikt worden, daarom zullen we er kort bij stilstaan.

De eerste variatie is de hook useLayoutEffect, die activeert voordat de browser het scherm opnieuw tekent. Deze mogelijkheid kun je gebruiken om de afmetingen en positie van een component te berekenen afhankelijk van andere elementen, zodat de browser het tijdens het tekenen meteen weergeeft zoals en waar nodig. Dankzij dit ziet de gebruiker bijvoorbeeld geen tussentijdse sprongen van de component bij het veranderen van positie of afmetingen, maar alleen de definitieve versies ervan.

De tweede variatie is de hook useInsertionEffect, die activeert vóór welke wijzigingen in de DOM-structuur dan ook, dat wil zeggen op het moment wanneer refs nog niet zijn bevestigd en de DOM niet is bijgewerkt. Wordt voornamelijk toegepast waar het nodig is om dynamische stijlen uit CSS-in-JS bibliotheken in te voegen vóór wijziging van de DOM.