Description

Fixes #1476 - Memory leak where React children rendered in tooltips were not being properly cleaned up, causing DOM nodes to accumulate when tooltips were shown and hidden repeatedly.

Root Cause

The issue was caused by three sources of memory leaks in the Tooltip component:

1. ResizeObserver timeout accumulation: The ResizeObserver callback created multiple setTimeout calls, but only the last timeout ID was tracked. When tooltips were rapidly shown/hidden, older timeouts continued running, holding references to DOM nodes and closures.

2. Untracked handleShow timeouts: The handleShow function created a 10ms setTimeout on every call without tracking or cleanup. Rapid show/hide cycles accumulated multiple timeouts.

3. Async promise state updates: The computeTooltipPosition promise could resolve after component unmount, attempting state updates on unmounted components.

Changes

All changes are in src/components/Tooltip/Tooltip.tsx:

ResizeObserver Effect

• Track all timeout IDs in a Set instead of a single variable
• Clear all pending timeouts in cleanup function
• Added check for rendered state before creating observer
• Added mounted.current check before calling updateTooltipPosition
• Removed content from dependencies (was causing unnecessary effect re-runs)

handleShow Timeout Tracking

• Added tooltipShowTimerRef to track the setTimeout
• Clear existing timeout before creating new ones
• Added cleanup in component unmount effect

Position Calculation Promises

• Added mounted.current check in handleTooltipPosition promise callback
• Prevents state updates after component unmounts

Impact

These changes ensure:

• All timeouts are properly tracked and cleared when tooltips close
• ResizeObserver disconnects and clears all pending callbacks
• No state updates occur on unmounted components
• React children are fully garbage collected when tooltips close
• Memory usage remains stable even with frequent tooltip show/hide cycles

Testing

To verify the fix, rapidly hover on and off a tooltip trigger element multiple times. Browser DevTools should show:

• Stable memory usage
• No continuously increasing DOM node count
• No warnings about state updates on unmounted components

Example test case:

<button data-tooltip-id="test">Hover me</button>
<Tooltip id="test">
 <div>Complex content with children</div>
</Tooltip>

The fix is backward compatible and doesn't change any public APIs or behavior.

Fixes #1242

💬 Share your feedback on Copilot coding agent for the chance to win a 200ドル gift card! Click here to start the survey.