fix: type fixes

Author: AbhinRustagi

packages/react/package.json

@@ -31,6 +31,7 @@
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",

packages/react/src/hooks/useVolatileState.test.tsx

@@ -1,3 +1,4 @@
+import React, { Component, type ReactNode } from "react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, act, screen } from "@testing-library/react";
 import { VolatileProvider } from "../provider/VolatileProvider";
@@ -33,6 +34,23 @@ function renderWithProvider(ui: React.ReactElement, seed = 42) {
   );
 }
 
+class ErrorBoundary extends Component<
+  { children: ReactNode },
+  { error: boolean }
+> {
+  state = { error: false };
+  static getDerivedStateFromError() {
+    return { error: true };
+  }
+  render() {
+    return this.state.error ? (
+      <span data-testid="error">caught</span>
+    ) : (
+      this.props.children
+    );
+  }
+}
+
 describe("useVolatileState", () => {
   beforeEach(() => {
     vi.useFakeTimers();
@@ -92,23 +110,6 @@ describe("useVolatileState", () => {
       return <button onClick={() => setCount(count + 1)}>{count}</button>;
     }
 
-    class ErrorBoundary extends React.Component<
-      { children: React.ReactNode },
-      { error: boolean }
-    > {
-      state = { error: false };
-      static getDerivedStateFromError() {
-        return { error: true };
-      }
-      render() {
-        return this.state.error ? (
-          <span data-testid="error">caught</span>
-        ) : (
-          this.props.children
-        );
-      }
-    }
-
     renderWithProvider(
       <ErrorBoundary>
         <ErrorCounter />

packages/react/src/hooks/useVolatileState.ts

@@ -15,10 +15,16 @@ export function useVolatileState<T>(
 ): [T, React.Dispatch<React.SetStateAction<T>>] {
   const engine = useVolatileEngine();
   const [state, setState] = useState(initialState);
+  const [pendingError, setPendingError] = useState<VolatileError | null>(null);
   const delayTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const target = options.name ?? "useState";
   const component = options.component;
 
+  // Throw during render so ErrorBoundary can catch it
+  if (pendingError) {
+    throw pendingError;
+  }
+
   useEffect(() => {
     return () => {
       if (delayTimerRef.current) clearTimeout(delayTimerRef.current);
@@ -46,7 +52,8 @@ export function useVolatileState<T>(
           break;
         }
         case "error":
-          throw new VolatileError("state", "error", target, component);
+          setPendingError(new VolatileError("state", "error", target, component));
+          break;
         case "corrupt": {
           const resolvedValue =
             typeof action === "function"

packages/react/vitest.config.ts

@@ -4,5 +4,6 @@ export default defineConfig({
   test: {
     globals: true,
     environment: "jsdom",
+    setupFiles: ["./vitest.setup.ts"],
   },
 });

packages/react/vitest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";