fix: use layout effect to prevent tearing on Safari

Author: stipsan

src/BottomSheet.tsx

@@ -17,6 +17,7 @@ import { rubberbandIfOutOfBounds, useDrag } from 'react-use-gesture'
 import {
   useAriaHider,
   useFocusTrap,
+  useLayoutEffect,
   useReady,
   useReducedMotion,
   useScrollLock,
@@ -143,7 +144,7 @@ export const BottomSheet = React.forwardRef<
   const findSnapRef = useRef(findSnap)
   const defaultSnapRef = useRef(0)
   // Sync the refs with current state, giving the spring full control over when to respond to changes
-  useEffect(() => {
+  useLayoutEffect(() => {
     maxHeightRef.current = maxHeight
     maxSnapRef.current = maxSnap
     minSnapRef.current = minSnap
@@ -409,15 +410,15 @@ export const BottomSheet = React.forwardRef<
       send('CLOSE')
     }
   }, [_open, send, ready])
-  useEffect(() => {
+  useLayoutEffect(() => {
     // Adjust the height whenever the snap points are changed due to resize events
     if (maxHeight || maxSnap || minSnap) {
       send('RESIZE')
     }
   }, [maxHeight, maxSnap, minSnap, send])
   useEffect(
     () => () => {
-      // Ensure effects are cleaned up on unmount, in case they're not cleaend up otherwise
+      // Ensure effects are cleaned up on unmount, in case they're not cleaned up otherwise
       scrollLockRef.current.deactivate()
       focusTrapRef.current.deactivate()
       ariaHiderRef.current.deactivate()

src/hooks/useSnapPoints.tsx

@@ -11,6 +11,7 @@ import type { defaultSnapProps, ResizeSource, snapPoints } from '../types'
 import { processSnapPoints, roundAndCheckForNaN } from '../utils'
 import { useReady } from './useReady'
 import { ResizeObserverOptions } from '@juggle/resize-observer/lib/ResizeObserverOptions'
+import { useLayoutEffect } from './useLayoutEffect'
 
 export function useSnapPoints({
   contentRef,
@@ -187,13 +188,16 @@ function useElementSizeObserver(
 
   useDebugValue(`${label}: ${size}`)
 
-  const handleResize = useCallback((entries: ResizeObserverEntry[]) => {
-    // we only observe one element, so accessing the first entry here is fine
-    setSize(entries[0].borderBoxSize[0].blockSize)
-    resizeSourceRef.current = 'element'
-  }, [])
+  const handleResize = useCallback(
+    (entries: ResizeObserverEntry[]) => {
+      // we only observe one element, so accessing the first entry here is fine
+      setSize(entries[0].borderBoxSize[0].blockSize)
+      resizeSourceRef.current = 'element'
+    },
+    [resizeSourceRef]
+  )
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!ref.current || !enabled) {
       return
     }
@@ -232,7 +236,7 @@ function useMaxHeight(
     }
   }, [ready, setReady])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     // Bail if the max height is a controlled prop
     if (controlledMaxHeight) {
       setMaxHeight(roundAndCheckForNaN(controlledMaxHeight))