@tramvai/state 1.84.0 → 1.89.1

package/lib/connect/Provider.d.ts

@@ -1 +1,7 @@
-export declare const Provider: ({ context, children }: any) => JSX.Element;
+import type { ReactElement } from 'react';
+import type { ConsumerContext, ServerState } from './types';
+export declare const Provider: ({ context, children, serverState, }: {
+    context: ConsumerContext;
+    children: ReactElement;
+    serverState?: ServerState;
+}) => JSX.Element;

package/lib/connect/context.d.ts

@@ -1,2 +1,3 @@
 import type { ConsumerContext } from './types';
 export declare const ConnectContext: import("react").Context<ConsumerContext>;
+export declare const ServerStateContext: import("react").Context<any>;

package/lib/connect/types.d.ts

@@ -1 +1,2 @@
 export { Action, ConsumerContext } from '@tramvai/types-actions-state-context';
+export declare type ServerState = any;

package/lib/index.es.js

@@ -4,15 +4,18 @@ import identity from '@tinkoff/utils/function/identity';
 import pick from '@tinkoff/utils/object/pick';
 import shallowEqual from '@tinkoff/utils/is/shallowEqual';
 import strictEqual from '@tinkoff/utils/is/strictEqual';
+import { jsx } from 'react/jsx-runtime';
+import noop from '@tinkoff/utils/function/noop';
 import hoistStatics from 'hoist-non-react-statics';
 import invariant from 'invariant';
-import React, { createContext, useContext, useMemo, useRef, useReducer, useCallback } from 'react';
+import React, { createContext, useContext, useMemo, useRef, useCallback } from 'react';
 import { isValidElementType } from 'react-is';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import isArray from '@tinkoff/utils/is/array';
 import { useShallowEqual, useIsomorphicLayoutEffect } from '@tinkoff/react-hooks';
 export { useIsomorphicLayoutEffect } from '@tinkoff/react-hooks';
-import noop from '@tinkoff/utils/function/noop';
 import toArray from '@tinkoff/utils/array/toArray';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';
 import always from '@tinkoff/utils/function/always';
 import mapObject from '@tinkoff/utils/object/map';
 import isPlainObject from '@tinkoff/utils/is/plainObject';
@@ -652,6 +655,7 @@ class Subscription {
 }
 
 const ConnectContext = createContext(null);
+const ServerStateContext = createContext(null);
 
 const useConsumerContext = () => {
     const context = useContext(ConnectContext);
@@ -674,10 +678,9 @@ function useActions(actions) {
 
 function useStore(reducer) {
     const context = useConsumerContext();
+    const serverState = useContext(ServerStateContext);
     const reducerRef = useRef(reducer);
     const addedReducerRef = useRef(null);
-    const unsubscribeRef = useRef(noop);
-    const [, forceRender] = useReducer((s) => s + 1, 0);
     // если текущий редьюсер не зарегистрирован в диспетчере,
     // регистрируем его вручную, что бы гарантировать работоспособность `context.getState(reducer)`,
     // и сохраняем в `addedReducerRef`, что бы удалить при unmount
@@ -685,26 +688,14 @@ function useStore(reducer) {
         context.registerStore(reducer);
         addedReducerRef.current = reducer.storeName;
     }
-    const stateRef = useRef(context.getState(reducer));
-    useIsomorphicLayoutEffect(() => {
-        const subscribe = (updatedState) => {
-            // если состояние текущего редьюсера изменилось,
-            // обновляем локальное состояние и ререндерим компонент
-            if (stateRef.current !== updatedState) {
-                stateRef.current = updatedState;
-                forceRender();
-            }
-        };
-        // сразу обновляем состояние
-        subscribe(context.getState(reducer));
-        // и подписываемся на обновления редьюсера
-        unsubscribeRef.current = context.subscribe(reducer, subscribe);
+    const subscribe = useCallback((reactUpdate) => {
+        const unsubscribe = context.subscribe(reducer, reactUpdate);
         // заменяем текущий редьюсер
         reducerRef.current = reducer;
         return () => {
             // гарантируем отписку от обновлений текущего редьюсера,
             // при анмаунте компонента
-            unsubscribeRef.current();
+            unsubscribe();
             // если текущий редьюсер был зарегистрирован в диспетчере в этом хуке,
             // удаляем его из диспетчера
             if (addedReducerRef.current) {
@@ -713,7 +704,7 @@ function useStore(reducer) {
             }
         };
     }, [reducer, context]);
-    return stateRef.current;
+    return useSyncExternalStore(subscribe, () => context.getState(reducer), serverState ? () => serverState[reducer.storeName] : () => context.getState(reducer));
 }
 
 const contextExecution = typeof window !== 'undefined' ? window : global;
@@ -731,23 +722,29 @@ const schedule = scheduling();
 function useSelector(storesOrStore, selector, equalityFn = shallowEqual) {
     invariant(selector, `You must pass a selector to useSelectors`);
     const context = useConsumerContext();
-    const [, forceRender] = useReducer((s) => s + 1, 0);
+    const serverState = useContext(ServerStateContext);
     const renderIsScheduled = useRef(false);
     const storesRef = useShallowEqual(storesOrStore);
     const subscription = useMemo(() => new Subscription(toArray(storesRef).map(context.getStore)), [storesRef, context]);
     const latestSubscriptionCallbackError = useRef();
-    const latestSelector = useRef(selector);
-    const latestSelectedState = useRef();
+    const subscribe = useCallback((reactUpdate) => {
+        subscription.setOnStateChange(() => {
+            if (!renderIsScheduled.current) {
+                renderIsScheduled.current = true;
+                schedule(() => {
+                    reactUpdate();
+                    renderIsScheduled.current = false;
+                });
+            }
+        });
+        subscription.trySubscribe();
+        return () => {
+            return subscription.tryUnsubscribe();
+        };
+    }, [subscription]);
     let selectedState;
     try {
-        if (!latestSelectedState.current ||
-            selector !== latestSelector.current ||
-            latestSubscriptionCallbackError.current) {
-            selectedState = selector(context.getState());
-        }
-        else {
-            selectedState = latestSelectedState.current;
-        }
+        selectedState = useSyncExternalStoreWithSelector(subscribe, context.getState, serverState ? () => serverState : context.getState, selector, equalityFn);
     }
     catch (err) {
         let errorMessage = `An error occured while selecting the store state: ${err.message}.`;
@@ -757,46 +754,8 @@ function useSelector(storesOrStore, selector, equalityFn = shallowEqual) {
         throw new Error(errorMessage);
     }
     useIsomorphicLayoutEffect(() => {
-        latestSelector.current = selector;
-        latestSelectedState.current = selectedState;
         latestSubscriptionCallbackError.current = undefined;
     });
-    useIsomorphicLayoutEffect(() => {
-        let didUnsubscribe = false;
-        function checkForUpdates() {
-            renderIsScheduled.current = false;
-            if (didUnsubscribe) {
-                return;
-            }
-            try {
-                const newSelectedState = latestSelector.current(context.getState());
-                if (equalityFn(newSelectedState, latestSelectedState.current)) {
-                    return;
-                }
-                latestSelectedState.current = newSelectedState;
-            }
-            catch (err) {
-                // we ignore all errors here, since when the component
-                // is re-rendered, the selectors are called again, and
-                // will throw again, if neither props nor store state
-                // changed
-                latestSubscriptionCallbackError.current = err;
-            }
-            forceRender();
-        }
-        subscription.setOnStateChange(() => {
-            if (!renderIsScheduled.current) {
-                renderIsScheduled.current = true;
-                schedule(checkForUpdates);
-            }
-        });
-        subscription.trySubscribe();
-        checkForUpdates();
-        return () => {
-            didUnsubscribe = true;
-            return subscription.tryUnsubscribe();
-        };
-    }, [subscription]);
     return selectedState;
 }
 
@@ -807,8 +766,6 @@ const useStoreSelector = (store, selector) => {
     return useSelector(store, memoizedSelector);
 };
 
-// Define some constant arrays just to avoid re-creating these
-const EMPTY_ARRAY = [];
 const stringifyComponent = (Comp) => {
     try {
         return JSON.stringify(Comp);
@@ -817,11 +774,6 @@ const stringifyComponent = (Comp) => {
         return String(Comp);
     }
 };
-function storeStateUpdatesReducer(state, action) {
-    const [, updateCount] = state;
-    return [action.payload, updateCount + 1];
-}
-const initStateUpdates = () => [null, 0];
 function connectAdvanced(
 /*
   selectorFactory is a func that is responsible for returning the selector function used to
@@ -875,10 +827,6 @@ pure = true,
             wrappedComponentName,
             WrappedComponent,
         };
-        // If we aren't running in "pure" mode, we don't want to memoize values.
-        // To avoid conditionally calling hooks, we fall back to a tiny wrapper
-        // that just executes the given callback immediately.
-        const usePureOnlyMemo = pure ? useMemo : (callback) => callback();
         const ConnectFunction = (props) => {
             const [forwardedRef, wrapperProps] = useMemo(() => {
                 // Distinguish between actual "data" props that were passed to the wrapper component,
@@ -890,6 +838,7 @@ pure = true,
             }, [props]);
             // Retrieve the store and ancestor subscription via context, if available
             const contextValue = useConsumerContext();
+            const serverState = useContext(ServerStateContext);
             invariant(Boolean(contextValue), `Could not find context in ` +
                 `"${displayName}". Either wrap the root component in a <Provider>, ` +
                 `or pass a custom React context provider to <Provider> and the corresponding ` +
@@ -909,124 +858,34 @@ pure = true,
                     subscription.trySubscribe();
                 }
             }, [subscription]);
-            // We need to force this wrapper component to re-render whenever a Redux store update
-            // causes a change to the calculated child component props (or we caught an error in mapState)
-            const [[previousStateUpdateResult], forceComponentUpdateDispatch] = useReducer(storeStateUpdatesReducer, EMPTY_ARRAY, initStateUpdates);
-            // Propagate any mapState/mapDispatch errors upwards
-            if (previousStateUpdateResult && previousStateUpdateResult.error) {
-                throw previousStateUpdateResult.error;
-            }
-            // Set up refs to coordinate values between the subscription effect and the render logic
-            const lastChildProps = useRef();
-            const lastWrapperProps = useRef(wrapperProps);
-            const childPropsFromStoreUpdate = useRef();
             const renderIsScheduled = useRef(false);
-            const actualChildProps = usePureOnlyMemo(() => {
-                // Tricky logic here:
-                // - This render may have been triggered by a Redux store update that produced new child props
-                // - However, we may have gotten new wrapper props after that
-                // If we have new child props, and the same wrapper props, we know we should use the new child props as-is.
-                // But, if we have new wrapper props, those might change the child props, so we have to recalculate things.
-                // So, we'll use the child props from store update only if the wrapper props are the same as last time.
-                if (childPropsFromStoreUpdate.current && wrapperProps === lastWrapperProps.current) {
-                    return childPropsFromStoreUpdate.current;
-                }
-                // TODO We're reading the store directly in render() here. Bad idea?
-                // This will likely cause Bad Things (TM) to happen in Concurrent Mode.
-                // Note that we do this because on renders _not_ caused by store updates, we need the latest store state
-                // to determine what the child props should be.
+            const actualChildPropsSelector = useCallback(() => {
                 return childPropsSelector(contextValue.getState(), wrapperProps);
-            }, [contextValue, previousStateUpdateResult, wrapperProps]);
-            // We need this to execute synchronously every time we re-render. However, React warns
-            // about useLayoutEffect in SSR, so we try to detect environment and fall back to
-            // just useEffect instead to avoid the warning, since neither will run anyway.
-            useIsomorphicLayoutEffect(() => {
-                // We want to capture the wrapper props and child props we used for later comparisons
-                lastWrapperProps.current = wrapperProps;
-                lastChildProps.current = actualChildProps;
-                // If the render was from a store update, clear out that reference and cascade the subscriber update
-                if (childPropsFromStoreUpdate.current) {
-                    childPropsFromStoreUpdate.current = undefined;
-                }
-            });
+            }, [contextValue, wrapperProps, childPropsSelector]);
             // Our re-subscribe logic only runs when the store/subscription setup changes
-            useIsomorphicLayoutEffect(() => {
-                // If we're not subscribed to the store, nothing to do here
-                if (!subscription)
-                    return;
-                // Capture values for checking if and when this component unmounts
-                let didUnsubscribe = false;
-                let lastThrownError = null;
-                // We'll run this callback every time a store subscription update propagates to this component
-                const checkForUpdates = () => {
-                    renderIsScheduled.current = false;
-                    if (didUnsubscribe) {
-                        // Don't run stale listeners.
-                        // Redux doesn't guarantee unsubscriptions happen until next dispatch.
-                        return;
-                    }
-                    const latestStoreState = contextValue.getState();
-                    let newChildProps;
-                    let error;
-                    try {
-                        // Actually run the selector with the most recent store state and wrapper props
-                        // to determine what the child props should be
-                        newChildProps = childPropsSelector(latestStoreState, lastWrapperProps.current);
-                    }
-                    catch (e) {
-                        error = e;
-                        lastThrownError = e;
-                    }
-                    if (!error) {
-                        lastThrownError = null;
-                    }
-                    // If the child props haven't changed, nothing to do here - cascade the subscription update
-                    if (newChildProps !== lastChildProps.current) {
-                        // Save references to the new child props.  Note that we track the "child props from store update"
-                        // as a ref instead of a useState/useReducer because we need a way to determine if that value has
-                        // been processed.  If this went into useState/useReducer, we couldn't clear out the value without
-                        // forcing another re-render, which we don't want.
-                        lastChildProps.current = newChildProps;
-                        childPropsFromStoreUpdate.current = newChildProps;
-                        // If the child props _did_ change (or we caught an error), this wrapper component needs to re-render
-                        forceComponentUpdateDispatch({
-                            type: 'STORE_UPDATED',
-                            payload: {
-                                latestStoreState,
-                                error,
-                            },
-                        });
-                    }
-                };
-                // Actually subscribe to the nearest connected ancestor (or store)
+            const subscribe = useCallback((reactUpdate) => {
+                if (!subscription) {
+                    return noop;
+                }
                 subscription.setOnStateChange(() => {
                     if (!renderIsScheduled.current) {
                         renderIsScheduled.current = true;
-                        schedule(checkForUpdates);
+                        schedule(() => {
+                            reactUpdate();
+                            renderIsScheduled.current = false;
+                        });
                     }
                 });
-                // Pull data from the store after first render in case the store has
-                // changed since we began.
-                checkForUpdates();
-                const unsubscribeWrapper = () => {
-                    didUnsubscribe = true;
-                    subscription.tryUnsubscribe();
-                    if (lastThrownError) {
-                        // It's possible that we caught an error due to a bad mapState function, but the
-                        // parent re-rendered without this component and we're about to unmount.
-                        // This shouldn't happen as long as we do top-down subscriptions correctly, but
-                        // if we ever do those wrong, this throw will surface the error in our tests.
-                        // In that case, throw the error from here so it doesn't get lost.
-                        throw lastThrownError;
-                    }
+                return () => {
+                    return subscription.tryUnsubscribe();
                 };
-                return unsubscribeWrapper;
-            }, [contextValue, subscription, childPropsSelector]);
+            }, [subscription]);
+            const actualChildProps = useSyncExternalStore(subscribe, actualChildPropsSelector, serverState ? childPropsSelector(serverState, wrapperProps) : actualChildPropsSelector);
             // Now that all that's done, we can finally try to actually render the child component.
             // We memoize the elements for the rendered child component as an optimization.
             const renderedWrappedComponent = useMemo(
             // eslint-disable-next-line react/jsx-props-no-spreading
-            () => React.createElement(WrappedComponent, Object.assign({}, actualChildProps, { ref: forwardedRef })), [forwardedRef, actualChildProps]);
+            () => jsx(WrappedComponent, Object.assign({}, actualChildProps, { ref: forwardedRef }), void 0), [forwardedRef, actualChildProps]);
             return renderedWrappedComponent;
         };
         // If we're in "pure" mode, ensure our wrapper component only re-renders when incoming props have changed.
@@ -1036,7 +895,7 @@ pure = true,
         if (forwardRef) {
             const forwarded = React.forwardRef(function forwardConnectRef(props, ref) {
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                return React.createElement(Connect, Object.assign({}, props, { forwardedRef: ref }));
+                return jsx(Connect, Object.assign({}, props, { forwardedRef: ref }), void 0);
             });
             forwarded.displayName = displayName;
             forwarded.WrappedComponent = WrappedComponent;
@@ -1300,8 +1159,8 @@ function finalPropsSelectorFactory(context, { initMapStateToProps, initMapContex
     return selectorFactory(mapStateToProps, mapContextToProps, mergeProps, context, options);
 }
 
-const Provider = ({ context, children }) => {
-    return React.createElement(ConnectContext.Provider, { value: context }, children);
+const Provider = ({ context, children, serverState, }) => {
+    return (jsx(ConnectContext.Provider, Object.assign({ value: context }, { children: jsx(ServerStateContext.Provider, Object.assign({ value: serverState }, { children: children }), void 0) }), void 0));
 };
 
 /*

package/lib/index.js

@@ -8,14 +8,17 @@ var identity = require('@tinkoff/utils/function/identity');
 var pick = require('@tinkoff/utils/object/pick');
 var shallowEqual = require('@tinkoff/utils/is/shallowEqual');
 var strictEqual = require('@tinkoff/utils/is/strictEqual');
+var jsxRuntime = require('react/jsx-runtime');
+var noop = require('@tinkoff/utils/function/noop');
 var hoistStatics = require('hoist-non-react-statics');
 var invariant = require('invariant');
 var React = require('react');
 var reactIs = require('react-is');
+var shim = require('use-sync-external-store/shim');
 var isArray = require('@tinkoff/utils/is/array');
 var reactHooks = require('@tinkoff/react-hooks');
-var noop = require('@tinkoff/utils/function/noop');
 var toArray = require('@tinkoff/utils/array/toArray');
+var withSelector = require('use-sync-external-store/shim/with-selector');
 var always = require('@tinkoff/utils/function/always');
 var mapObject = require('@tinkoff/utils/object/map');
 var isPlainObject = require('@tinkoff/utils/is/plainObject');
@@ -29,11 +32,11 @@ var identity__default = /*#__PURE__*/_interopDefaultLegacy(identity);
 var pick__default = /*#__PURE__*/_interopDefaultLegacy(pick);
 var shallowEqual__default = /*#__PURE__*/_interopDefaultLegacy(shallowEqual);
 var strictEqual__default = /*#__PURE__*/_interopDefaultLegacy(strictEqual);
+var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 var hoistStatics__default = /*#__PURE__*/_interopDefaultLegacy(hoistStatics);
 var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
-var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 var toArray__default = /*#__PURE__*/_interopDefaultLegacy(toArray);
 var always__default = /*#__PURE__*/_interopDefaultLegacy(always);
 var mapObject__default = /*#__PURE__*/_interopDefaultLegacy(mapObject);
@@ -674,6 +677,7 @@ class Subscription {
 }
 
 const ConnectContext = React.createContext(null);
+const ServerStateContext = React.createContext(null);
 
 const useConsumerContext = () => {
     const context = React.useContext(ConnectContext);
@@ -696,10 +700,9 @@ function useActions(actions) {
 
 function useStore(reducer) {
     const context = useConsumerContext();
+    const serverState = React.useContext(ServerStateContext);
     const reducerRef = React.useRef(reducer);
     const addedReducerRef = React.useRef(null);
-    const unsubscribeRef = React.useRef(noop__default["default"]);
-    const [, forceRender] = React.useReducer((s) => s + 1, 0);
     // если текущий редьюсер не зарегистрирован в диспетчере,
     // регистрируем его вручную, что бы гарантировать работоспособность `context.getState(reducer)`,
     // и сохраняем в `addedReducerRef`, что бы удалить при unmount
@@ -707,26 +710,14 @@ function useStore(reducer) {
         context.registerStore(reducer);
         addedReducerRef.current = reducer.storeName;
     }
-    const stateRef = React.useRef(context.getState(reducer));
-    reactHooks.useIsomorphicLayoutEffect(() => {
-        const subscribe = (updatedState) => {
-            // если состояние текущего редьюсера изменилось,
-            // обновляем локальное состояние и ререндерим компонент
-            if (stateRef.current !== updatedState) {
-                stateRef.current = updatedState;
-                forceRender();
-            }
-        };
-        // сразу обновляем состояние
-        subscribe(context.getState(reducer));
-        // и подписываемся на обновления редьюсера
-        unsubscribeRef.current = context.subscribe(reducer, subscribe);
+    const subscribe = React.useCallback((reactUpdate) => {
+        const unsubscribe = context.subscribe(reducer, reactUpdate);
         // заменяем текущий редьюсер
         reducerRef.current = reducer;
         return () => {
             // гарантируем отписку от обновлений текущего редьюсера,
             // при анмаунте компонента
-            unsubscribeRef.current();
+            unsubscribe();
             // если текущий редьюсер был зарегистрирован в диспетчере в этом хуке,
             // удаляем его из диспетчера
             if (addedReducerRef.current) {
@@ -735,7 +726,7 @@ function useStore(reducer) {
             }
         };
     }, [reducer, context]);
-    return stateRef.current;
+    return shim.useSyncExternalStore(subscribe, () => context.getState(reducer), serverState ? () => serverState[reducer.storeName] : () => context.getState(reducer));
 }
 
 const contextExecution = typeof window !== 'undefined' ? window : global;
@@ -753,23 +744,29 @@ const schedule = scheduling();
 function useSelector(storesOrStore, selector, equalityFn = shallowEqual__default["default"]) {
     invariant__default["default"](selector, `You must pass a selector to useSelectors`);
     const context = useConsumerContext();
-    const [, forceRender] = React.useReducer((s) => s + 1, 0);
+    const serverState = React.useContext(ServerStateContext);
     const renderIsScheduled = React.useRef(false);
     const storesRef = reactHooks.useShallowEqual(storesOrStore);
     const subscription = React.useMemo(() => new Subscription(toArray__default["default"](storesRef).map(context.getStore)), [storesRef, context]);
     const latestSubscriptionCallbackError = React.useRef();
-    const latestSelector = React.useRef(selector);
-    const latestSelectedState = React.useRef();
+    const subscribe = React.useCallback((reactUpdate) => {
+        subscription.setOnStateChange(() => {
+            if (!renderIsScheduled.current) {
+                renderIsScheduled.current = true;
+                schedule(() => {
+                    reactUpdate();
+                    renderIsScheduled.current = false;
+                });
+            }
+        });
+        subscription.trySubscribe();
+        return () => {
+            return subscription.tryUnsubscribe();
+        };
+    }, [subscription]);
     let selectedState;
     try {
-        if (!latestSelectedState.current ||
-            selector !== latestSelector.current ||
-            latestSubscriptionCallbackError.current) {
-            selectedState = selector(context.getState());
-        }
-        else {
-            selectedState = latestSelectedState.current;
-        }
+        selectedState = withSelector.useSyncExternalStoreWithSelector(subscribe, context.getState, serverState ? () => serverState : context.getState, selector, equalityFn);
     }
     catch (err) {
         let errorMessage = `An error occured while selecting the store state: ${err.message}.`;
@@ -779,46 +776,8 @@ function useSelector(storesOrStore, selector, equalityFn = shallowEqual__default
         throw new Error(errorMessage);
     }
     reactHooks.useIsomorphicLayoutEffect(() => {
-        latestSelector.current = selector;
-        latestSelectedState.current = selectedState;
         latestSubscriptionCallbackError.current = undefined;
     });
-    reactHooks.useIsomorphicLayoutEffect(() => {
-        let didUnsubscribe = false;
-        function checkForUpdates() {
-            renderIsScheduled.current = false;
-            if (didUnsubscribe) {
-                return;
-            }
-            try {
-                const newSelectedState = latestSelector.current(context.getState());
-                if (equalityFn(newSelectedState, latestSelectedState.current)) {
-                    return;
-                }
-                latestSelectedState.current = newSelectedState;
-            }
-            catch (err) {
-                // we ignore all errors here, since when the component
-                // is re-rendered, the selectors are called again, and
-                // will throw again, if neither props nor store state
-                // changed
-                latestSubscriptionCallbackError.current = err;
-            }
-            forceRender();
-        }
-        subscription.setOnStateChange(() => {
-            if (!renderIsScheduled.current) {
-                renderIsScheduled.current = true;
-                schedule(checkForUpdates);
-            }
-        });
-        subscription.trySubscribe();
-        checkForUpdates();
-        return () => {
-            didUnsubscribe = true;
-            return subscription.tryUnsubscribe();
-        };
-    }, [subscription]);
     return selectedState;
 }
 
@@ -829,8 +788,6 @@ const useStoreSelector = (store, selector) => {
     return useSelector(store, memoizedSelector);
 };
 
-// Define some constant arrays just to avoid re-creating these
-const EMPTY_ARRAY = [];
 const stringifyComponent = (Comp) => {
     try {
         return JSON.stringify(Comp);
@@ -839,11 +796,6 @@ const stringifyComponent = (Comp) => {
         return String(Comp);
     }
 };
-function storeStateUpdatesReducer(state, action) {
-    const [, updateCount] = state;
-    return [action.payload, updateCount + 1];
-}
-const initStateUpdates = () => [null, 0];
 function connectAdvanced(
 /*
   selectorFactory is a func that is responsible for returning the selector function used to
@@ -897,10 +849,6 @@ pure = true,
             wrappedComponentName,
             WrappedComponent,
         };
-        // If we aren't running in "pure" mode, we don't want to memoize values.
-        // To avoid conditionally calling hooks, we fall back to a tiny wrapper
-        // that just executes the given callback immediately.
-        const usePureOnlyMemo = pure ? React.useMemo : (callback) => callback();
         const ConnectFunction = (props) => {
             const [forwardedRef, wrapperProps] = React.useMemo(() => {
                 // Distinguish between actual "data" props that were passed to the wrapper component,
@@ -912,6 +860,7 @@ pure = true,
             }, [props]);
             // Retrieve the store and ancestor subscription via context, if available
             const contextValue = useConsumerContext();
+            const serverState = React.useContext(ServerStateContext);
             invariant__default["default"](Boolean(contextValue), `Could not find context in ` +
                 `"${displayName}". Either wrap the root component in a <Provider>, ` +
                 `or pass a custom React context provider to <Provider> and the corresponding ` +
@@ -931,124 +880,34 @@ pure = true,
                     subscription.trySubscribe();
                 }
             }, [subscription]);
-            // We need to force this wrapper component to re-render whenever a Redux store update
-            // causes a change to the calculated child component props (or we caught an error in mapState)
-            const [[previousStateUpdateResult], forceComponentUpdateDispatch] = React.useReducer(storeStateUpdatesReducer, EMPTY_ARRAY, initStateUpdates);
-            // Propagate any mapState/mapDispatch errors upwards
-            if (previousStateUpdateResult && previousStateUpdateResult.error) {
-                throw previousStateUpdateResult.error;
-            }
-            // Set up refs to coordinate values between the subscription effect and the render logic
-            const lastChildProps = React.useRef();
-            const lastWrapperProps = React.useRef(wrapperProps);
-            const childPropsFromStoreUpdate = React.useRef();
             const renderIsScheduled = React.useRef(false);
-            const actualChildProps = usePureOnlyMemo(() => {
-                // Tricky logic here:
-                // - This render may have been triggered by a Redux store update that produced new child props
-                // - However, we may have gotten new wrapper props after that
-                // If we have new child props, and the same wrapper props, we know we should use the new child props as-is.
-                // But, if we have new wrapper props, those might change the child props, so we have to recalculate things.
-                // So, we'll use the child props from store update only if the wrapper props are the same as last time.
-                if (childPropsFromStoreUpdate.current && wrapperProps === lastWrapperProps.current) {
-                    return childPropsFromStoreUpdate.current;
-                }
-                // TODO We're reading the store directly in render() here. Bad idea?
-                // This will likely cause Bad Things (TM) to happen in Concurrent Mode.
-                // Note that we do this because on renders _not_ caused by store updates, we need the latest store state
-                // to determine what the child props should be.
+            const actualChildPropsSelector = React.useCallback(() => {
                 return childPropsSelector(contextValue.getState(), wrapperProps);
-            }, [contextValue, previousStateUpdateResult, wrapperProps]);
-            // We need this to execute synchronously every time we re-render. However, React warns
-            // about useLayoutEffect in SSR, so we try to detect environment and fall back to
-            // just useEffect instead to avoid the warning, since neither will run anyway.
-            reactHooks.useIsomorphicLayoutEffect(() => {
-                // We want to capture the wrapper props and child props we used for later comparisons
-                lastWrapperProps.current = wrapperProps;
-                lastChildProps.current = actualChildProps;
-                // If the render was from a store update, clear out that reference and cascade the subscriber update
-                if (childPropsFromStoreUpdate.current) {
-                    childPropsFromStoreUpdate.current = undefined;
-                }
-            });
+            }, [contextValue, wrapperProps, childPropsSelector]);
             // Our re-subscribe logic only runs when the store/subscription setup changes
-            reactHooks.useIsomorphicLayoutEffect(() => {
-                // If we're not subscribed to the store, nothing to do here
-                if (!subscription)
-                    return;
-                // Capture values for checking if and when this component unmounts
-                let didUnsubscribe = false;
-                let lastThrownError = null;
-                // We'll run this callback every time a store subscription update propagates to this component
-                const checkForUpdates = () => {
-                    renderIsScheduled.current = false;
-                    if (didUnsubscribe) {
-                        // Don't run stale listeners.
-                        // Redux doesn't guarantee unsubscriptions happen until next dispatch.
-                        return;
-                    }
-                    const latestStoreState = contextValue.getState();
-                    let newChildProps;
-                    let error;
-                    try {
-                        // Actually run the selector with the most recent store state and wrapper props
-                        // to determine what the child props should be
-                        newChildProps = childPropsSelector(latestStoreState, lastWrapperProps.current);
-                    }
-                    catch (e) {
-                        error = e;
-                        lastThrownError = e;
-                    }
-                    if (!error) {
-                        lastThrownError = null;
-                    }
-                    // If the child props haven't changed, nothing to do here - cascade the subscription update
-                    if (newChildProps !== lastChildProps.current) {
-                        // Save references to the new child props.  Note that we track the "child props from store update"
-                        // as a ref instead of a useState/useReducer because we need a way to determine if that value has
-                        // been processed.  If this went into useState/useReducer, we couldn't clear out the value without
-                        // forcing another re-render, which we don't want.
-                        lastChildProps.current = newChildProps;
-                        childPropsFromStoreUpdate.current = newChildProps;
-                        // If the child props _did_ change (or we caught an error), this wrapper component needs to re-render
-                        forceComponentUpdateDispatch({
-                            type: 'STORE_UPDATED',
-                            payload: {
-                                latestStoreState,
-                                error,
-                            },
-                        });
-                    }
-                };
-                // Actually subscribe to the nearest connected ancestor (or store)
+            const subscribe = React.useCallback((reactUpdate) => {
+                if (!subscription) {
+                    return noop__default["default"];
+                }
                 subscription.setOnStateChange(() => {
                     if (!renderIsScheduled.current) {
                         renderIsScheduled.current = true;
-                        schedule(checkForUpdates);
+                        schedule(() => {
+                            reactUpdate();
+                            renderIsScheduled.current = false;
+                        });
                     }
                 });
-                // Pull data from the store after first render in case the store has
-                // changed since we began.
-                checkForUpdates();
-                const unsubscribeWrapper = () => {
-                    didUnsubscribe = true;
-                    subscription.tryUnsubscribe();
-                    if (lastThrownError) {
-                        // It's possible that we caught an error due to a bad mapState function, but the
-                        // parent re-rendered without this component and we're about to unmount.
-                        // This shouldn't happen as long as we do top-down subscriptions correctly, but
-                        // if we ever do those wrong, this throw will surface the error in our tests.
-                        // In that case, throw the error from here so it doesn't get lost.
-                        throw lastThrownError;
-                    }
+                return () => {
+                    return subscription.tryUnsubscribe();
                 };
-                return unsubscribeWrapper;
-            }, [contextValue, subscription, childPropsSelector]);
+            }, [subscription]);
+            const actualChildProps = shim.useSyncExternalStore(subscribe, actualChildPropsSelector, serverState ? childPropsSelector(serverState, wrapperProps) : actualChildPropsSelector);
             // Now that all that's done, we can finally try to actually render the child component.
             // We memoize the elements for the rendered child component as an optimization.
             const renderedWrappedComponent = React.useMemo(
             // eslint-disable-next-line react/jsx-props-no-spreading
-            () => React__default["default"].createElement(WrappedComponent, Object.assign({}, actualChildProps, { ref: forwardedRef })), [forwardedRef, actualChildProps]);
+            () => jsxRuntime.jsx(WrappedComponent, Object.assign({}, actualChildProps, { ref: forwardedRef }), void 0), [forwardedRef, actualChildProps]);
             return renderedWrappedComponent;
         };
         // If we're in "pure" mode, ensure our wrapper component only re-renders when incoming props have changed.
@@ -1058,7 +917,7 @@ pure = true,
         if (forwardRef) {
             const forwarded = React__default["default"].forwardRef(function forwardConnectRef(props, ref) {
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                return React__default["default"].createElement(Connect, Object.assign({}, props, { forwardedRef: ref }));
+                return jsxRuntime.jsx(Connect, Object.assign({}, props, { forwardedRef: ref }), void 0);
             });
             forwarded.displayName = displayName;
             forwarded.WrappedComponent = WrappedComponent;
@@ -1322,8 +1181,8 @@ function finalPropsSelectorFactory(context, { initMapStateToProps, initMapContex
     return selectorFactory(mapStateToProps, mapContextToProps, mergeProps, context, options);
 }
 
-const Provider = ({ context, children }) => {
-    return React__default["default"].createElement(ConnectContext.Provider, { value: context }, children);
+const Provider = ({ context, children, serverState, }) => {
+    return (jsxRuntime.jsx(ConnectContext.Provider, Object.assign({ value: context }, { children: jsxRuntime.jsx(ServerStateContext.Provider, Object.assign({ value: serverState }, { children: children }), void 0) }), void 0));
 };
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/state",
-  "version": "1.84.0",
+  "version": "1.89.1",
   "description": "",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -20,11 +20,12 @@
   "dependencies": {
     "@tinkoff/react-hooks": "0.0.24",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/types-actions-state-context": "1.84.0",
+    "@tramvai/types-actions-state-context": "1.89.1",
     "@types/hoist-non-react-statics": "^3.3.1",
     "invariant": "^2.2.4",
     "react-is": ">=17",
-    "tslib": "^2.0.3"
+    "tslib": "^2.0.3",
+    "use-sync-external-store": "^1.0.0"
   },
   "peerDependencies": {
     "hoist-non-react-statics": "^3.3.1",
@@ -36,6 +37,7 @@
     "@reatom/core": "^1.1.5",
     "@types/invariant": "^2.2.31",
     "@types/react-is": "^17.0.0",
+    "@types/use-sync-external-store": "^0.0.3",
     "redux": "^4.0.5"
   },
   "gitHead": "8e826a214c87b188fc4d254cdd8f2a2b2c55f3a8",