fix(remesh-react): useIsomorphicLayoutEffect instead of useLayoutEffect

remesh-js · Jan 31, 2024 · 796d77a · 796d77a
1 parent f3c117a
commit 796d77a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/packages/remesh-react/package.json b/packages/remesh-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "remesh-react",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "React adapter for remesh",
   "homepage": "https://remesh-js.github.io/remesh/dist/index.html",
   "repository": "github:remesh-js/remesh",

diff --git a/packages/remesh-react/src/remesh-react.tsx b/packages/remesh-react/src/remesh-react.tsx
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useContext, createContext, ReactNode, useCallback, useMemo } from 'react'
+import { useLayoutEffect, useRef, useContext, createContext, ReactNode, useCallback, useMemo, useEffect } from 'react'
 
 import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
@@ -14,6 +14,16 @@ import {
   RemeshSubscribeOnlyEvent,
 } from 'remesh'
 
+const useIsomorphicLayoutEffect =
+  // tslint:disable-next-line: strict-type-predicates
+  typeof window !== 'undefined' &&
+  // tslint:disable-next-line: strict-type-predicates
+  typeof window.document !== 'undefined' &&
+  // tslint:disable-next-line: deprecation & strict-type-predicates
+  typeof window.document.createElement !== 'undefined'
+    ? useLayoutEffect
+    : useEffect
+
 export type RemeshReactContext = {
   remeshStore: RemeshStore
 }
@@ -92,14 +102,14 @@ export const useRemeshQuery = function <T extends Args<Serializable>, U>(queryAc
 
   const queryKey = store.getKey(queryAction)
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     return () => {
       subscriptionRef.current?.unsubscribe()
       subscriptionRef.current = null
     }
   }, [store, queryKey])
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (subscriptionRef.current !== null) {
       return
     }
@@ -118,11 +128,11 @@ export const useRemeshEvent = function <T extends Args, U>(
   const store = useRemeshStore()
   const callbackRef = useRef(callback)
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     callbackRef.current = callback
   })
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const subscription = store.subscribeEvent(Event, (data) => {
       callbackRef.current(data)
     })
@@ -144,21 +154,21 @@ export const useRemeshDomain = function <T extends RemeshDomainDefinition, U ext
   const store = useRemeshStore()
   const domain = store.getDomain(domainAction)
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     store.igniteDomain(domainAction)
   }, [store, domainAction])
 
   const domainKey = store.getKey(domainAction)
   const subscriptionRef = useRef<{ unsubscribe: () => void } | null>(null)
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     return () => {
       subscriptionRef.current?.unsubscribe()
       subscriptionRef.current = null
     }
   }, [store, domainKey])
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (subscriptionRef.current !== null) {
       return
     }