Frame-lock external event handlers to allow for React batching

[mattgperry]

No description provided.

[iamakulov]

As investigated privately, TL;DR on why batching sometimes didn’t work before this PR:

• Motion uses native event listeners instead of React’s synthetic ones
• When native event listeners fire, they fire as tasks (in terms of the task queue)
• React only batches updates within a single task. That’s because, with React 18, batching works as follows:
  • you call setState()
  • setState() doesn’t render the update immediately. Instead, it pushes the update into React’s internal queue and schedules a microtask to process the queue
  • (if more setState()s happen, they also only push updates into the queue)
  • in the end of the task, the microtask gets invoked, and the update queue gets processed at once
• So if we have multiple event listeners fire at the same time, and each of them calls setState(), these state updates won’t be batched because they happen in separate tasks

And why it works now:

• Now, when native event listeners fire, we don’t call the event listeners from the userland (such as onTap) immediately. Instead, we wrap these calls with sync.update() (which is effectively a batched requestAnimationFrame())
• When the requestAnimationFrame callback fires, we call all event listeners from the userland one-by-one, synchronously
• This means all setState() calls inside these event listeners happen within a single task – and are batched correctly

[iamakulov]

🚀

[adamseckel]

Nice 👏