I think you're really misunderstanding how React works here.
There's no "thrashing" involved, in the sense of "make DOM update A, then need to make B that reads layout or does reflows right after".
- React does a render pass based on a state update, compares the element tree from this render vs the last render, and determines _all_ the necessary changes to make the DOM match the newly requested UI
- It then applies all those changes together, synchronously, in a generally efficient way (ie, modifying just specific attributes to existing DOM nodes if possible, vs recreating the DOM from scratch)
Which "performance issues" are you thinking of? Excess renders? DOM-specific reflows?
There's no "thrashing" involved, in the sense of "make DOM update A, then need to make B that reads layout or does reflows right after".
- React does a render pass based on a state update, compares the element tree from this render vs the last render, and determines _all_ the necessary changes to make the DOM match the newly requested UI
- It then applies all those changes together, synchronously, in a generally efficient way (ie, modifying just specific attributes to existing DOM nodes if possible, vs recreating the DOM from scratch)
Which "performance issues" are you thinking of? Excess renders? DOM-specific reflows?