Does React-Bootstrap Modal leak memory during rapid toggle cycles?

Question

In React-Bootstrap v2.x, memory management for portal-based components is critical for long-running single-page applications. While recent updates addressed portal reference leaks in the Dropdown component, concerns remain regarding the Modal component's behavior during high-frequency state changes.

The uncertainty centers on whether animation callbacks are consistently cleared when the show prop is toggled rapidly. If the component unmounts or changes state before an animation completes, there is a risk that pending callbacks retain references to the DOM or component state, preventing garbage collection.

Verification Requirements
To validate this, a test harness is needed to mount and unmount the Modal repeatedly while monitoring the JS heap size via Chrome DevTools. It is necessary to isolate the component to avoid false positives caused by React's internal fiber tree.

Does the Modal component consistently clear all animation-related timers and callbacks upon unmounting?
  Is there a documented mechanism to ensure no memory leaks occur when show is toggled faster than the transition duration?

Tasadduq Burney · Answer

Direct Answer
There is no widely documented, systemic memory leak in React-Bootstrap v2.x specifically caused by rapid toggling of the show prop. However, because the Modal uses React Portals and relies on asynchronous CSS transition callbacks to trigger unmounting, rapid state changes can create a race condition where multiple transition cycles overlap. While React generally handles the cleanup of the portal node, orphaned references can persist if the JavaScript heap is not cleared between rapid cycles.

Likely Explanation vs. Confirmed Behavior
It is important to distinguish between a permanent memory leak and transient heap growth:

Confirmed Behavior: React-Bootstrap Modals use a transition manager that waits for a CSS transition to complete before removing the element from the DOM. If show is toggled faster than the transition duration (typically 150–300ms), the component may enter a state of rapid re-rendering while the DOM node is still transitioning.
  Likely Explanation for Observed Growth: If you observe increasing memory during a test, it is often due to Detached HTML Elements. These occur when a DOM node is removed from the document but is still referenced by a JavaScript closure (such as an unfinished onTransitionEnd callback). In most cases, these are collected during the next major Garbage Collection (GC) cycle and are not permanent leaks.

Verification Steps
To determine if your specific implementation is leaking memory, use the following scoped diagnostic process in Chrome DevTools:

Baseline: Open the Memory tab and take a Heap Snapshot while the Modal is closed.
  Stress Test: Execute a loop that toggles the show state 100 times rapidly (e.g., every 50ms).
  Force GC: Click the trash can icon (Collect Garbage) in DevTools several times to ensure transient objects are cleared.
  Analysis: Take a second Heap Snapshot. Filter the results for Detached HTMLDivElement. If the count of detached elements increases linearly with the number of toggles and persists after forced GC, a leak is present.
  Isolation: Repeat the test with the animation={false} prop. If the leak disappears, the issue is tied to the transition callback logic.

Diagnostic Requirement
To refine this recommendation: Are you using a custom animation duration or a third-party animation library alongside React-Bootstrap? Custom durations that mismatch the internal state timing can increase the likelihood of orphaned callbacks.

Does React-Bootstrap Modal leak memory during rapid toggle cycles?

Verification Requirements

1 answer

Direct Answer

Likely Explanation vs. Confirmed Behavior

Verification Steps

Diagnostic Requirement

Your perspective belongs here.

0 question comments