[charts] Update Popper position outside of react
Part of #14746
The issue seems to come from the onMouseMove which trigger at high frequency costly functions:
- Updating the tooltip
- Updating the context that tracks interaction.
In this PR I initially proposed to throttle those updates. 200ms for the interaction, because highlight can suffer a little delay without issue. And 50ms for the tooltip since it's reaction needs to be smoother.
We could gain additional performances by going from 50ms to 200ms for the tooltip, and smoothening it with transition but it creates a weird effect of the tooltip following your mouse like a ghost
After the first feedback, this PR is modified to only move tooltip placement from react state to vanilla JS update.
The management of the context state remains to do
Deploy preview: https://deploy-preview-15003--material-ui-x.netlify.app/
Updated pages:
Generated by :no_entry_sign: dangerJS against fd0d0bf054bff6e4d1fa4b7e41639c7f6c8af3a9
CodSpeed Performance Report
Merging #15003 will not alter performance
Comparing alexfauquette:charts-cpu (fd0d0bf) with master (ab4823d)
Summary
✅ 3 untouched benchmarks
This is an area where you would benefit from doing things outside of react. The tooltip position update could easily be a vanilla JS event handler that updates its position without going through react, the same way we use popperjs in other parts of the codebase. That would allow for high-frequency updates without the UX degradation.
This pull request has conflicts, please resolve those before we can evaluate the pull request.