A ground-up React app layout-thrashing multiple times in the same callstack? It's more likely than you think.

I really am going to write the *"You Had One Job, React"* blog post, but also we need to fix the platform. Feedback on design options warmly appreciated:

https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/EventPhases/explainer.md

@slightlyoff Pretty exciting proposal!

After working with motion for a while: https://motion.dev/docs/frame, I think the 3 phases make sense too. The concept is also "read"/"write", but "write" is split into "update" basically as "postRead" and then the real write in "render".

Integration via the reporting API is also interesting, but I think that might flood it when used on big sites. Maybe a PerformanceObserver would work better so you can filter before sending stuff?

Motion — React & JavaScript animation library

Motion (prev Framer Motion) is a fast, production-grade web animation library for React, JavaScript and Vue. Build smooth UI animations with examples, tutorials, and a tiny footprint.

@slightlyoff As for the API, naming is hard, but "postTask" implies to me it happens somewhen later. To make it more complex, what happens if:
- you do a postTask write inside the read phase?
- you do a postTask read inside write?
- you do a postTask write inside write?

which triggers now and which next frame?
motion has a parameter for that. But "post" implies anything would happen 'later', not now, so maybe window.frame/read is better (similar issue though re. the scheduling?)

@kurtextrem great points. will try to update to address/cover them