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,
  });

[sleonia]

@gtb104
Hello, I'm really impressed with your demo, it looks great. I'm particularly interested in understanding how you've handled the issue with re-rendering. Would it be possible for you to illustrate this through a CodePen or pseudo-code? It would be greatly beneficial for my understanding and for this discussion.

[williaster]

This is often a react architecture question, not a visx issue. I would guess you render the chart and tooltip in the same component, so when one updates so does the other. One option then is to

• re-architect your components such that you lift tooltip state to a parent component which also renders the tooltip and chart components separately
• pass the tooltip state to the tooltip
• wrap your chart component in React.memoize (equivalent to old-school PureComponent which won't update if props are referentially equal)
• then be careful not to pass props to the chart component that would fail the referential equality check (if you're using function components then you can use hooks like useMemo or useCallback to ensure this.

[gtb104]

I'm trying to understand your advise, specifically

• re-architect your components such that you lift tooltip state to a parent component which also renders the tooltip and chart components separately
• pass the tooltip state to the tooltip

By tooltip state, do you mean the stuff returned from useTooltip()?

So we'd have Parent, Tooltip, and Chart components

Parent uses useTooltip(), and passes the values to the Tooltip component which renders the actual tooltip. Chart just renders chart stuff. Would the Tooltip component use tooltipInPortal so it's positioned correctly, or something else?

[benhegman]

Thanks for the quick replies.

@cisac while that helps it doesn't seem to get to the root of the problem for me and I still get a lot of lag.

@williaster I tried a bit with some re-architecting but had little luck. I'm sure with a bit more messing around it would work. I ended up using an external store (zustand) to keep track of the tooltip data instead of useTooltip and then only passed that to the tooltip and a couple other components that rely on the tooltip data. It seems to be working well and has gotten rid of any lag.

Thanks again for the suggestions/guidance!