fix: react layout effect warning

Author: segunadebayo

packages/frameworks/react/src/bindable.ts

@@ -1,7 +1,8 @@
-import { isFunction } from "@zag-js/utils"
 import type { Bindable, BindableParams } from "@zag-js/core"
-import { useLayoutEffect, useRef, useState } from "react"
+import { isFunction } from "@zag-js/utils"
+import { useRef, useState } from "react"
 import { flushSync } from "react-dom"
+import { useSafeLayoutEffect } from "./use-layout-effect"
 
 const identity = (v: VoidFunction) => v()
 
@@ -23,7 +24,7 @@ export function useBindable<T>(props: () => BindableParams<T>): Bindable<T> {
   valueRef.current = controlled ? props().value : value
 
   const prevValue = useRef(valueRef.current)
-  useLayoutEffect(() => {
+  useSafeLayoutEffect(() => {
     prevValue.current = valueRef.current
   }, [value, props().value])
 

packages/frameworks/react/src/machine.ts

@@ -14,11 +14,12 @@ import type {
 } from "@zag-js/core"
 import { createScope } from "@zag-js/core"
 import { isFunction, isString, toArray, warn } from "@zag-js/utils"
-import { useLayoutEffect, useMemo, useRef } from "react"
+import { useMemo, useRef } from "react"
 import { flushSync } from "react-dom"
 import { useBindable } from "./bindable"
 import { useRefs } from "./refs"
 import { useTrack } from "./track"
+import { useSafeLayoutEffect } from "./use-layout-effect"
 
 export function useMachine<T extends BaseSchema>(
   machine: MachineConfig<T>,
@@ -187,7 +188,7 @@ export function useMachine<T extends BaseSchema>(
     },
   }))
 
-  useLayoutEffect(() => {
+  useSafeLayoutEffect(() => {
     state.invoke(state.initial!, "__init__")
     const fns = effects.current
     return () => {

packages/frameworks/react/src/use-layout-effect.ts

@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from "react"
+
+export const useSafeLayoutEffect = typeof globalThis !== "undefined" ? useLayoutEffect : useEffect