Other components seems to rerender when using the tooltip component

[stefann01]

When I use the React dev tools profiler, and I hover over a node with a tooltip, it seems like other components from the page are re-rendering.

To reproduce, just open the shadcn tooltip component page, open profiler and check the "highlight when component rerenders" and then constantly hover over the node having a tooltip: https://ui.shadcn.com/docs/components/radix/tooltip

[manimovassagh]

This is expected behavior from Radix UI's Tooltip, not a bug in shadcn/ui specifically.

Radix Tooltip uses a TooltipProvider that manages shared delay state across all tooltips on the page. When you hover over a trigger, the Provider updates its internal context, which causes a re-render of any component consuming that context — including other tooltip instances.

The React DevTools "highlight updates" feature is a bit misleading here though. A re-render shown by the profiler doesn't necessarily mean expensive DOM work is happening. React's reconciliation will bail out early if the component output hasn't changed. So while the profiler lights up, the actual performance cost is usually negligible.

That said, if you're hitting real performance issues (jank, dropped frames), here are some things you can do:

1. Use separate TooltipProviders for isolated sections

<TooltipProvider>
  <Sidebar /> {/* tooltips here won't trigger rerenders in... */}
</TooltipProvider>
<TooltipProvider>
  <MainContent /> {/* ...this section */}
</TooltipProvider>

2. Memoize expensive sibling components

If a tooltip trigger sits next to a heavy component, wrap it in React.memo():

const ExpensiveChart = React.memo(function ExpensiveChart({ data }) {
  // heavy rendering logic
});

3. Tune the provider timing

The default skipDelayDuration means rapid hovering between tooltips opens them instantly, causing more state churn:

<TooltipProvider skipDelayDuration={0} delayDuration={300}>

In most cases this is purely a profiler visual artifact and not a real-world issue. I'd only optimize if you can measure actual frame drops in the Performance tab (not just the highlight overlay).

[stefann01]

The thing is that context update seems unnecessary. Also, even if the React DevTools "highlight updates" feature is a bit misleading, it creates unnecessary verbosity, which is bad when you are looking for other meaningful problems in the app.

Is there an open issue in Radix UI for this?