fix(react): strict mode support (#742)

packages/react/src/utils/tests/use-destroy.test.tsx

@@ -0,0 +1,112 @@
+import { render, renderHook } from '@testing-library/react';
+import { StrictMode } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useDestroy } from '../use-destroy';
+
+describe('useDestroy', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('destroys instance after unmount', () => {
+    const instance = { destroy: vi.fn() };
+
+    const { unmount } = renderHook(() => useDestroy(instance));
+
+    expect(instance.destroy).not.toHaveBeenCalled();
+
+    unmount();
+    vi.runAllTimers();
+
+    expect(instance.destroy).toHaveBeenCalledOnce();
+  });
+
+  it('does not destroy synchronously in cleanup', () => {
+    const instance = { destroy: vi.fn() };
+
+    const { unmount } = renderHook(() => useDestroy(instance));
+
+    unmount();
+
+    // Destroy is deferred — not called yet
+    expect(instance.destroy).not.toHaveBeenCalled();
+
+    vi.runAllTimers();
+    expect(instance.destroy).toHaveBeenCalledOnce();
+  });
+
+  it('does not destroy in StrictMode double-mount', () => {
+    const instance = { destroy: vi.fn() };
+
+    function TestComponent() {
+      useDestroy(instance);
+      return null;
+    }
+
+    render(
+      <StrictMode>
+        <TestComponent />
+      </StrictMode>
+    );
+
+    vi.runAllTimers();
+
+    // StrictMode runs cleanup then re-mount — destroy should be cancelled
+    expect(instance.destroy).not.toHaveBeenCalled();
+  });
+
+  it('destroys after real unmount in StrictMode', () => {
+    const instance = { destroy: vi.fn() };
+
+    function TestComponent() {
+      useDestroy(instance);
+      return null;
+    }
+
+    const { unmount } = render(
+      <StrictMode>
+        <TestComponent />
+      </StrictMode>
+    );
+
+    vi.runAllTimers();
+    expect(instance.destroy).not.toHaveBeenCalled();
+
+    unmount();
+    vi.runAllTimers();
+
+    expect(instance.destroy).toHaveBeenCalledOnce();
+  });
+
+  it('calls setup once on mount', () => {
+    const instance = { destroy: vi.fn() };
+    const setup = vi.fn();
+
+    renderHook(() => useDestroy(instance, setup));
+
+    expect(setup).toHaveBeenCalledOnce();
+  });
+
+  it('calls setup once in StrictMode (skips re-mount)', () => {
+    const instance = { destroy: vi.fn() };
+    const setup = vi.fn();
+
+    function TestComponent() {
+      useDestroy(instance, setup);
+      return null;
+    }
+
+    render(
+      <StrictMode>
+        <TestComponent />
+      </StrictMode>
+    );
+
+    // Setup should only run once — the re-mount skips it
+    expect(setup).toHaveBeenCalledOnce();
+  });
+});

packages/react/src/utils/use-destroy.ts

@@ -0,0 +1,36 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+interface Destroyable {
+  destroy(): void;
+}
+
+/**
+ * Destroy an instance on unmount, deferring destruction to survive React
+ * StrictMode's simulated unmount/re-mount cycle.
+ *
+ * StrictMode runs effects, then immediately runs cleanup, then re-runs
+ * effects — all synchronously. By deferring `destroy()` to a macrotask,
+ * the re-mount effect can cancel it before it fires.
+ *
+ * @param instance - Object with a `destroy()` method.
+ * @param setup - Optional setup called on first mount. Skipped on StrictMode
+ *   re-mount since the previous setup was never torn down.
+ */
+export function useDestroy(instance: Destroyable, setup?: () => void): void {
+  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (pendingRef.current !== null) {
+      clearTimeout(pendingRef.current);
+      pendingRef.current = null;
+    } else {
+      setup?.();
+    }
+
+    return () => {
+      pendingRef.current = setTimeout(() => instance.destroy(), 0);
+    };
+  }, [instance, setup]);
+}