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.0-rc.2",
     "@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/types/transition.ts

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

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',