@preact/signals-react 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@preact/signals-react",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "license": "MIT",
   "description": "Manage state with style in React",
   "keywords": [],
@@ -39,7 +39,7 @@
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
-    "react": "17.x || 18.x"
+    "react": "^16.14.0 || 17.x || 18.x"
   },
   "devDependencies": {
     "@types/react": "^18.0.18",

package/src/index.ts

@@ -6,8 +6,6 @@ import {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED as ReactInternals,
 	type ReactElement,
-	type useCallback,
-	type useReducer,
 } from "react";
 import React from "react";
 import jsxRuntime from "react/jsx-runtime";
@@ -20,7 +18,7 @@ import {
 	Signal,
 	type ReadonlySignal,
 } from "@preact/signals-core";
-import { useSyncExternalStore } from "use-sync-external-store/shim/index";
+import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 import type { Effect, JsxRuntimeModule } from "./internal";
 
 export { signal, computed, batch, effect, Signal, type ReadonlySignal };
@@ -29,10 +27,12 @@ const Empty = [] as const;
 const ReactElemType = Symbol.for("react.element"); // https://github.com/facebook/react/blob/346c7d4c43a0717302d446da9e7423a8e28d8996/packages/shared/ReactSymbols.js#L15
 
 interface ReactDispatcher {
-	useRef: typeof useRef;
-	useCallback: typeof useCallback;
-	useReducer: typeof useReducer;
-	useSyncExternalStore: typeof useSyncExternalStore;
+	useRef: typeof React.useRef;
+	useCallback: typeof React.useCallback;
+	useReducer: typeof React.useReducer;
+	useSyncExternalStore: typeof React.useSyncExternalStore;
+	useEffect: typeof React.useEffect;
+	useImperativeHandle: typeof React.useImperativeHandle;
 }
 
 let finishUpdate: (() => void) | undefined;
@@ -60,7 +60,7 @@ interface EffectStore {
  * we update our store version and tell React to re-render the component ([1] We don't really care when/how React does it).
  *
  * [1]
- * @see https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore
+ * @see https://react.dev/reference/react/useSyncExternalStore
  * @see https://github.com/reactjs/rfcs/blob/main/text/0214-use-sync-external-store.md
  */
 function createEffectStore(): EffectStore {
@@ -119,21 +119,27 @@ function usePreactSignalStore(nextDispatcher: ReactDispatcher): EffectStore {
 	return store;
 }
 
+// In order for signals to work in React, we need to observe what signals a
+// component uses while rendering. To do this, we need to know when a component
+// is rendering. To do this, we watch the transition of the
+// ReactCurrentDispatcher to know when a component is rerendering.
+//
 // To track when we are entering and exiting a component render (i.e. before and
 // after React renders a component), we track how the dispatcher changes.
 // Outside of a component rendering, the dispatcher is set to an instance that
 // errors or warns when any hooks are called. This behavior is prevents hooks
 // from being used outside of components. Right before React renders a
-// component, the dispatcher is set to a valid one. Right after React finishes
-// rendering a component, the dispatcher is set to an erroring one again. This
+// component, the dispatcher is set to an instance that doesn't warn or error
+// and contains the implementations of all hooks. Right after React finishes
+// rendering a component, the dispatcher is set to the erroring one again. This
 // erroring dispatcher is called the `ContextOnlyDispatcher` in React's source.
 //
 // So, we watch the getter and setter on `ReactCurrentDispatcher.current` to
 // monitor the changes to the current ReactDispatcher. When the dispatcher
-// changes from the ContextOnlyDispatcher to a valid dispatcher, we assume we
+// changes from the ContextOnlyDispatcher to a "valid" dispatcher, we assume we
 // are entering a component render. At this point, we setup our
 // auto-subscriptions for any signals used in the component. We do this by
-// creating an effect and manually starting the effect. We use
+// creating an Signal effect and manually starting the Signal effect. We use
 // `useSyncExternalStore` to trigger rerenders on the component when any signals
 // it uses changes.
 //
@@ -141,10 +147,16 @@ function usePreactSignalStore(nextDispatcher: ReactDispatcher): EffectStore {
 // ContextOnlyDispatcher, we assume we are exiting a component render. At this
 // point we stop the effect.
 //
-// Some edge cases to be aware of:
-// - In development, useReducer, useState, and useMemo changes the dispatcher to
-//   a different erroring dispatcher before invoking the reducer and resets it
-//   right after.
+// Some additional complexities to be aware of:
+// - If a component calls `setState` while rendering, React will re-render the
+//   component immediately. Before triggering the re-render, React will change
+//   the dispatcher to the HooksDispatcherOnRerender. When we transition to this
+//   rerendering adapter, we need to re-trigger our hooks to keep the order of
+//   hooks the same for every render of a component.
+//
+// - In development, useReducer, useState, and useMemo change the dispatcher to
+//   a different warning dispatcher (not ContextOnlyDispatcher) before invoking
+//   the reducer and resets it right after.
 //
 //   The useSyncExternalStore shim will use some of these hooks when we invoke
 //   it while entering a component render. We need to prevent this dispatcher
@@ -153,15 +165,89 @@ function usePreactSignalStore(nextDispatcher: ReactDispatcher): EffectStore {
 //   prevent the setter from running while we are in the setter.
 //
 //   When a Component's function body invokes useReducer, useState, or useMemo,
-//   this change in dispatcher should not signal that we are exiting a component
-//   render. We ignore this change by detecting these dispatchers as different
-//   from ContextOnlyDispatcher and other valid dispatchers.
+//   this change in dispatcher should not signal that we are entering or exiting
+//   a component render. We ignore this change by detecting these dispatchers as
+//   different from ContextOnlyDispatcher and other valid dispatchers.
 //
 // - The `use` hook will change the dispatcher to from a valid update dispatcher
 //   to a valid mount dispatcher in some cases. Similarly to useReducer
 //   mentioned above, we should not signal that we are exiting a component
 //   during this change. Because these other valid dispatchers do not pass the
 //   ContextOnlyDispatcher check, they do not affect our logic.
+//
+// - When server rendering, React does not change the dispatcher before and
+//   after each component render. It sets it once for before the first render
+//   and once for after the last render. This means that we will not be able to
+//   detect when we are entering or exiting a component render. This is fine
+//   because we don't need to detect this for server rendering. A component
+//   can't trigger async rerenders in SSR so we don't need to track signals.
+//
+//   If a component updates a signal value while rendering during SSR, we will
+//   not rerender the component because the signal value will synchronously
+//   change so all reads of the signal further down the tree will see the new
+//   value.
+
+/*
+Below is a state machine definition for transitions between the various
+dispatchers in React's prod build. (It does not include dev time warning
+dispatchers which are just always ignored).
+
+ENTER and EXIT suffixes indicates whether this ReactCurrentDispatcher transition
+signals we are entering or exiting a component render, or if it doesn't signal a
+change in the component rendering lifecyle (NOOP).
+
+```js
+// Paste this into https://stately.ai/viz to visualize the state machine.
+import { createMachine } from "xstate";
+
+// ENTER, EXIT, NOOP suffixes indicates whether this ReactCurrentDispatcher
+// transition signals we are entering or exiting a component render, or
+// if it doesn't signal a change in the component rendering lifecyle (NOOP).
+
+const dispatcherMachinePROD = createMachine({
+  id: "ReactCurrentDispatcher_PROD",
+  initial: "null",
+  states: {
+    null: {
+      on: {
+        pushDispatcher: "ContextOnlyDispatcher",
+      },
+    },
+    ContextOnlyDispatcher: {
+      on: {
+        renderWithHooks_Mount_ENTER: "HooksDispatcherOnMount",
+        renderWithHooks_Update_ENTER: "HooksDispatcherOnUpdate",
+        pushDispatcher_NOOP: "ContextOnlyDispatcher",
+        popDispatcher_NOOP: "ContextOnlyDispatcher",
+      },
+    },
+    HooksDispatcherOnMount: {
+      on: {
+        renderWithHooksAgain_ENTER: "HooksDispatcherOnRerender",
+        resetHooksAfterThrow_EXIT: "ContextOnlyDispatcher",
+        finishRenderingHooks_EXIT: "ContextOnlyDispatcher",
+      },
+    },
+    HooksDispatcherOnUpdate: {
+      on: {
+        renderWithHooksAgain_ENTER: "HooksDispatcherOnRerender",
+        resetHooksAfterThrow_EXIT: "ContextOnlyDispatcher",
+        finishRenderingHooks_EXIT: "ContextOnlyDispatcher",
+        use_ResumeSuspensedMount_NOOP: "HooksDispatcherOnMount",
+      },
+    },
+    HooksDispatcherOnRerender: {
+      on: {
+        renderWithHooksAgain_ENTER: "HooksDispatcherOnRerender",
+        resetHooksAfterThrow_EXIT: "ContextOnlyDispatcher",
+        finishRenderingHooks_EXIT: "ContextOnlyDispatcher",
+      },
+    },
+  },
+});
+```
+*/
+
 let lock = false;
 let currentDispatcher: ReactDispatcher | null = null;
 Object.defineProperty(ReactInternals.ReactCurrentDispatcher, "current", {
@@ -177,42 +263,35 @@ Object.defineProperty(ReactInternals.ReactCurrentDispatcher, "current", {
 		const currentDispatcherType = getDispatcherType(currentDispatcher);
 		const nextDispatcherType = getDispatcherType(nextDispatcher);
 
-		// We are entering a component render if the current dispatcher is the
-		// ContextOnlyDispatcher and the next dispatcher is a valid dispatcher.
-		const isEnteringComponentRender =
-			currentDispatcherType === ContextOnlyDispatcherType &&
-			nextDispatcherType === ValidDispatcherType;
-
-		// We are exiting a component render if the current dispatcher is a valid
-		// dispatcher and the next dispatcher is the ContextOnlyDispatcher.
-		const isExitingComponentRender =
-			currentDispatcherType === ValidDispatcherType &&
-			nextDispatcherType === ContextOnlyDispatcherType;
-
 		// Update the current dispatcher now so the hooks inside of the
 		// useSyncExternalStore shim get the right dispatcher.
 		currentDispatcher = nextDispatcher;
-		if (isEnteringComponentRender) {
+		if (isEnteringComponentRender(currentDispatcherType, nextDispatcherType)) {
 			lock = true;
 			const store = usePreactSignalStore(nextDispatcher);
 			lock = false;
 
 			setCurrentUpdater(store.updater);
-		} else if (isExitingComponentRender) {
+		} else if (
+			isExitingComponentRender(currentDispatcherType, nextDispatcherType)
+		) {
 			setCurrentUpdater();
 		}
 	},
 });
 
-const ValidDispatcherType = 0;
-const ContextOnlyDispatcherType = 1;
-const ErroringDispatcherType = 2;
-
-// We inject a useSyncExternalStore into every function component via
-// CurrentDispatcher. This prevents injecting into anything other than a
-// function component render.
-const dispatcherTypeCache = new Map<ReactDispatcher, number>();
-function getDispatcherType(dispatcher: ReactDispatcher | null): number {
+type DispatcherType = number;
+const ContextOnlyDispatcherType = 1 << 0;
+const WarningDispatcherType = 1 << 1;
+const MountDispatcherType = 1 << 2;
+const UpdateDispatcherType = 1 << 3;
+const RerenderDispatcherType = 1 << 4;
+const ServerDispatcherType = 1 << 5;
+const BrowserClientDispatcherType =
+	MountDispatcherType | UpdateDispatcherType | RerenderDispatcherType;
+
+const dispatcherTypeCache = new Map<ReactDispatcher, DispatcherType>();
+function getDispatcherType(dispatcher: ReactDispatcher | null): DispatcherType {
 	// Treat null the same as the ContextOnlyDispatcher.
 	if (!dispatcher) return ContextOnlyDispatcherType;
 
@@ -220,23 +299,134 @@ function getDispatcherType(dispatcher: ReactDispatcher | null): number {
 	if (cached !== undefined) return cached;
 
 	// The ContextOnlyDispatcher sets all the hook implementations to a function
-	// that takes no arguments and throws and error. Check the number of arguments
-	// for this dispatcher's useCallback implementation to determine if it is a
-	// ContextOnlyDispatcher. All other dispatchers, erroring or not, define
-	// functions with arguments and so fail this check.
-	let type: number;
-	if (dispatcher.useCallback.length < 2) {
+	// that takes no arguments and throws and error. This dispatcher is the only
+	// dispatcher where useReducer and useEffect will have the same
+	// implementation.
+	let type: DispatcherType;
+	const useCallbackImpl = dispatcher.useCallback.toString();
+	if (dispatcher.useReducer === dispatcher.useEffect) {
 		type = ContextOnlyDispatcherType;
-	} else if (/Invalid/.test(dispatcher.useCallback as any)) {
-		type = ErroringDispatcherType;
+
+		// @ts-expect-error When server rendering, useEffect and useImperativeHandle
+		// are both set to noop functions and so have the same implementation.
+	} else if (dispatcher.useEffect === dispatcher.useImperativeHandle) {
+		type = ServerDispatcherType;
+	} else if (/Invalid/.test(useCallbackImpl)) {
+		// We first check for warning dispatchers because they would also pass some
+		// of the checks below.
+		type = WarningDispatcherType;
+	} else if (
+		// The development mount dispatcher invokes a function called
+		// `mountCallback` whereas the development update/re-render dispatcher
+		// invokes a function called `updateCallback`. Use that difference to
+		// determine if we are in a mount or update-like dispatcher in development.
+		// The production mount dispatcher defines an array of the form [callback,
+		// deps] whereas update/re-render dispatchers read the array using array
+		// indices (e.g. `[0]` and `[1]`). Use those differences to determine if we
+		// are in a mount or update-like dispatcher in production.
+		/updateCallback/.test(useCallbackImpl) ||
+		(/\[0\]/.test(useCallbackImpl) && /\[1\]/.test(useCallbackImpl))
+	) {
+		// The update and rerender dispatchers have different implementations for
+		// useReducer. We'll check it's implementation to determine if this is the
+		// rerender or update dispatcher.
+		let useReducerImpl = dispatcher.useReducer.toString();
+		if (
+			// The development rerender dispatcher invokes a function called
+			// `rerenderReducer` whereas the update dispatcher invokes a function
+			// called `updateReducer`. The production rerender dispatcher returns an
+			// array of the form `[state, dispatch]` whereas the update dispatcher
+			// returns an array of `[fiber.memoizedState, dispatch]` so we check the
+			// return statement in the implementation of useReducer to differentiate
+			// between the two.
+			/rerenderReducer/.test(useReducerImpl) ||
+			/return\s*\[\w+,/.test(useReducerImpl)
+		) {
+			type = RerenderDispatcherType;
+		} else {
+			type = UpdateDispatcherType;
+		}
 	} else {
-		type = ValidDispatcherType;
+		type = MountDispatcherType;
 	}
 
 	dispatcherTypeCache.set(dispatcher, type);
 	return type;
 }
 
+function isEnteringComponentRender(
+	currentDispatcherType: DispatcherType,
+	nextDispatcherType: DispatcherType
+): boolean {
+	if (
+		currentDispatcherType & ContextOnlyDispatcherType &&
+		nextDispatcherType & BrowserClientDispatcherType
+	) {
+		// ## Mount or update (ContextOnlyDispatcher -> ValidDispatcher (Mount or Update))
+		//
+		// If the current dispatcher is the ContextOnlyDispatcher and the next
+		// dispatcher is a valid dispatcher, we are entering a component render.
+		return true;
+	} else if (
+		currentDispatcherType & WarningDispatcherType ||
+		nextDispatcherType & WarningDispatcherType
+	) {
+		// ## Warning dispatcher
+		//
+		// If the current dispatcher or next dispatcher is an warning dispatcher,
+		// we are not entering a component render. The current warning dispatchers
+		// are used to warn when hooks are nested improperly and do not indicate
+		// entering a new component render.
+		return false;
+	} else if (nextDispatcherType & RerenderDispatcherType) {
+		// Any transition into the rerender dispatcher is the beginning of a
+		// component render, so we should invoke our hooks. Details below.
+		//
+		// ## In-place rerendering (e.g. Mount -> Rerender)
+		//
+		// If we are transitioning from the mount, update, or rerender dispatcher to
+		// the rerender dispatcher (e.g. HooksDispatcherOnMount to
+		// HooksDispatcherOnRerender), then this component is rerendering due to
+		// calling setState inside of its function body. We are re-entering a
+		// component's render method and so we should re-invoke our hooks.
+		return true;
+	} else {
+		// ## Resuming suspended mount edge case (Update -> Mount)
+		//
+		// If we are transitioning from the update dispatcher to the mount
+		// dispatcher, then this component is using the `use` hook and is resuming
+		// from a mount. We should not re-invoke our hooks in this situation since
+		// we are not entering a new component render, but instead continuing a
+		// previous render.
+		//
+		// ## Other transitions
+		//
+		// For example, Mount -> Mount, Update -> Update, Mount -> Update, any
+		// transition in and out of invalid dispatchers.
+		//
+		// There is no known transition for the following transitions so we default
+		// to not triggering a re-enter of the component.
+		// - HooksDispatcherOnMount  -> HooksDispatcherOnMount
+		// - HooksDispatcherOnMount  -> HooksDispatcherOnUpdate
+		// - HooksDispatcherOnUpdate -> HooksDispatcherOnUpdate
+		return false;
+	}
+}
+
+/**
+ * We are exiting a component render if the current dispatcher is a valid
+ * dispatcher and the next dispatcher is the ContextOnlyDispatcher.
+ */
+function isExitingComponentRender(
+	currentDispatcherType: DispatcherType,
+	nextDispatcherType: DispatcherType
+): boolean {
+	return Boolean(
+		currentDispatcherType & BrowserClientDispatcherType &&
+			nextDispatcherType & ContextOnlyDispatcherType
+	);
+}
+
 function WrapJsx<T>(jsx: T): T {
 	if (typeof jsx !== "function") return jsx;
 

package/test/browser/mounts.test.tsx

@@ -0,0 +1,32 @@
+import { mountSignalsTests } from "../shared/mounting";
+import {
+	Root,
+	createRoot,
+	act,
+	getConsoleErrorSpy,
+	checkConsoleErrorLogs,
+} from "../shared/utils";
+
+describe("@preact/signals-react mounting", () => {
+	let scratch: HTMLDivElement;
+	let root: Root;
+
+	async function render(element: JSX.Element | null): Promise<string> {
+		await act(() => root.render(element));
+		return scratch.innerHTML;
+	}
+
+	beforeEach(async () => {
+		scratch = document.createElement("div");
+		document.body.appendChild(scratch);
+		root = await createRoot(scratch);
+		getConsoleErrorSpy().resetHistory();
+	});
+
+	afterEach(async () => {
+		scratch.remove();
+		checkConsoleErrorLogs();
+	});
+
+	mountSignalsTests(render);
+});

package/test/{react-router.test.tsx → browser/react-router.test.tsx}

@@ -3,9 +3,23 @@ globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
 import { signal } from "@preact/signals-react";
 import { createElement } from "react";
-import { Route, Routes, MemoryRouter } from "react-router-dom";
-
-import { act, checkHangingAct, createRoot, Root } from "./utils";
+import * as ReactRouter from "react-router-dom";
+
+import { act, checkHangingAct, createRoot, Root } from "../shared/utils";
+
+const MemoryRouter = ReactRouter.MemoryRouter;
+const Routes = ReactRouter.Routes
+	? ReactRouter.Routes
+	: (ReactRouter as any).Switch; // react-router-dom v5
+
+// @ts-expect-error We are doing a check for react-router-dom v5 vs v6 here, so
+// while TS thinks ReactRouter.Routes will always be here, it isn't in v5.
+const Route = ReactRouter.Routes
+	? ReactRouter.Route
+	: // react-router-dom v5 requires the element prop to be passed as children.
+	  ({ element, ...props }: any) => (
+			<ReactRouter.Route {...props}>{element}</ReactRouter.Route>
+	  );
 
 describe("@preact/signals-react", () => {
 	let scratch: HTMLDivElement;

package/test/{index.test.tsx → browser/updates.test.tsx}

@@ -16,12 +16,24 @@ import {
 	memo,
 	StrictMode,
 	createRef,
+	useState,
+	useContext,
+	createContext,
 } from "react";
 
 import { renderToStaticMarkup } from "react-dom/server";
-import { createRoot, Root, act, checkHangingAct } from "./utils";
-
-describe("@preact/signals-react", () => {
+import {
+	createRoot,
+	Root,
+	act,
+	checkHangingAct,
+	isReact16,
+	isProd,
+	getConsoleErrorSpy,
+	checkConsoleErrorLogs,
+} from "../shared/utils";
+
+describe("@preact/signals-react updating", () => {
 	let scratch: HTMLDivElement;
 	let root: Root;
 
@@ -33,12 +45,15 @@ describe("@preact/signals-react", () => {
 		scratch = document.createElement("div");
 		document.body.appendChild(scratch);
 		root = await createRoot(scratch);
+		getConsoleErrorSpy().resetHistory();
 	});
 
 	afterEach(async () => {
-		checkHangingAct();
 		await act(() => root.unmount());
 		scratch.remove();
+
+		checkConsoleErrorLogs();
+		checkHangingAct();
 	});
 
 	describe("Text bindings", () => {
@@ -323,6 +338,102 @@ describe("@preact/signals-react", () => {
 				`<pre><code>-1</code><code>${count.value * 2}</code></pre>`
 			);
 		});
+
+		it("should not fail when a component calls setState while rendering", async () => {
+			let increment: () => void;
+			function App() {
+				const [state, setState] = useState(0);
+				increment = () => setState(state + 1);
+
+				if (state > 0 && state < 2) {
+					setState(state + 1);
+				}
+
+				return <div>{state}</div>;
+			}
+
+			await render(<App />);
+			expect(scratch.innerHTML).to.equal("<div>0</div>");
+
+			await act(() => {
+				increment();
+			});
+			expect(scratch.innerHTML).to.equal("<div>2</div>");
+		});
+
+		it("should not fail when a component calls setState multiple times while rendering", async () => {
+			let increment: () => void;
+			function App() {
+				const [state, setState] = useState(0);
+				increment = () => setState(state + 1);
+
+				if (state > 0 && state < 5) {
+					setState(state + 1);
+				}
+
+				return <div>{state}</div>;
+			}
+
+			await render(<App />);
+			expect(scratch.innerHTML).to.equal("<div>0</div>");
+
+			await act(() => {
+				increment();
+			});
+			expect(scratch.innerHTML).to.equal("<div>5</div>");
+		});
+
+		it("should not fail when a component only uses state-less hooks", async () => {
+			// This test is suppose to trigger a condition in React where the
+			// HooksDispatcherOnMountWithHookTypesInDEV is used. This dispatcher is
+			// used in the development build of React if a component has hook types
+			// defined but no memoizedState, meaning no stateful hooks (e.g. useState)
+			// are used. `useContext` is an example of a state-less hook because it
+			// does not mount any hook state onto the fiber's memoizedState field.
+			//
+			// However, as of writing, because our react adapter inserts a
+			// useSyncExternalStore into all components, all components have memoized
+			// state and so this condition is never hit. However, I'm leaving the test
+			// to capture this unique behavior to hopefully catch any errors caused by
+			// not understanding or handling this in the future.
+
+			const sig = signal(0);
+			const MyContext = createContext(0);
+
+			function Child() {
+				const value = useContext(MyContext);
+				return (
+					<div>
+						{sig} {value}
+					</div>
+				);
+			}
+
+			let updateContext: () => void;
+			function App() {
+				const [value, setValue] = useState(0);
+				updateContext = () => setValue(value + 1);
+
+				return (
+					<MyContext.Provider value={value}>
+						<Child />
+					</MyContext.Provider>
+				);
+			}
+
+			await render(<App />);
+			expect(scratch.innerHTML).to.equal("<div>0 0</div>");
+
+			await act(() => {
+				sig.value++;
+			});
+			expect(scratch.innerHTML).to.equal("<div>1 0</div>");
+
+			await act(() => {
+				updateContext();
+			});
+			expect(scratch.innerHTML).to.equal("<div>1 1</div>");
+		});
 	});
 
 	describe("useSignal()", () => {
@@ -386,14 +497,17 @@ describe("@preact/signals-react", () => {
 
 			expect(scratch.textContent).to.equal("bar");
 
-			// NOTE: Ideally, call should receive "1" as its third argument!
-			// The "0" indicates that Preact's DOM mutations hadn't yet been performed when the callback ran.
-			// This happens because we do signal-based effect runs after the first, not VDOM.
-			// Perhaps we could find a way to defer the callback when it coincides with a render?
+			// NOTE: Ideally, call should receive "1" as its third argument! The "0"
+			// indicates that React's DOM mutations hadn't yet been performed when the
+			// callback ran. This happens because we do signal-based effect runs after
+			// the first, not VDOM. Perhaps we could find a way to defer the callback
+			// when it coincides with a render? In React 16 when running in production
+			// however, we do see "1" as expected, likely because we are using a fake
+			// act() implementation which completes after the DOM has been updated.
 			expect(spy).to.have.been.calledOnceWith(
 				"bar",
 				scratch.firstElementChild,
-				"0" // ideally "1" - update if we find a nice way to do so!
+				isReact16 && isProd ? "1" : "0" // ideally always "1" - update if we find a nice way to do so!
 			);
 		});
 
@@ -441,7 +555,7 @@ describe("@preact/signals-react", () => {
 			expect(spy).to.have.been.calledOnceWith(
 				"bar",
 				child,
-				"0" // ideally "1" - update if we find a nice way to do so!
+				isReact16 && isProd ? "1" : "0" // ideally always "1" - update if we find a nice way to do so!
 			);
 		});
 
@@ -469,14 +583,16 @@ describe("@preact/signals-react", () => {
 			expect(spy).to.have.been.calledOnceWith("foo", child);
 			spy.resetHistory();
 
-			await render(null);
+			await act(() => {
+				root.unmount();
+			});
 
 			expect(scratch.innerHTML).to.equal("");
 			expect(spy).not.to.have.been.called;
 			expect(cleanup).to.have.been.calledOnce;
-			// @note: React cleans up the ref eagerly, so it's already null by the time the callback runs.
-			// this is probably worth fixing at some point.
-			expect(cleanup).to.have.been.calledWith("foo", null);
+			// @note: React v18 cleans up the ref eagerly, so it's already null by the
+			// time the callback runs. this is probably worth fixing at some point.
+			expect(cleanup).to.have.been.calledWith("foo", isReact16 ? child : null);
 		});
 	});
 });