Prevent onSelectionChange from affecting selection tool performance

[axelboc]

onSelectionChange was called on every pointer move event, so it had the potential to affect the performance of the selection tool. I'm moving the call inside a useEffect so that it happens asynchronously, after the RAF selection state is updated and after the selection tool and its render prop have had time to re-render.

[loichuder]

Sorry for my ignorance but I don't understand how this improves performance 😅

With this implementation:

• On pointer move, the state of SelectionTool changes, triggering a rerender.
• The rerender of SelectionTool triggers the execution of the useEffect and therefore of onSelectionChange.

Therefore, in effect, onSelectionChange is still called on every pointer move event ?

[axelboc]

Kinda. onSelectionChange is now called asynchronously:

1. outside of the current animation frame thanks to active selection's useRafState, which means that if the browser is busy and a selection state update is skipped, onSelectionChange is no longer called either;
2. on the next render thanks to useEffect, which means that if the consumer sets a state in onSelectionChange, the parent component gets re-rendered after the active selection (which is the most time-sensitive thing) instead of before. And since I use useEffect and not useLayoutEffect, the re-rendered active selection has time to actually be painted by the browser, which maximises the perceived responsiveness of the selection for the user.