I’ve seen a few similar-ish questions but I’m struggling to find a definitive answer – any advice appreciated!
Consider:
- you have a react component
- you have an animation loop running via requestAnimationFrame(update), in a singleton
Then:
- in a single frame, which runs update exactly once, the react component is re-rendered twice
What happens:
-
The browser interrupts the update execution in order to synchronously perform re-layout and re-paint as soon as the component finishes the re-render (so this would happen twice in the single frame)
-
The browser schedules the re-layout and re-paint each time the comp performs a render, but this only actually happens once the update function has finished execution
-
Something else?
I would like to think that the re-renders are scheduled to come into affect at the next layout/paint cycle, but I need to be sure because otherwise I’ll need to take pains not to result in more than one potential redraw each frame…