feat: export useIsomorphicLayoutEffect

also rename useLayoutEffect to useIsomorphicLayoutEffect & add better isSSR check

packages/animated/src/withAnimated.tsx

@@ -10,7 +10,7 @@ import {
   FluidValue,
   addFluidObserver,
   removeFluidObserver,
-  useLayoutEffect,
+  useIsomorphicLayoutEffect,
 } from '@react-spring/shared'
 import { ElementType } from '@react-spring/types'
 
@@ -66,7 +66,7 @@ export const withAnimated = (Component: any, host: HostConfig) => {
     const observer = new PropsObserver(callback, deps)
 
     const observerRef = useRef<PropsObserver>()
-    useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       observerRef.current = observer
 
       // Observe the latest dependencies.

packages/core/src/hooks/useChain.ts

@@ -1,4 +1,4 @@
-import { each, useLayoutEffect } from '@react-spring/shared'
+import { each, useIsomorphicLayoutEffect } from '@react-spring/shared'
 import { SpringRef } from '../SpringRef'
 import { callProp } from '../helpers'
 
@@ -7,7 +7,7 @@ export function useChain(
   timeSteps?: number[],
   timeFrame = 1000
 ) {
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (timeSteps) {
       let prevDelay = 0
       each(refs, (ref, i) => {

packages/core/src/hooks/useSprings.ts

@@ -6,7 +6,7 @@ import {
   usePrev,
   useOnce,
   useForceUpdate,
-  useLayoutEffect,
+  useIsomorphicLayoutEffect,
 } from '@react-spring/shared'
 
 import {
@@ -166,14 +166,14 @@ export function useSprings(
 
   // New springs are created during render so users can pass them to
   // their animated components, but new springs aren't cached until the
-  // commit phase (see the `useLayoutEffect` callback below).
+  // commit phase (see the `useIsomorphicLayoutEffect` callback below).
   const springs = ctrls.current.map((ctrl, i) => getSprings(ctrl, updates[i]))
 
   const context = useContext(SpringContext)
   const prevContext = usePrev(context)
   const hasContext = context !== prevContext && hasProps(context)
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     layoutId.current++
 
     // Replace the cached controllers.

packages/core/src/hooks/useTrail.ts

@@ -1,4 +1,4 @@
-import { each, is, useLayoutEffect } from '@react-spring/shared'
+import { each, is, useIsomorphicLayoutEffect } from '@react-spring/shared'
 
 import { Valid } from '../types/common'
 import { PickAnimated, SpringValues, AsyncResult } from '../types'
@@ -62,7 +62,7 @@ export function useTrail(
 
   const ref = passedRef ?? result[1]
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     each(ref.current, (ctrl, i) => {
       const parent = ref.current[i + (reverse ? 1 : -1)]
       if (parent) {

packages/core/src/hooks/useTransition.tsx

@@ -8,7 +8,7 @@ import {
   useOnce,
   usePrev,
   each,
-  useLayoutEffect,
+  useIsomorphicLayoutEffect,
 } from '@react-spring/shared'
 
 import {
@@ -98,7 +98,7 @@ export function useTransition(
   const usedTransitions = useRef<TransitionState[] | null>(null)
   const prevTransitions = reset ? null : usedTransitions.current
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     usedTransitions.current = transitions
   })
 
@@ -139,7 +139,7 @@ export function useTransition(
 
   // Expired transitions that need clean up.
   const expired = (reset && usedTransitions.current) || []
-  useLayoutEffect(() =>
+  useIsomorphicLayoutEffect(() =>
     each(expired, ({ ctrl, item, key }) => {
       detachRefs(ctrl, ref)
       callProp(onDestroyed, item, key)
@@ -358,7 +358,7 @@ export function useTransition(
   const hasContext = context !== prevContext && hasProps(context)
 
   // Merge the context into each transition.
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (hasContext) {
       each(transitions, t => {
         t.ctrl.start({ default: context })
@@ -378,7 +378,7 @@ export function useTransition(
     }
   })
 
-  useLayoutEffect(
+  useIsomorphicLayoutEffect(
     () => {
       /*
        * if exitingTransitions.current has a size it means we're exiting before enter

packages/core/src/index.ts

@@ -12,7 +12,10 @@ export { SpringRef } from './SpringRef'
 export { FrameValue } from './FrameValue'
 export { Interpolation } from './Interpolation'
 export { BailSignal } from './runAsync'
-export { createInterpolator } from '@react-spring/shared'
+export {
+  createInterpolator,
+  useIsomorphicLayoutEffect,
+} from '@react-spring/shared'
 export { inferTo } from './helpers'
 
 export * from './types'

packages/shared/src/hooks/useIsMounted.ts

@@ -1,9 +1,9 @@
 import { useRef } from 'react'
-import { useLayoutEffect } from './useLayoutEffect'
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 
 export const useIsMounted = () => {
   const isMounted = useRef(false)
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     isMounted.current = true
 
     return () => {

packages/shared/src/hooks/useIsomorphicLayoutEffect.native.ts

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from 'react'
+
+export { useLayoutEffect as useIsomorphicLayoutEffect }

packages/shared/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,10 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+// For server-side rendering: https://github.com/react-spring/zustand/pull/34
+// Deno support: https://github.com/pmndrs/zustand/issues/347
+const isSSR =
+  typeof window === 'undefined' ||
+  !window.navigator ||
+  /ServerSideRendering|^Deno\//.test(window.navigator.userAgent)
+
+export const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect

packages/shared/src/index.ts

@@ -15,7 +15,7 @@ export * from './hooks/useForceUpdate'
 export * from './hooks/useMemoOne'
 export * from './hooks/useOnce'
 export * from './hooks/usePrev'
-export * from './hooks/useLayoutEffect'
+export * from './hooks/useIsomorphicLayoutEffect'
 
 export * from './fluids'