@octanejs/redux 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dominic Gannaway
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@octanejs/redux",
+  "version": "0.1.0",
+  "license": "MIT",
+  "type": "module",
+  "description": "React Redux for the octane renderer — the Provider/hooks binding layer reimplemented on octane's useSyncExternalStore; works with any Redux store (Redux Toolkit included) by changing the import.",
+  "author": {
+    "name": "Dominic Gannaway",
+    "email": "dg@domgan.com"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/redux"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "octane": "0.1.3"
+  },
+  "peerDependencies": {
+    "redux": "^5.0.0"
+  },
+  "devDependencies": {
+    "@reduxjs/toolkit": "^2.9.0",
+    "@tsrx/react": "^0.2.37",
+    "esbuild": "^0.28.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-redux": "9.3.0",
+    "redux": "^5.0.1",
+    "vitest": "^4.1.9"
+  },
+  "scripts": {
+    "test": "vitest run"
+  }
+}

package/src/Context.ts

@@ -0,0 +1,33 @@
+// The default react-redux context — port of components/Context.ts. Upstream
+// dedupes the context instance across multiple copies of the module via a
+// globalThis map keyed by React's createContext; the same hazard exists under
+// Vite dev (duplicate module instances — see the repo's ?import lesson), so the
+// port keeps the mechanism with octane's createContext as the key.
+import { createContext } from 'octane';
+import type { Store, Action, UnknownAction } from 'redux';
+import type { Subscription } from './utils/Subscription';
+
+export interface ReactReduxContextValue<SS = any, A extends Action<string> = UnknownAction> {
+	store: Store<SS, A>;
+	subscription: Subscription;
+	getServerState?: () => SS;
+}
+
+// Namespaced for octane — the export NAME stays `ReactReduxContext` for
+// drop-in import compatibility, but the dedupe key (and everything else
+// non-public in this package) is octane-branded.
+const ContextKey = Symbol.for('octane-react-redux-context');
+const gT: any = typeof globalThis !== 'undefined' ? globalThis : {};
+
+function getContext() {
+	const contextMap: Map<typeof createContext, any> = (gT[ContextKey] ??= new Map());
+	let realContext = contextMap.get(createContext);
+	if (!realContext) {
+		realContext = createContext<ReactReduxContextValue | null>(null);
+		contextMap.set(createContext, realContext);
+	}
+	return realContext as ReturnType<typeof createContext<ReactReduxContextValue | null>>;
+}
+
+export const ReactReduxContext = getContext();
+export type ReactReduxContextInstance = typeof ReactReduxContext;

package/src/Provider.tsrx

@@ -0,0 +1,40 @@
+// Provider — port of react-redux's components/Provider.tsx. Builds the context
+// value ({ store, subscription, getServerState? }) once per store, wires the
+// subscription in a layout effect (subscribes to the store, re-notifies nested
+// subs if the state moved between render and effect), and supports the
+// `context` prop for library-owned stores (recharts-style custom contexts).
+import { useMemo, useLayoutEffect } from 'octane';
+import { ReactReduxContext } from './Context.ts';
+import { createSubscription } from './utils/Subscription.ts';
+
+export function Provider(props) @{
+	const { store, context, serverState, children } = props;
+
+	const contextValue = useMemo(() => {
+		const subscription = createSubscription(store);
+		return {
+			store,
+			subscription,
+			getServerState: serverState ? () => serverState : undefined,
+		};
+	}, [store, serverState]);
+
+	const previousState = useMemo(() => store.getState(), [store]);
+
+	useLayoutEffect(() => {
+		const { subscription } = contextValue;
+		subscription.onStateChange = subscription.notifyNestedSubs;
+		subscription.trySubscribe();
+		if (previousState !== store.getState()) {
+			subscription.notifyNestedSubs();
+		}
+		return () => {
+			subscription.tryUnsubscribe();
+			subscription.onStateChange = undefined;
+		};
+	}, [contextValue, previousState]);
+
+	const Context = context || ReactReduxContext;
+
+	<Context.Provider value={contextValue}>{children}</Context.Provider>
+}

package/src/Provider.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Type declaration for the .tsrx component (resolved by relative path).
+import type { Action, Store, UnknownAction } from 'redux';
+import type { ReactReduxContextInstance } from './Context';
+
+export declare const Provider: <A extends Action<string> = UnknownAction, S = unknown>(props: {
+	store: Store<S, A>;
+	children?: unknown;
+	context?: ReactReduxContextInstance | null;
+	serverState?: S;
+}) => unknown;

package/src/hooks.ts

@@ -0,0 +1,162 @@
+// The hooks layer — port of react-redux's hooks/{useReduxContext,useStore,
+// useDispatch,useSelector}.ts, including the context-parameterized factory
+// forms (createStoreHook/createDispatchHook/createSelectorHook) that libraries
+// use to run an isolated store on a custom context (recharts does exactly
+// this). Dev checks (missing selector / non-function equality / no Provider)
+// are kept; upstream's stability/identity-function dev warnings are kept in
+// their "once" form.
+import { useContext, useCallback, useRef } from 'octane';
+import type { Action, Store, UnknownAction } from 'redux';
+import { ReactReduxContext } from './Context';
+import type { ReactReduxContextValue } from './Context';
+import { useSyncExternalStoreWithSelector } from './utils/useSyncExternalStoreWithSelector';
+import { splitSlot, subSlot } from './internal';
+
+const refEquality = (a: unknown, b: unknown) => a === b;
+
+// useReduxContext — throws without a <Provider> (upstream parity). Context
+// reads are keyed by context identity in octane, so no slot is needed.
+export function createReduxContextHook(context = ReactReduxContext) {
+	return function useReduxContext(): ReactReduxContextValue {
+		const contextValue = useContext(context);
+		if (process.env.NODE_ENV !== 'production' && !contextValue) {
+			throw new Error(
+				'could not find @octanejs/redux context value; please ensure the component is wrapped in a <Provider>',
+			);
+		}
+		return contextValue as ReactReduxContextValue;
+	};
+}
+
+export const useReduxContext = /* @__PURE__ */ createReduxContextHook();
+
+export function createStoreHook<S = unknown, A extends Action<string> = UnknownAction>(
+	context = ReactReduxContext,
+) {
+	const useReduxContextLocal =
+		context === ReactReduxContext ? useReduxContext : createReduxContextHook(context);
+	const useStore = () => {
+		const { store } = useReduxContextLocal();
+		return store as Store<S, A>;
+	};
+	Object.assign(useStore, { withTypes: () => useStore });
+	return useStore;
+}
+
+export const useStore = /* @__PURE__ */ createStoreHook();
+
+export function createDispatchHook<S = unknown, A extends Action<string> = UnknownAction>(
+	context = ReactReduxContext,
+) {
+	const useStoreLocal = context === ReactReduxContext ? useStore : createStoreHook<S, A>(context);
+	const useDispatch = () => {
+		const store = useStoreLocal();
+		return store.dispatch;
+	};
+	Object.assign(useDispatch, { withTypes: () => useDispatch });
+	return useDispatch;
+}
+
+export const useDispatch = /* @__PURE__ */ createDispatchHook();
+
+interface UseSelectorOptions<Selected> {
+	equalityFn?: (a: Selected, b: Selected) => boolean;
+	devModeChecks?: {
+		stabilityCheck?: 'never' | 'once' | 'always';
+		identityFunctionCheck?: 'never' | 'once' | 'always';
+	};
+}
+
+export function createSelectorHook(context = ReactReduxContext) {
+	const useReduxContextLocal =
+		context === ReactReduxContext ? useReduxContext : createReduxContextHook(context);
+
+	function useSelector<TState, Selected>(
+		selector: (state: TState) => Selected,
+		...rest: any[]
+	): Selected {
+		const [user, slot] = splitSlot(rest);
+		const equalityFnOrOptions = (user[0] ?? {}) as
+			| ((a: Selected, b: Selected) => boolean)
+			| UseSelectorOptions<Selected>;
+		const { equalityFn = refEquality } =
+			typeof equalityFnOrOptions === 'function'
+				? { equalityFn: equalityFnOrOptions }
+				: equalityFnOrOptions;
+
+		if (process.env.NODE_ENV !== 'production') {
+			if (!selector) {
+				throw new Error(`You must pass a selector to useSelector`);
+			}
+			if (typeof selector !== 'function') {
+				throw new Error(`You must pass a function as a selector to useSelector`);
+			}
+			if (typeof equalityFn !== 'function') {
+				throw new Error(`You must pass a function as an equality function to useSelector`);
+			}
+		}
+
+		const { store, subscription, getServerState } = useReduxContextLocal();
+
+		const firstRun = useRef(true, subSlot(slot, 'us:first'));
+
+		const wrappedSelector = useCallback(
+			(state: TState): Selected => {
+				const selected = selector(state);
+				if (process.env.NODE_ENV !== 'production') {
+					const { devModeChecks = {} } =
+						typeof equalityFnOrOptions === 'function' ? {} : (equalityFnOrOptions as any);
+					const {
+						stabilityCheck = 'once',
+						identityFunctionCheck = 'once',
+					}: NonNullable<UseSelectorOptions<Selected>['devModeChecks']> = devModeChecks;
+					if (stabilityCheck === 'always' || (stabilityCheck === 'once' && firstRun.current)) {
+						const toCompare = selector(state);
+						if (!equalityFn(selected, toCompare)) {
+							console.warn(
+								'Selector ' +
+									(selector.name || 'unknown') +
+									' returned a different result when called with the same parameters. This can lead to unnecessary rerenders.' +
+									'\nSelectors that return a new reference (such as an object or an array) should be memoized: https://redux.js.org/usage/deriving-data-selectors#optimizing-selectors-with-memoization',
+								{ state, selected, selected2: toCompare },
+							);
+						}
+					}
+					if (
+						identityFunctionCheck === 'always' ||
+						(identityFunctionCheck === 'once' && firstRun.current)
+					) {
+						if ((selected as unknown) === state) {
+							console.warn(
+								'Selector ' +
+									(selector.name || 'unknown') +
+									' returned the root state when called. This can lead to unnecessary rerenders.' +
+									'\nSelectors that return the entire state are almost certainly a mistake, as they will cause a rerender whenever *anything* in state changes.',
+							);
+						}
+					}
+					if (firstRun.current) firstRun.current = false;
+				}
+				return selected;
+			},
+			[selector],
+			subSlot(slot, 'us:sel'),
+		);
+
+		const selectedState = useSyncExternalStoreWithSelector(
+			subscription.addNestedSub,
+			store.getState as () => TState,
+			(getServerState as (() => TState) | undefined) || (store.getState as () => TState),
+			wrappedSelector,
+			equalityFn,
+			subSlot(slot, 'us:ws'),
+		);
+
+		return selectedState;
+	}
+
+	Object.assign(useSelector, { withTypes: () => useSelector });
+	return useSelector;
+}
+
+export const useSelector = /* @__PURE__ */ createSelectorHook();

package/src/index.ts

@@ -0,0 +1,44 @@
+// @octanejs/redux — React Redux for the octane renderer.
+//
+// The binding layer (Provider + hooks + Subscription) reimplemented on octane's
+// native useSyncExternalStore; works with any Redux store — Redux Toolkit
+// included — by changing the import. The store, reducers, middleware, and
+// reselect selectors are framework-agnostic and unchanged.
+//
+// Surface: everything react-redux 9 exports EXCEPT `connect`/`legacy_connect`
+// (the class-era HOC — importable for compatibility, throws with guidance when
+// called; the hooks API is the supported path).
+export { Provider } from './Provider.tsrx';
+export { ReactReduxContext } from './Context';
+export type { ReactReduxContextValue, ReactReduxContextInstance } from './Context';
+export {
+	createReduxContextHook,
+	useReduxContext,
+	createStoreHook,
+	useStore,
+	createDispatchHook,
+	useDispatch,
+	createSelectorHook,
+	useSelector,
+} from './hooks';
+export { shallowEqual } from './utils/shallowEqual';
+export { createSubscription } from './utils/Subscription';
+export type { Subscription } from './utils/Subscription';
+export { useSyncExternalStoreWithSelector } from './utils/useSyncExternalStoreWithSelector';
+
+// `batch` is a no-op passthrough in react-redux 9 (React 18+ auto-batches;
+// octane batches renders in a microtask the same way).
+export function batch(callback: () => void): void {
+	callback();
+}
+
+// The legacy HOC is not ported — octane has no class components and the hooks
+// API covers the same ground. Kept as a throwing export so imports stay
+// compatible and the failure is actionable.
+export function connect(): never {
+	throw new Error(
+		'@octanejs/redux does not port `connect` — use the hooks API ' +
+			'(useSelector/useDispatch) instead.',
+	);
+}
+export const legacy_connect = connect;

package/src/internal.ts

@@ -0,0 +1,37 @@
+// Slot mechanics shared by the binding's plain-`.ts` hooks (same helper as
+// @octanejs/tanstack-query). The octane compiler injects a per-call-site Symbol slot into
+// every hook call in compiled files; these binding files are NOT compiled, so a
+// hook here receives the caller's slot as its trailing argument and derives a
+// distinct sub-slot for each base hook it composes.
+
+// Memoized: subSlot runs on EVERY hook call every render; the cache returns the
+// identical Symbol.for-interned value without the concat + registry lookup.
+const subSlotCache = new Map<symbol, Map<string, symbol>>();
+// Tag-only symbols for the slotless-caller case (see below).
+const bareTagCache = new Map<string, symbol>();
+
+export function subSlot(slot: symbol | undefined, tag: string): symbol {
+	// No inherited slot (the caller was NOT compiled — e.g. a vendored wrapper
+	// hook): return a stable TAG-ONLY symbol rather than undefined. The runtime
+	// combines it with the ambient withSlot path, so sibling base hooks inside
+	// one composed hook stay DISTINCT per tag. Returning undefined here made
+	// them all resolve to the bare path — one shared slot, state collision.
+	if (slot === undefined) {
+		let bare = bareTagCache.get(tag);
+		if (bare === undefined) bareTagCache.set(tag, (bare = Symbol.for(':' + tag)));
+		return bare;
+	}
+	let byTag = subSlotCache.get(slot);
+	if (byTag === undefined) subSlotCache.set(slot, (byTag = new Map()));
+	let sym = byTag.get(tag);
+	if (sym === undefined) byTag.set(tag, (sym = Symbol.for((slot.description ?? '') + ':' + tag)));
+	return sym;
+}
+
+// Split the compiler-injected trailing slot off a hook's runtime args, returning
+// the user args (everything before it) and the slot.
+export function splitSlot(args: any[]): [any[], symbol | undefined] {
+	const tail = args[args.length - 1];
+	const slot = typeof tail === 'symbol' ? (tail as symbol) : undefined;
+	return [slot !== undefined ? args.slice(0, -1) : args, slot];
+}

package/src/utils/Subscription.ts

@@ -0,0 +1,166 @@
+// Verbatim port of react-redux's utils/Subscription.ts (framework-agnostic).
+// The Subscription coordinates the Provider's single store subscription with
+// nested per-component subscriptions, notifying top-down (ancestors before
+// descendants) — the ordering `connect` relies on and hooks benefit from.
+import type { Store } from 'redux';
+
+type VoidFunc = () => void;
+
+interface Listener {
+	callback: VoidFunc;
+	next: Listener | null;
+	prev: Listener | null;
+}
+
+function createListenerCollection() {
+	let first: Listener | null = null;
+	let last: Listener | null = null;
+	return {
+		clear() {
+			first = null;
+			last = null;
+		},
+		notify() {
+			let listener = first;
+			while (listener) {
+				listener.callback();
+				listener = listener.next;
+			}
+		},
+		get() {
+			const listeners: Listener[] = [];
+			let listener = first;
+			while (listener) {
+				listeners.push(listener);
+				listener = listener.next;
+			}
+			return listeners;
+		},
+		subscribe(callback: VoidFunc) {
+			let isSubscribed = true;
+			const listener: Listener = (last = {
+				callback,
+				next: null,
+				prev: last,
+			});
+			if (listener.prev) {
+				listener.prev.next = listener;
+			} else {
+				first = listener;
+			}
+			return function unsubscribe() {
+				if (!isSubscribed || first === null) return;
+				isSubscribed = false;
+				if (listener.next) {
+					listener.next.prev = listener.prev;
+				} else {
+					last = listener.prev;
+				}
+				if (listener.prev) {
+					listener.prev.next = listener.next;
+				} else {
+					first = listener.next;
+				}
+			};
+		},
+	};
+}
+
+type ListenerCollection = ReturnType<typeof createListenerCollection>;
+
+export interface Subscription {
+	addNestedSub: (listener: VoidFunc) => VoidFunc;
+	notifyNestedSubs: VoidFunc;
+	handleChangeWrapper: VoidFunc;
+	isSubscribed: () => boolean;
+	onStateChange?: VoidFunc | null;
+	trySubscribe: VoidFunc;
+	tryUnsubscribe: VoidFunc;
+	getListeners: () => Pick<ListenerCollection, 'notify' | 'get'>;
+}
+
+const nullListeners = {
+	notify() {},
+	get: () => [] as Listener[],
+};
+
+export function createSubscription(store: Store, parentSub?: Subscription): Subscription {
+	let unsubscribe: VoidFunc | undefined;
+	let listeners: Pick<ListenerCollection, 'notify' | 'get'> & Partial<ListenerCollection> =
+		nullListeners;
+	let subscriptionsAmount = 0;
+	let selfSubscribed = false;
+
+	function addNestedSub(listener: VoidFunc) {
+		trySubscribe();
+		const cleanupListener = (listeners as ListenerCollection).subscribe(listener);
+		let removed = false;
+		return () => {
+			if (!removed) {
+				removed = true;
+				cleanupListener();
+				tryUnsubscribe();
+			}
+		};
+	}
+
+	function notifyNestedSubs() {
+		listeners.notify();
+	}
+
+	function handleChangeWrapper() {
+		if (subscription.onStateChange) {
+			subscription.onStateChange();
+		}
+	}
+
+	function isSubscribed() {
+		return selfSubscribed;
+	}
+
+	function trySubscribe() {
+		subscriptionsAmount++;
+		if (!unsubscribe) {
+			unsubscribe = parentSub
+				? parentSub.addNestedSub(handleChangeWrapper)
+				: store.subscribe(handleChangeWrapper);
+			listeners = createListenerCollection();
+		}
+	}
+
+	function tryUnsubscribe() {
+		subscriptionsAmount--;
+		if (unsubscribe && subscriptionsAmount === 0) {
+			unsubscribe();
+			unsubscribe = undefined;
+			(listeners as ListenerCollection).clear();
+			listeners = nullListeners;
+		}
+	}
+
+	function trySubscribeSelf() {
+		if (!selfSubscribed) {
+			selfSubscribed = true;
+			trySubscribe();
+		}
+	}
+
+	function tryUnsubscribeSelf() {
+		if (selfSubscribed) {
+			selfSubscribed = false;
+			tryUnsubscribe();
+		}
+	}
+
+	const subscription: Subscription = {
+		addNestedSub,
+		notifyNestedSubs,
+		handleChangeWrapper,
+		isSubscribed,
+		trySubscribe: trySubscribeSelf,
+		tryUnsubscribe: tryUnsubscribeSelf,
+		getListeners: () => listeners,
+	};
+
+	return subscription;
+}

package/src/utils/shallowEqual.ts

@@ -0,0 +1,26 @@
+// Verbatim port of react-redux's utils/shallowEqual.ts.
+function is(x: unknown, y: unknown): boolean {
+	if (x === y) {
+		return x !== 0 || y !== 0 || 1 / (x as number) === 1 / (y as number);
+	}
+	return x !== x && y !== y;
+}
+
+export function shallowEqual(objA: any, objB: any): boolean {
+	if (is(objA, objB)) return true;
+	if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+		return false;
+	}
+	const keysA = Object.keys(objA);
+	const keysB = Object.keys(objB);
+	if (keysA.length !== keysB.length) return false;
+	for (let i = 0; i < keysA.length; i++) {
+		if (
+			!Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
+			!is(objA[keysA[i]], objB[keysA[i]])
+		) {
+			return false;
+		}
+	}
+	return true;
+}

package/src/utils/useSyncExternalStoreWithSelector.ts

@@ -0,0 +1,91 @@
+// Port of React's `use-sync-external-store/with-selector` shim onto octane's
+// native useSyncExternalStore — the exact memoization algorithm: the selection
+// is recomputed only when the SNAPSHOT changes; when `isEqual` says the new
+// selection matches the previous one, the previous REFERENCE is kept so the
+// store's uSES doesn't re-render.
+import { useSyncExternalStore, useRef, useMemo, useEffect } from 'octane';
+import { subSlot } from '../internal';
+
+const objectIs: (x: unknown, y: unknown) => boolean =
+	typeof Object.is === 'function'
+		? Object.is
+		: (x: any, y: any) => (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y);
+
+export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
+	subscribe: (onStoreChange: () => void) => () => void,
+	getSnapshot: () => Snapshot,
+	getServerSnapshot: undefined | null | (() => Snapshot),
+	selector: (snapshot: Snapshot) => Selection,
+	isEqual?: (a: Selection, b: Selection) => boolean,
+	slot?: symbol,
+): Selection {
+	const instRef = useRef<{ hasValue: boolean; value: Selection | null } | null>(
+		null,
+		subSlot(slot, 'ws:inst'),
+	);
+	let inst: { hasValue: boolean; value: Selection | null };
+	if (instRef.current === null) {
+		inst = { hasValue: false, value: null };
+		instRef.current = inst;
+	} else {
+		inst = instRef.current;
+	}
+
+	const [getSelection, getServerSelection] = useMemo(
+		() => {
+			let hasMemo = false;
+			let memoizedSnapshot: Snapshot;
+			let memoizedSelection: Selection;
+			const memoizedSelector = (nextSnapshot: Snapshot): Selection => {
+				if (!hasMemo) {
+					hasMemo = true;
+					memoizedSnapshot = nextSnapshot;
+					const nextSelection = selector(nextSnapshot);
+					if (isEqual !== undefined && inst.hasValue) {
+						const currentSelection = inst.value as Selection;
+						if (isEqual(currentSelection, nextSelection)) {
+							return (memoizedSelection = currentSelection);
+						}
+					}
+					return (memoizedSelection = nextSelection);
+				}
+				const currentSelection = memoizedSelection;
+				if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
+				const nextSelection = selector(nextSnapshot);
+				if (isEqual !== undefined && isEqual(currentSelection, nextSelection)) {
+					memoizedSnapshot = nextSnapshot;
+					return currentSelection;
+				}
+				memoizedSnapshot = nextSnapshot;
+				return (memoizedSelection = nextSelection);
+			};
+			const maybeGetServerSnapshot = getServerSnapshot === undefined ? null : getServerSnapshot;
+			return [
+				() => memoizedSelector(getSnapshot()),
+				maybeGetServerSnapshot === null
+					? undefined
+					: () => memoizedSelector(maybeGetServerSnapshot!()),
+			] as const;
+		},
+		[getSnapshot, getServerSnapshot, selector, isEqual],
+		subSlot(slot, 'ws:memo'),
+	);
+
+	const value = useSyncExternalStore(
+		subscribe,
+		getSelection,
+		getServerSelection ?? getSelection,
+		subSlot(slot, 'ws:uses'),
+	);
+
+	useEffect(
+		() => {
+			inst.hasValue = true;
+			inst.value = value;
+		},
+		[value],
+		subSlot(slot, 'ws:eff'),
+	);
+
+	return value;
+}