When resize is observed, suspend until next animation frame to avoid …

[peeke]

…undeliverable notifactions

Goede write-up over de meldingen: https://blog.elantha.com/resizeobserver-loop-limit-exceeded/

De errors zijn erg moeilijk te reproduceren omdat onze hook geen styles aanpast binnen de callback. Ik vermoed dat ze alleen optreden tijdens lange frames.

Deze fix zou ze bij de bron aan moeten pakken. Kan evt. een beta release doen, om te testen in een project waarin veel meldingen voor kwamen.

[EECOLOR]

Dit lijkt me niet de juiste oplossing.

Voor zover ik weet triggert React direct een render wanneer er een setState gedaan wordt tijdens een animation frame (dit zouden we even kunnen testen).

Dat zou beteken dat we door requestAnimationFrame te gebruiken potentieel problematisch gedrag kunnen krijgen.

Wellicht dat het oorspronkelijke probleem is dat de resize observer tijdens het animation frame wordt getriggert.

Praktisch gezien gelden de volgende regels:

• DOM updates in animation frames (of useLayoutEffect)
• DOM reads daarbuiten

Met React komt daar volgens mij nog bij dat je geen hele render cyclus wilt tijdens een animation frame.

Moeten we nog maar een keer over overleggen.

[peeke]

Ja, ik probeer je vandaag wel even te bellen. Ik krijg het issue alleen buiten React gereproduceerd.

Ik weet niet zeker of deze thread nog actueel is, maar het lijkt er hier op dat React meerdere renders naar de dom kan doen binnen een animation frame: wat de error denk ik ook zou triggeren: facebook/react#11171