feat: React 19 support

docs/package.json

@@ -32,6 +32,7 @@
     "@remix-run/serve": "2.15.2",
     "@remix-run/server-runtime": "2.15.2",
     "@supabase/supabase-js": "2.47.10",
+    "@use-gesture/react": "^10.3.1",
     "@vanilla-extract/css": "1.17.0",
     "@vanilla-extract/dynamic": "2.1.2",
     "@vanilla-extract/recipes": "0.5.5",
@@ -44,6 +45,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-select": "5.9.0",
+    "react-use-measure": "^2.1.1",
     "zod": "3.24.1"
   },
   "devDependencies": {

package.json

@@ -66,7 +66,7 @@
     "@changesets/cli": "2.27.11",
     "@commitlint/cli": "19.6.1",
     "@commitlint/config-conventional": "19.6.0",
-    "@react-three/fiber": "8.17.10",
+    "@react-three/fiber": "^9.0.4",
     "@remix-run/dev": "2.15.2",
     "@simonsmith/cypress-image-snapshot": "9.1.0",
     "@swc/core": "1.10.4",
@@ -79,8 +79,8 @@
     "@types/jest": "29.5.14",
     "@types/lodash.clamp": "4.0.9",
     "@types/lodash.shuffle": "4.2.9",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "19.0.2",
     "@types/react-lazyload": "3.2.3",
     "@types/react-native": "0.73.0",
     "@types/styled-components": "5.1.34",
@@ -95,8 +95,8 @@
     "mock-raf": "npm:@react-spring/[email protected]",
     "prettier": "3.4.2",
     "pretty-quick": "4.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-konva": "18.2.10",
     "react-native": "0.76.5",
     "react-zdog": "1.2.2",

packages/animated/src/withAnimated.tsx

@@ -1,5 +1,12 @@
 import * as React from 'react'
-import { forwardRef, useRef, Ref, useCallback, useEffect } from 'react'
+import {
+  forwardRef,
+  useRef,
+  Ref,
+  useCallback,
+  useEffect,
+  MutableRefObject,
+} from 'react'
 import {
   is,
   each,
@@ -66,7 +73,10 @@ export const withAnimated = (Component: any, host: HostConfig) => {
 
     const observer = new PropsObserver(callback, deps)
 
-    const observerRef = useRef<PropsObserver>()
+    // NOTE: useRef is bugged as immutable in 18.3 types
+    const observerRef = useRef<PropsObserver>(
+      null
+    ) as MutableRefObject<PropsObserver | null>
     useIsomorphicLayoutEffect(() => {
       observerRef.current = observer
 

packages/core/src/SpringContext.tsx

@@ -13,33 +13,54 @@ export interface SpringContext {
   immediate?: boolean
 }
 
-export const SpringContext = ({
-  children,
-  ...props
-}: PropsWithChildren<SpringContext>) => {
-  const inherited = useContext(ctx)
+export const SpringContext = makeRenderableContext<
+  SpringContext,
+  PropsWithChildren<SpringContext>
+>(
+  Context =>
+    ({ children, ...props }) => {
+      const inherited = useContext(Context)
 
-  // Inherited values are dominant when truthy.
-  const pause = props.pause || !!inherited.pause,
-    immediate = props.immediate || !!inherited.immediate
+      // Inherited values are dominant when truthy.
+      const pause = props.pause || !!inherited.pause
+      const immediate = props.immediate || !!inherited.immediate
 
-  // Memoize the context to avoid unwanted renders.
-  props = useMemoOne(() => ({ pause, immediate }), [pause, immediate])
+      // Memoize the context to avoid unwanted renders.
+      props = useMemoOne(() => ({ pause, immediate }), [pause, immediate])
 
-  const { Provider } = ctx
-  return <Provider value={props}>{children}</Provider>
+      return <Context.Provider value={props}>{children}</Context.Provider>
+    },
+  {} as SpringContext
+)
+
+interface RenderableContext<T, P> extends React.ProviderExoticComponent<P> {
+  Provider: RenderableContext<T, P>
+  Consumer: React.Consumer<T>
+  displayName?: string
 }
 
-const ctx = makeContext(SpringContext, {} as SpringContext)
+/** Make the `target` compatible with `useContext` */
+function makeRenderableContext<T, P>(
+  target: (context: React.Context<T>) => React.FunctionComponent<P>,
+  init: T
+): RenderableContext<T, P> {
+  let context = React.createContext(init)
+  context = Object.assign(target(context), context)
+
+  // https://github.com/facebook/react/pull/28226
+  if ('_context' in context.Provider) {
+    context.Provider._context = context
+  } else {
+    // @ts-ignore React 18 types disallow this
+    context.Provider = context
+  }
 
-// Allow `useContext(SpringContext)` in TypeScript.
-SpringContext.Provider = ctx.Provider
-SpringContext.Consumer = ctx.Consumer
+  if ('_context' in context.Consumer) {
+    context.Consumer._context = context
+  } else {
+    // @ts-expect-error
+    context.Consumer = context
+  }
 
-/** Make the `target` compatible with `useContext` */
-function makeContext<T>(target: any, init: T): React.Context<T> {
-  Object.assign(target, React.createContext(init))
-  target.Provider._context = target
-  target.Consumer._context = target
-  return target
+  return context as unknown as RenderableContext<T, P>
 }

packages/core/src/components/Spring.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import { NoInfer, UnknownProps } from '@react-spring/types'
 import { useSpring, UseSpringProps } from '../hooks/useSpring'
 import { SpringValues, SpringToFn, SpringChain } from '../types'

packages/core/src/components/Transition.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react'
 import { Valid } from '../types/common'
 import { TransitionComponentProps } from '../types'
 import { useTransition } from '../hooks'

packages/core/src/hooks/useInView.ts

@@ -35,7 +35,7 @@ export function useInView<TElement extends HTMLElement>(
   args?: IntersectionArgs
 ) {
   const [isInView, setIsInView] = useState(false)
-  const ref = useRef<TElement>()
+  const ref = useRef<TElement>(null)
 
   const propsFn = is.fun(props) && props
 

packages/core/src/hooks/useSpring.test.tsx

@@ -115,7 +115,7 @@ interface TestContext extends SpringContext {
 }
 
 function createUpdater(Component: React.ComponentType<{ args: [any, any?] }>) {
-  let prevElem: JSX.Element | undefined
+  let prevElem: React.JSX.Element | undefined
   let result: RenderResult | undefined
 
   const context: TestContext = {
@@ -139,7 +139,7 @@ function createUpdater(Component: React.ComponentType<{ args: [any, any?] }>) {
     }
   })
 
-  function renderWithContext(elem: JSX.Element) {
+  function renderWithContext(elem: React.JSX.Element) {
     const wrapped = <SpringContext {...context}>{elem}</SpringContext>
     if (result) result.rerender(wrapped)
     else result = render(wrapped)

packages/core/src/hooks/useSprings.ts

@@ -82,7 +82,7 @@
   // Create a local ref if a props function or deps array is ever passed.
   const ref = useMemo(
     () => (propsFn || arguments.length == 3 ? SpringRef() : void 0),
     []
   )
 
   interface State {
@@ -124,11 +124,12 @@
             })
       },
     }),
     []
   )
 
   const ctrls = useRef([...state.ctrls])
-  const updates: any[] = []
+  const updates = useRef<any[]>(null!)
+  updates.current ??= []
 
   // Cache old controllers to dispose in the commit phase.
   const prevLength = usePrev(length) || 0
@@ -144,13 +145,13 @@
     ctrls.current.length = length
 
     declareUpdates(prevLength, length)
   }, [length])
 
   // Update existing controllers when "deps" are changed.
   useMemo(() => {
     declareUpdates(0, Math.min(prevLength, length))
     // @ts-expect-error – we want to allow passing undefined to useMemo
   }, deps)
 
   /** Fill the `updates` array with declarative updates for the given index range. */
   function declareUpdates(startIndex: number, endIndex: number) {
@@ -164,15 +165,17 @@
         : (props as any)[i]
 
       if (update) {
-        updates[i] = declareUpdate(update)
+        updates.current[i] = declareUpdate(update)
       }
     }
   }
 
   // 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 `useIsomorphicLayoutEffect` callback below).
-  const springs = ctrls.current.map((ctrl, i) => getSprings(ctrl, updates[i]))
+  const springs = ctrls.current.map((ctrl, i) =>
+    getSprings(ctrl, updates.current[i])
+  )
 
   const context = useContext(SpringContext)
   const prevContext = usePrev(context)
@@ -202,7 +205,7 @@
       }
 
       // Apply updates created during render.
-      const update = updates[i]
+      const update = updates.current[i]
       if (update) {
         // Update the injected ref if needed.
         replaceRef(ctrl, update.ref)
@@ -214,6 +217,8 @@
         } else {
           ctrl.start(update)
         }
+
+        updates.current[i] = null
       }
     })
   })

packages/core/src/types/transition.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, JSX } from 'react'
 import {
   Lookup,
   ObjectFromUnion,

packages/core/test/setup.ts

@@ -60,9 +60,6 @@ beforeEach(() => {
     requestAnimationFrame: global.mockRaf.raf,
     colors,
     skipAnimation: false,
-    // This lets our useTransition hook force its component
-    // to update from within an "onRest" handler.
-    batchedUpdates: act,
   })
 })
 
@@ -138,7 +135,7 @@ global.advanceUntil = async test => {
       willAdvance: observe,
     })
 
-    jest.advanceTimersByTime(1000 / 60)
+    await act(() => jest.advanceTimersByTimeAsync(1000 / 60))
     global.mockRaf.step()
 
     // Stop observing after the frame is processed.
@@ -147,7 +144,7 @@ global.advanceUntil = async test => {
     }
 
     // Ensure pending effects are flushed.
-    await flushMicroTasks()
+    await act(() => flushMicroTasks())
 
     // Prevent infinite recursion.
     if (++steps > 1e3) {

packages/parallax/src/index.tsx

@@ -143,7 +143,7 @@ export const ParallaxLayer = React.memo(
 
       React.useImperativeHandle(ref, () => layer)
 
-      const layerRef = useRef<any>()
+      const layerRef = useRef<any>(null)
 
       const setSticky = (height: number, scrollTop: number) => {
         const start = layer.sticky!.start! * height
@@ -229,8 +229,8 @@ export const Parallax = React.memo(
       ...rest
     } = props
 
-    const containerRef = useRef<any>()
-    const contentRef = useRef<any>()
+    const containerRef = useRef<any>(null)
+    const contentRef = useRef<any>(null)
 
     const state: IParallax = useMemoOne(
       () => ({

packages/shared/src/hooks/useMemoOne.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, MutableRefObject } from 'react'
 
 type Cache<T> = {
   inputs?: any[]
@@ -14,7 +14,8 @@ export function useMemoOne<T>(getResult: () => T, inputs?: any[]): T {
     })
   )
 
-  const committed = useRef<Cache<T>>()
+  // NOTE: useRef is bugged as immutable in 18.3 types
+  const committed = useRef<Cache<T>>(null) as MutableRefObject<Cache<T> | null>
   const prevCache = committed.current
 
   let cache = prevCache

packages/shared/src/hooks/usePrev.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 
 /** Use a value from the previous render */
 export function usePrev<T>(value: T): T | undefined {
-  const prevRef = useRef<any>()
+  const prevRef = useRef<any>(null)
   useEffect(() => {
     prevRef.current = value
   })

targets/three/src/animated.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { CSSProperties, ForwardRefExoticComponent, FC } from 'react'
+import { CSSProperties, ForwardRefExoticComponent, FC, JSX } from 'react'
 import {
   AssignableKeys,
   ComponentPropsWithRef,

targets/three/src/index.ts

@@ -19,7 +19,7 @@ addEffect(() => {
 })
 
 const host = createHost(primitives, {
-  // @ts-expect-error r3f related
+  // @ts-ignore related to R3F v8
   applyAnimatedValues: applyProps,
 })
 

targets/three/src/primitives.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import '@react-three/fiber'
+import { JSX } from 'react'
 
 export type Primitives = keyof JSX.IntrinsicElements
 

targets/web/src/primitives.ts

@@ -1,3 +1,5 @@
+import { JSX } from 'react'
+
 export type Primitives = keyof JSX.IntrinsicElements
 export const primitives: Primitives[] = [
   'a',