Tooltip causing the whole chart to rerender

[benhegman]

First off, thanks for the awesome library. Visx is great to work with!

I've noticed that using the tooltip causes lots of unnecessary rerenders.

The behavior can be seen in the demo here: https://ecdeo.csb.app/. When I view the demo and open the console I get a significant amount of lag on the tooltip. When you use the profiler in react devtools you'll notice that all the polygons and circles are being rerendered when the tooltip is rerendered. For me, in a span of a couple seconds, they were rerendered almost 100 times. The way I've been getting around this is to wrap each component in React.memo() and then make sure all the props being passed to that component have been memoized via useMemo or useCallback. The parent element still gets rerendered (React dev tools says this is because hooks have changed and I believe this is due to the useTooltip hook) but all children have been memoized so they do not rerender. While this method works, it seems a bit clunky and its easy to forget to memoize all props - especially when building a very custom chart with lots of components.

To me it seems that useTooltip should not cause a rerender of its parent element but that is the current behavior.

It's very possible that I'm misunderstanding the usage of useTooltip but this is the behavior on all of the charts with tooltips on the visx site.

Any insight into this or ideas on a work around would be greatly appreciated.

Thanks!

[cisac]

You can use debounce option (debounce resize or scroll events in milliseconds, needed for tooltip positioning) in useTooltipInPortal:

  const { containerRef, TooltipInPortal } = useTooltipInPortal({
    scroll: true,
    detectBounds: true,
    debounce: 300,
  });