diff --git a/.changeset/great-geese-play.md b/.changeset/great-geese-play.md new file mode 100644 index 00000000..1ea9ae62 --- /dev/null +++ b/.changeset/great-geese-play.md @@ -0,0 +1,5 @@ +--- +"@preact/signals-react": patch +--- + +Silences noisy warnings about `useLayoutEffect` whilst using SSR by switching to an isomorphic layout effect hook diff --git a/packages/react/runtime/src/index.ts b/packages/react/runtime/src/index.ts index a895ab89..d85ffb0b 100644 --- a/packages/react/runtime/src/index.ts +++ b/packages/react/runtime/src/index.ts @@ -316,6 +316,9 @@ function cleanupTrailingStore() { currentStore?.f(); } +const useIsomorphicLayoutEffect = + typeof window !== "undefined" ? useLayoutEffect : useEffect; + /** * Custom hook to create the effect to track signals used during render and * subscribe to changes to rerender the component when the signals change. @@ -334,7 +337,7 @@ export function _useSignalsImplementation( useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot); store._start(); // note: _usage is a constant here, so conditional is okay - if (_usage === UNMANAGED) useLayoutEffect(cleanupTrailingStore); + if (_usage === UNMANAGED) useIsomorphicLayoutEffect(cleanupTrailingStore); return store; }