fix: useSyncExternalStore on SSR (#3670)

mobxjs · Mar 28, 2023 · 58bb052 · 58bb052
1 parent e03b15a
commit 58bb052
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/.changeset/eighty-feet-peel.md b/.changeset/eighty-feet-peel.md
@@ -0,0 +1,5 @@
+---
+"mobx-react-lite": patch
+---
+
+fix #3669: SSR: `useSyncExternalStore` throws due to missing `getServerSnapshot`
diff --git a/packages/mobx-react-lite/__tests__/strictAndConcurrentModeUsingFinalizationRegistry.test.tsx b/packages/mobx-react-lite/__tests__/strictAndConcurrentModeUsingFinalizationRegistry.test.tsx
@@ -2,7 +2,6 @@ import { cleanup, render, waitFor } from "@testing-library/react"
 import * as mobx from "mobx"
 import * as React from "react"
 import { useObserver } from "../src/useObserver"
-import { sleep } from "./utils"
 import gc from "expose-gc/function"
 import { observerFinalizationRegistry } from "../src/utils/observerFinalizationRegistry"
 

diff --git a/packages/mobx-react-lite/src/useObserver.ts b/packages/mobx-react-lite/src/useObserver.ts
@@ -5,6 +5,9 @@ import { isUsingStaticRendering } from "./staticRendering"
 import { observerFinalizationRegistry } from "./utils/observerFinalizationRegistry"
 import { useSyncExternalStore } from "use-sync-external-store/shim"
 
+// Required by SSR when hydrating #3669
+const getServerSnapshot = () => {}
+
 // Do not store `admRef` (even as part of a closure!) on this object,
 // otherwise it will prevent GC and therefore reaction disposal via FinalizationRegistry.
 type ObserverAdministration = {
@@ -99,7 +102,8 @@ export function useObserver<T>(render: () => T, baseComponentName: string = "obs
     useSyncExternalStore(
         // Both of these must be stable, otherwise it would keep resubscribing every render.
         adm.subscribe,
-        adm.getSnapshot
+        adm.getSnapshot,
+        getServerSnapshot
     )
 
     // render the original component, but have the