From f670dd5216fa8749ecc0a98e8865921acab72a80 Mon Sep 17 00:00:00 2001
From: Martin Schuhfuss <m.schuhfuss@gmail.com>
Date: Fri, 27 Mar 2026 16:45:45 +0100
Subject: [PATCH] fix(hooks): add fallback to useLayoutEffect for React 16/17
 compatibility

---
 src/hooks/use-effect-event.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/hooks/use-effect-event.ts b/src/hooks/use-effect-event.ts
index 636d0f0f..836f009b 100644
--- a/src/hooks/use-effect-event.ts
+++ b/src/hooks/use-effect-event.ts
@@ -3,7 +3,12 @@
 //
 // https://github.com/sanity-io/use-effect-event
 
-import {useInsertionEffect, useRef} from 'react';
+import {useInsertionEffect, useLayoutEffect, useRef} from 'react';
+
+// useInsertionEffect was added in React 18; fall back to useLayoutEffect for
+// React 16/17. Both run before useEffect, so ref.current is always up-to-date
+// by the time any passive effect (or real event) reads it.
+const useBeforeEffect = useInsertionEffect ?? useLayoutEffect;
 
 function forbiddenInRender() {
   throw new Error('useEffectEvent: invalid call during rendering.');
@@ -20,7 +25,7 @@ function useEffectEventPolyfill<const T extends (...args: any[]) => void>(
    */
   const ref = useRef(forbiddenInRender as T);
 
-  useInsertionEffect(() => {
+  useBeforeEffect(() => {
     ref.current = fn;
   }, [fn]);