@assistant-ui/tap 0.3.6 → 0.4.2

package/src/__tests__/strictmode/react-strictmode-rerender-sources.test.tsx

@@ -0,0 +1,392 @@
+/**
+ * Tests to verify when React strict mode causes double-rendering
+ * for different sources of setState calls
+ */
+
+import { describe, it, expect } from "vitest";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { StrictMode, useState, useEffect } from "react";
+
+describe("React Strict Mode - Rerender Sources", () => {
+  describe("Source 1: Initial render", () => {
+    it("should double-render on initial mount", () => {
+      const events: string[] = [];
+
+      function TestComponent() {
+        const [count] = useState(0);
+        events.push(`render count=${count}`);
+        return <div>{count}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      expect(events).toEqual(["render count=0", "render count=0"]);
+    });
+  });
+
+  describe("Source 2: setState in render", () => {
+    it("should handle setState during render", () => {
+      const events: string[] = [];
+
+      function TestComponent() {
+        const [count, setCount] = useState(0);
+        events.push(`render count=${count}`);
+
+        // setState during render (this pattern sets state once during initial render)
+        if (count === 0) {
+          setCount(1);
+        }
+
+        return <div>{count}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      // ACTUAL: setState during render only renders once with old value,
+      // then double-renders with new value
+      expect(events).toEqual([
+        "render count=0",
+        "render count=1",
+        "render count=1",
+      ]);
+    });
+  });
+
+  describe("Source 3: setState in useEffect", () => {
+    it("should double-render after setState in useEffect", () => {
+      const events: string[] = [];
+
+      function TestComponent() {
+        const [count, setCount] = useState(0);
+        events.push(`render count=${count}`);
+
+        useEffect(() => {
+          events.push(`effect count=${count}`);
+          if (count === 0) {
+            setCount(1);
+          }
+          return () => {
+            events.push(`cleanup count=${count}`);
+          };
+        }, [count]);
+
+        return <div>{count}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      expect(events).toEqual([
+        "render count=0",
+        "render count=0",
+        "effect count=0",
+        "cleanup count=0",
+        "effect count=0",
+        "render count=1",
+        "render count=1",
+        "cleanup count=0",
+        "effect count=1",
+      ]);
+    });
+  });
+
+  describe("Source 4: setState in event handler", () => {
+    it("should ALSO double-render after setState in event handler (React 19)", () => {
+      const events: string[] = [];
+
+      function TestComponent() {
+        const [count, setCount] = useState(0);
+        events.push(`render count=${count}`);
+
+        return (
+          <button
+            onClick={() => {
+              events.push("click");
+              setCount(count + 1);
+            }}
+          >
+            {count}
+          </button>
+        );
+      }
+
+      const { getByRole } = render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      // Initial render is double
+      expect(events).toEqual(["render count=0", "render count=0"]);
+
+      events.length = 0; // Clear events
+
+      // Click the button
+      fireEvent.click(getByRole("button"));
+
+      // ACTUAL: In React 19 strict mode, ALL renders are doubled!
+      // Even renders triggered by event handlers!
+      expect(events).toEqual(["click", "render count=1", "render count=1"]);
+    });
+
+    it("should double-render on ALL event handler clicks (React 19)", () => {
+      const events: string[] = [];
+
+      function TestComponent() {
+        const [count, setCount] = useState(0);
+        events.push(`render count=${count}`);
+
+        return (
+          <button
+            onClick={() => {
+              events.push("click");
+              setCount((c) => c + 1);
+            }}
+          >
+            {count}
+          </button>
+        );
+      }
+
+      const { getByRole } = render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      events.length = 0; // Clear initial renders
+
+      // Multiple clicks
+      fireEvent.click(getByRole("button"));
+      fireEvent.click(getByRole("button"));
+      fireEvent.click(getByRole("button"));
+
+      // ACTUAL: Each click causes DOUBLE render in React 19 strict mode
+      expect(events).toEqual([
+        "click",
+        "render count=1",
+        "render count=1",
+        "click",
+        "render count=2",
+        "render count=2",
+        "click",
+        "render count=3",
+        "render count=3",
+      ]);
+    });
+  });
+
+  describe("Source 5: setState in setTimeout", () => {
+    it("should double-render AND double-call setTimeout callback (React 19)", async () => {
+      const events: string[] = [];
+
+      function TestComponent() {
+        const [count, setCount] = useState(0);
+        events.push(`render count=${count}`);
+
+        useEffect(() => {
+          if (count === 0) {
+            setTimeout(() => {
+              events.push("setTimeout");
+              setCount(1);
+            }, 10);
+          }
+        }, [count]);
+
+        return <div>{count}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      // Wait for setTimeout
+      await waitFor(() => {
+        expect(events).toContain("setTimeout");
+      });
+
+      // ACTUAL: setTimeout callback runs TWICE and renders are DOUBLED
+      expect(events).toEqual([
+        "render count=0",
+        "render count=0",
+        "setTimeout",
+        "setTimeout",
+        "render count=1",
+        "render count=1",
+      ]);
+    });
+  });
+
+  describe("Source 6: setState in Promise/async", () => {
+    it("should double-render AND double-call Promise callback (React 19)", async () => {
+      const events: string[] = [];
+
+      function TestComponent() {
+        const [count, setCount] = useState(0);
+        events.push(`render count=${count}`);
+
+        useEffect(() => {
+          if (count === 0) {
+            Promise.resolve().then(() => {
+              events.push("promise");
+              setCount(1);
+            });
+          }
+        }, [count]);
+
+        return <div>{count}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      // Wait for promise
+      await waitFor(() => {
+        expect(events).toContain("promise");
+      });
+
+      // ACTUAL: Promise callback runs TWICE and renders are DOUBLED
+      expect(events).toEqual([
+        "render count=0",
+        "render count=0",
+        "promise",
+        "promise",
+        "render count=1",
+        "render count=1",
+      ]);
+    });
+  });
+
+  describe("Source 7: Multiple setState calls", () => {
+    it("should batch multiple setState calls in event handlers (single render)", () => {
+      const events: string[] = [];
+
+      function TestComponent() {
+        const [count1, setCount1] = useState(0);
+        const [count2, setCount2] = useState(0);
+        events.push(`render count1=${count1} count2=${count2}`);
+
+        return (
+          <button
+            onClick={() => {
+              events.push("click");
+              setCount1(1);
+              setCount2(2);
+            }}
+          >
+            Click
+          </button>
+        );
+      }
+
+      const { getByRole } = render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      events.length = 0; // Clear initial renders
+
+      fireEvent.click(getByRole("button"));
+
+      // ACTUAL: Both setState calls batched, but render is DOUBLED
+      expect(events).toEqual([
+        "click",
+        "render count1=1 count2=2",
+        "render count1=1 count2=2",
+      ]);
+    });
+
+    it("should batch multiple setState calls in useEffect (single double-render)", () => {
+      const events: string[] = [];
+
+      function TestComponent() {
+        const [count1, setCount1] = useState(0);
+        const [count2, setCount2] = useState(0);
+        events.push(`render count1=${count1} count2=${count2}`);
+
+        useEffect(() => {
+          if (count1 === 0 && count2 === 0) {
+            setCount1(1);
+            setCount2(2);
+          }
+        }, [count1, count2]);
+
+        return <div>Test</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      // Initial double-render, then batched setState causes another double-render
+      expect(events).toEqual([
+        "render count1=0 count2=0",
+        "render count1=0 count2=0",
+        "render count1=1 count2=2",
+        "render count1=1 count2=2",
+      ]);
+    });
+  });
+
+  describe("Source 8: setState in useLayoutEffect", () => {
+    it("should double-render after setState in useLayoutEffect", () => {
+      const events: string[] = [];
+      const { useLayoutEffect } = require("react");
+
+      function TestComponent() {
+        const [count, setCount] = useState(0);
+        events.push(`render count=${count}`);
+
+        useLayoutEffect(() => {
+          events.push(`layoutEffect count=${count}`);
+          if (count === 0) {
+            setCount(1);
+          }
+          return () => {
+            events.push(`layoutCleanup count=${count}`);
+          };
+        }, [count]);
+
+        return <div>{count}</div>;
+      }
+
+      render(
+        <StrictMode>
+          <TestComponent />
+        </StrictMode>,
+      );
+
+      // useLayoutEffect runs synchronously after render, before paint
+      expect(events).toEqual([
+        "render count=0",
+        "render count=0",
+        "layoutEffect count=0",
+        "layoutCleanup count=0",
+        "layoutEffect count=0",
+        "render count=1",
+        "render count=1",
+        "layoutCleanup count=0",
+        "layoutEffect count=1",
+      ]);
+    });
+  });
+});

package/src/__tests__/strictmode/strictmode.test.ts

@@ -0,0 +1,274 @@
+import { describe, it, expect } from "vitest";
+import { resource } from "../../core/resource";
+import { isDevelopment } from "../../core/env";
+import { tapRef } from "../../hooks/tap-ref";
+import { tapState } from "../../hooks/tap-state";
+import { tapEffect } from "../../hooks/tap-effect";
+import { tapResource } from "../../hooks/tap-resource";
+import { createResource } from "../../core/createResource";
+import { withKey } from "../../core/withKey";
+
+describe("Strict Mode", () => {
+  it("should be in development", () => {
+    expect(isDevelopment).toBe(true);
+  });
+
+  it("should double-render on first render", () => {
+    let renderCount = 0;
+
+    const TestResource = resource(() => {
+      renderCount++;
+      return { renderCount };
+    });
+
+    const handle = createResource(TestResource(), { devStrictMode: true });
+    const output = handle.getValue();
+
+    expect(renderCount).toBe(2);
+    expect(output.renderCount).toBe(2);
+  });
+
+  it("should double-call hook fns", () => {
+    let renderCount = 0;
+
+    const TestResource = resource(() => {
+      const ref = tapRef(0);
+      const [count] = tapState(() => {
+        renderCount++;
+        return ++ref.current;
+      });
+      const [count2] = tapState(() => {
+        renderCount++;
+        return ++ref.current;
+      });
+
+      expect(count).toBe(1);
+      expect(count2).toBe(3);
+      expect(ref.current).toBe(4);
+    });
+
+    createResource(TestResource(), { devStrictMode: true });
+
+    expect(renderCount).toBe(4);
+  });
+
+  it("should double-commit effects", () => {
+    const events: string[] = [];
+    const TestResource = resource(() => {
+      const ref = tapRef(0);
+      ref.current++;
+      const count = ref.current;
+
+      tapEffect(() => {
+        events.push("mount-1");
+
+        return () => {
+          events.push("unmount-1");
+        };
+      });
+
+      tapEffect(() => {
+        events.push("mount-2");
+
+        return () => {
+          events.push("unmount-2");
+        };
+      }, []);
+
+      tapEffect(() => {
+        expect(count).toBe(2);
+
+        events.push("mount-3");
+
+        return () => {
+          events.push("unmount-3");
+        };
+      }, [count]);
+    });
+
+    createResource(TestResource(), { devStrictMode: true });
+
+    expect(events).toEqual([
+      "mount-1",
+      "mount-2",
+      "mount-3",
+      "unmount-1",
+      "unmount-2",
+      "unmount-3",
+      "mount-1",
+      "mount-2",
+      "mount-3",
+    ]);
+  });
+
+  it("should double-render on child render", () => {
+    let renderCount = 0;
+
+    const TestChildResource = resource(() => {
+      renderCount++;
+      return { renderCount };
+    });
+
+    const TestResource = resource(() => {
+      return tapResource(TestChildResource());
+    });
+
+    const handle = createResource(TestResource(), { devStrictMode: true });
+    const output = handle.getValue();
+
+    expect(renderCount).toBe(2);
+    expect(output.renderCount).toBe(2);
+  });
+
+  it("should double-mount before handling state updates", () => {
+    const events: string[] = [];
+    const TestResource = resource(() => {
+      const [id, setId] = tapState(0);
+      events.push(`render-${id}`);
+      tapEffect(() => {
+        events.push(`mount-${id}`);
+        setId(1);
+        return () => {
+          events.push(`unmount-${id}`);
+        };
+      });
+    });
+
+    createResource(TestResource(), {
+      mount: true,
+      devStrictMode: true,
+    });
+
+    expect(events).toEqual([
+      "render-0",
+      "render-0",
+      "mount-0",
+      "unmount-0",
+      "mount-0",
+      "render-1",
+      "render-1",
+      "unmount-0",
+      "mount-1",
+    ]);
+  });
+
+  it("should double-render on child render change", () => {
+    let renderCount = 0;
+    let fnCount = 0;
+    let mountCount = 0;
+    let unmountCount = 0;
+
+    const incrementRenderCount = () => {
+      renderCount++;
+      return renderCount;
+    };
+
+    const TestChildResource = resource(() => {
+      const [fnState] = tapState(() => {
+        fnCount++;
+        return fnCount;
+      });
+      const count = incrementRenderCount();
+      tapEffect(() => {
+        expect(fnState % 2).toBe(1);
+        expect(count).toBe(fnState + 1);
+
+        mountCount++;
+        return () => {
+          unmountCount++;
+        };
+      }, [fnState, count]);
+      return { renderCount, fnCount, fnState };
+    });
+
+    const TestResource = resource(() => {
+      const [id, setId] = tapState(0);
+      tapEffect(() => {
+        setId(1);
+      });
+      return tapResource(withKey(id, TestChildResource()));
+    });
+
+    const handle = createResource(TestResource(), {
+      mount: true,
+      devStrictMode: true,
+    });
+    const output = handle.getValue();
+
+    expect(renderCount).toBe(4);
+    expect(fnCount).toBe(4);
+    expect(output.renderCount).toBe(4);
+    expect(output.fnCount).toBe(4);
+    expect(output.fnState).toBe(3);
+    expect(mountCount).toBe(4);
+    expect(unmountCount).toBe(3);
+  });
+
+  it("should double-render on child render change", () => {
+    let renderCount = 0;
+    const events: string[] = [];
+    const TestChildResource = resource(() => {
+      renderCount++;
+      events.push(`render-${renderCount}`);
+
+      tapState(() => {
+        return events.push(`fn-${renderCount}`);
+      });
+
+      const count = renderCount;
+      tapEffect(() => {
+        events.push(`mount-${count}`);
+        return () => {
+          events.push(`unmount-${count}`);
+        };
+      });
+    });
+
+    const TestResource = resource(() => {
+      const [id, setId] = tapState(0);
+      events.push(`outer-render-${id}`);
+      tapEffect(() => {
+        events.push(`outer-mount-${id}`);
+        setId(1);
+
+        return () => {
+          events.push(`outer-unmount-${id}`);
+        };
+      });
+      return tapResource(withKey(id, TestChildResource()));
+    });
+
+    createResource(TestResource(), {
+      mount: true,
+      devStrictMode: true,
+    });
+
+    expect(events).toEqual([
+      "outer-render-0",
+      "render-1",
+      "fn-1",
+      "fn-1",
+      "outer-render-0",
+      "render-2",
+      "outer-mount-0",
+      "mount-2",
+      "outer-unmount-0",
+      "unmount-2",
+      "outer-mount-0",
+      "mount-2",
+      "outer-render-1",
+      "render-3",
+      "fn-3",
+      "fn-3",
+      "outer-render-1",
+      "render-4",
+      "outer-unmount-0",
+      "outer-mount-1",
+      "unmount-2",
+      "mount-4",
+      "unmount-4",
+      "mount-4",
+    ]);
+    // expect(renderCount).toBe(4);
+  });
+});