feat!: react 19 support #2368

dagatsoin · 2025-04-18T13:59:22Z

This first is up to date from the below discussion so you don't waste time to read all the thread**

--> CURRENT RELEASE: 10.0.0-beta.0 <--

TLDR;

Todo

Why

Support for React 19.

This PR is the last attempt in date to support React 19. It follows the tremendous effort which have been poured into #2363—as a great example of community effort. Kudo kierancap for the work on the Context.

Notable changes

BREAKING CHANGE:

update(context)!: <SpringContext ...> is not usable anymore. You need to update your project to use <SpringContextProvider ...>

OTHER CHANGES:

chore(native): remove ES export and use 'exports' field in package.json to comply to Metro 0.82
chore(peer): accepts react/react-dom from 16.8 to <20
chore(peer): update konda and zdog to their react 19 compatible version
chore(deps): set demo/ci/docs to react/react-dom 19
chore(devDeps): set to react/react-dom 19
refactor: impact due to the upgrade to React 19 (linting, typing)

- fix: no initial value provided for useRef

This commit update the context creation to match react 19 types while ensure legacy compatibility.

As this release target React 19, the following commit accept any React version in the 19 range.

changeset-bot · 2025-04-18T13:59:26Z

🦋 Changeset detected

Latest commit: e75557b

The changes in this PR will be included in the next version bump.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-04-18T13:59:32Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
react-spring	✅ Ready (Inspect)	Visit Preview	Apr 29, 2025 1:01pm

kierancap · 2025-04-20T09:48:59Z

Hey! Yeah the linting/formatting parts of my PR caused me a bit of a headache too... I did run the formatting script before committing anything, which I would have thought would solve the problem! I guess not!

I would actually say that the underlying problem may be either my individual setup, or the global setup for linting/formatting in the package as a whole. (From personal experience I know how difficult it is to manage it all properly in a massive monorepo).

Do you think it'd be easier to wait for my PR to be merged - then applying the formatting fixes? (I'd actually be interested to see if you got any different results from running the pretter:check/write scripts in my branch)

Realistically if the issue is stemming from a formatting mismatch from either my machine or the monorepo as a whole - Fixing that may help to resolve the problem?

Obviously i'm happy to pull out the core parts of my PR into this PR if that's truly necessary

dagatsoin · 2025-04-20T20:10:22Z

@kierancap thanks for you answer.

After looking back at your PR, it seems that the formatting is a smaller problem since your latest commits. There are way fewer space changes. So this is not a problem anymore.

I rebased your work on my PR so here is a change log. So you have the choice to work on this one or yours.

Fixed:

Use of "any"

We were losing a lot of benefit from TypeScript static typing.

This was caused by the partial changes to the peer and dev dependencies. There are a lot of packages to update including React, React-dom, drei, and three-fiber which prevents the need to "any" all the "Tag" related types.

Using null over undefined

Some "useRef" are initialized with "null" while they were initialized with implicit undefined.

before: useRef()
now: useRef(null)

which is different from useRef(undefined) undefined !== null

To fix:

Potential breaking change on the context.

I rebased the work on jest setup and SprintContext so all the tests pass now.

But there is a catch.

Those changes were made:

(Note : I use ISpringContext for the interface to diff from the SpringContext object.)

The current version exports a context object with the following signature :
type SprintContext = React.Context<ISpringContext> & React.FC<PropsWithChildren<ISpringContext>>

But now it splits the exported context in two parts:
type SpringContextProvider = React.Provider<ISpringContext>
and
type SpringContext = React.Context<ISpringContext>

Given that the context provider was exported at the package level, it will break any project that uses SpringContext.

Ex: If my project uses the old version, switching to this new version will break this code:

import { SpringContet } from 'react-spring';

export myComp = function({children, ...props}) {
  return <SpringContext {...props}>
      {children}
    </SpringContext>
}

So, either we bump to a major version due to the breaking change, or we stay at patch/minor level and find a way to keep the same package interface.

kierancap · 2025-04-21T19:06:21Z

@kierancap thanks for you answer.

After looking back at your PR, it seems that the formatting is a smaller problem since your latest commits. There are way fewer space changes. So this is not a problem anymore.

I rebased your work on my PR so here is a change log. So you have the choice to work on this one or yours.

Fixed:

Use of "any"

We were losing a lot of benefit from TypeScript static typing.

This was caused by the partial changes to the peer and dev dependencies. There are a lot of packages to update including React, React-dom, drei, and three-fiber which prevents the need to "any" all the "Tag" related types.

Using null over undefined

Some "useRef" are initialized with "null" while they were initialized with implicit undefined.

before: useRef()

now: useRef(null)

which is different from useRef(undefined) undefined !== null

To fix:

Potential breaking change on the context.

I rebased the work on jest setup and SprintContext so all the tests pass now.

But there is a catch.

Those changes were made:

(Note : I use ISpringContext for the interface to diff from the SpringContext object.)

The current version exports a context object with the following signature :

type SprintContext = React.Context<ISpringContext> & React.FC<PropsWithChildren<ISpringContext>>

But now it splits the exported context in two parts:

type SpringContextProvider = React.Provider<ISpringContext>

and

type SpringContext = React.Context<ISpringContext>

Given that the context provider was exported at the package level, it will break any project that uses SpringContext.

Ex: If my project uses the old version, switching to this new version will break this code:
import { SpringContet } from 'react-spring';



export myComp = function({children, ...props}) {

  return <SpringContext {...props}>

      {children}

    </SpringContext>

}
So, either we bump to a major version due to the breaking change, or we stay at patch/minor level and find a way to keep the same package interface.

Hey!

So...

Any

The any was due to polymorphic components (if i'm remembering right - really annoying). If you were able to tidy those up that's great!

Refs

Completely agreed on the approach to remove undefined from useRef.

Context

I'm nearly certain that with the newest types derived from React, that merging a Provider AND Context initiator into the same object will be nigh on impossible. That's why that old setup was so un-idiomatic and seemed to chip away at the underlying context logic to allow for it to happen.

I would definitely consider a Major bump here - Josh also agreed on the context change in my initial PR.

The Provider paradigm for Context is quite popular these days, and is way simpler on the DX to use. Obviously it does give us a breaking change, but for overall maintainability I think that's a valued change

dagatsoin · 2025-04-22T07:34:46Z

@kierancap about the breaking change: indeed, I found the message where @joshuaellis agrees.

How do you want to proceed? Either you cherry pick from mine and I close this one or we continue on this one.

It remains:

document the breaking change
test with react-native

BREAKING CHANGE: updating to React 19 brings a breaking change to the SpringContext API. To add the Spring context provider, you must explicitly use SpringContextProvider. before: ```tsx import { SpringContext } from 'react-spring' ... <SpringContext ...> ... ``` now: ```tsx import { SpringContextProvider } from 'react-spring' ... <SpringContextProvider ...> ... ```

dagatsoin · 2025-04-22T09:07:05Z

Assuming the breaking change, the minimum requirements is now React 19

updated react-native to 0.78
updated react-konda to 19

dagatsoin · 2025-04-22T09:16:32Z

added a breaking change section in doc

dagatsoin · 2025-04-22T11:34:35Z

fix types error in demo due to mutliple react version:

updated styles-component
force to use newer version of react-transition-group (dependency of react-select)

dagatsoin · 2025-04-23T20:04:29Z

targets/native/tsup.config.ts

@@ -6,6 +6,7 @@ export default defineConfig(opts => {
    {
      entry: 'src/index.ts',
      name: 'react-spring_native',
+      buildFilter: ['development', 'production.min']


Added a filter to build only what needed (use case: React Native just needs CJS format)

dagatsoin · 2025-04-23T20:08:17Z

tsup.config.base.ts

  options: Options
 ): Options[] => {
-  const artifactOptions: Options[] = buildTargets.map(
+  const artifactOptions: Options[] = buildTargets
+    .filter(target => !buildFilter || buildFilter.includes(target.name))


@joshuaellis about removing the ESM build for React Native.

I use the filter here but I have an issue. I am new to turbo, so I surely miss something.

Here is a view of my logs during the build. In pink, the log for the native target show that the build are well filtered.

But the ESM flavor files still lands in the dist folder.

Have you any idea why?

Sorry why do we want to remove ESM from react-native?

Is that what other libraries do? That feels weird.

@joshuaellis I explain this here #2368 (comment)

Solved here @joshuaellis
The esOptions being present, it seems to automatically trigger the ES build regardless of the module resolution context. So I put a condition inside.

Test still passes, no regression detected.

dagatsoin · 2025-04-24T18:47:09Z

gentle ping @joshuaellis

dagatsoin · 2025-04-25T09:47:06Z

tsconfig.json

@@ -14,14 +14,14 @@
  ],
  "compilerOptions": {
    "target": "ES2020",
-    "module": "ESNext",
+    "module": "NodeNext",


As we need to get rid of ESM in the native target, we need to handle both ESM and CJS output format. Which is supported by NodeNext.

Otherwise, @react-sping/native definition will not be found at code time and crashes on tests and lint.

dagatsoin · 2025-04-25T15:31:42Z

targets/three/package.json

@@ -48,7 +48,7 @@
  },
  "peerDependencies": {
    "@react-three/fiber": ">=6.0",


Do we need to bump here ?

.github/publish-ci/cra5/package.json

demo/src/sandboxes/animating-auto/tsconfig.json

joshuaellis · 2025-04-29T13:00:37Z

10.0.0-beta.0 should be released for trying now.

lavrton · 2025-04-29T16:32:43Z

Tested the 10.0.0-beta.0 version with Konva integration and the latest react/react-dom/react-konva versions. The minimal example is working just fine: https://codesandbox.io/p/sandbox/compassionate-hodgkin-7h4wvl?file=%2Fsrc%2Findex.js

Daniel Neveux added 7 commits April 18, 2025 09:52

chore(deps): update to react 19

a251806

refactor: impact of the upgrade to React 19

9d7ad38

- fix: no initial value provided for useRef

chore(deps): update fiber and drei to match react 19

cdbd80b

chore: removed unused '@ts-expect-error' directive

4aba1da

refactor: update context creation

864222f

This commit update the context creation to match react 19 types while ensure legacy compatibility.

chore(deps): update react and react dom

9dfdf9c

As this release target React 19, the following commit accept any React version in the 19 range.

refactor: revert null to undefined

e74ea7f

vercel bot deployed to Preview April 18, 2025 14:01 View deployment

update: rebase @keriancap work

ba9992b

vercel bot deployed to Preview April 20, 2025 19:38 View deployment

dagatsoin changed the title ~~chore: upgrade to react 19~~ feat: react 19 support Apr 22, 2025

update(doc): install instruction for react < 19

d325a8b

vercel bot deployed to Preview April 22, 2025 08:18 View deployment

dagatsoin changed the title ~~feat: react 19 support~~ feat!: react 19 support Apr 22, 2025

vercel bot deployed to Preview April 22, 2025 09:07 View deployment

doc: add a breaking change section

acc123c

vercel bot deployed to Preview April 22, 2025 09:18 View deployment

mknepprath mentioned this pull request Apr 22, 2025

Bump react and @types/react mknepprath/mknepprath-next#1844

Open

fix: multiple react version due to dependance tree

ce17f6b

vercel bot deployed to Preview April 22, 2025 11:34 View deployment

vercel bot deployed to Preview April 23, 2025 19:03 View deployment

wip: filter build

ee1f9ae

dagatsoin commented Apr 23, 2025

View reviewed changes

vercel bot deployed to Preview April 23, 2025 20:05 View deployment

dagatsoin commented Apr 23, 2025

View reviewed changes

impact of removing ES output from native target

9728afd

vercel bot deployed to Preview April 25, 2025 09:39 View deployment

dagatsoin commented Apr 25, 2025

View reviewed changes

clean and comment

5bc1f2e

vercel bot deployed to Preview April 25, 2025 10:01 View deployment

remove @types/react-transition-group

0096ea9

vercel bot deployed to Preview April 25, 2025 15:29 View deployment

dagatsoin commented Apr 25, 2025

View reviewed changes

targets/three/package.json

@@ -48,7 +48,7 @@

},

"peerDependencies": {

"@react-three/fiber": ">=6.0",

Copy link

Author

dagatsoin Apr 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to bump here ?

dagatsoin commented Apr 25, 2025

View reviewed changes

.github/publish-ci/cra5/package.json Show resolved Hide resolved

dagatsoin commented Apr 25, 2025

View reviewed changes

demo/src/sandboxes/animating-auto/tsconfig.json Show resolved Hide resolved

remove allowSyntheticDefaultImports

1829b73

vercel bot deployed to Preview April 25, 2025 15:54 View deployment

revert unwanted changes

7d2accc

vercel bot deployed to Preview April 25, 2025 16:06 View deployment

chore: ci fixes

784671b

vercel bot deployed to Preview April 29, 2025 12:47 View deployment

joshuaellis mentioned this pull request Apr 29, 2025

Feat: React 19 Upgrade #2363

Closed

4 tasks

vercel bot deployed to Preview April 29, 2025 12:50 View deployment

chore: bump to beta

e75557b

joshuaellis force-pushed the chore/upgrade-react-19 branch from f3e28e5 to e75557b Compare April 29, 2025 12:58

vercel bot deployed to Preview April 29, 2025 13:01 View deployment

plouc mentioned this pull request Apr 30, 2025

React 19 Support plouc/nivo#2618

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat!: react 19 support #2368

feat!: react 19 support #2368

dagatsoin commented Apr 18, 2025 •

edited

Loading

changeset-bot bot commented Apr 18, 2025 •

edited

Loading

vercel bot commented Apr 18, 2025 •

edited

Loading

kierancap commented Apr 20, 2025

dagatsoin commented Apr 20, 2025

kierancap commented Apr 21, 2025

Fixed:

Use of "any"

Using null over undefined

To fix:

Potential breaking change on the context.

dagatsoin commented Apr 22, 2025 •

edited

Loading

dagatsoin commented Apr 22, 2025

dagatsoin commented Apr 22, 2025

dagatsoin commented Apr 22, 2025

dagatsoin Apr 23, 2025

dagatsoin Apr 23, 2025

joshuaellis Apr 24, 2025

dagatsoin Apr 25, 2025

dagatsoin Apr 25, 2025

dagatsoin commented Apr 24, 2025

dagatsoin Apr 25, 2025

dagatsoin Apr 25, 2025

joshuaellis commented Apr 29, 2025

lavrton commented Apr 29, 2025 •

edited

Loading

feat!: react 19 support #2368

Are you sure you want to change the base?

feat!: react 19 support #2368

Conversation

dagatsoin commented Apr 18, 2025 • edited Loading

--> CURRENT RELEASE: 10.0.0-beta.0 <--

Todo

Why

Notable changes

changeset-bot bot commented Apr 18, 2025 • edited Loading

🦋 Changeset detected

vercel bot commented Apr 18, 2025 • edited Loading

kierancap commented Apr 20, 2025

dagatsoin commented Apr 20, 2025

Fixed:

Use of "any"

Using null over undefined

To fix:

Potential breaking change on the context.

kierancap commented Apr 21, 2025

Fixed:

Use of "any"

Using null over undefined

To fix:

Potential breaking change on the context.

Any

Refs

Context

dagatsoin commented Apr 22, 2025 • edited Loading

dagatsoin commented Apr 22, 2025

dagatsoin commented Apr 22, 2025

dagatsoin commented Apr 22, 2025

dagatsoin Apr 23, 2025

Choose a reason for hiding this comment

dagatsoin Apr 23, 2025

Choose a reason for hiding this comment

joshuaellis Apr 24, 2025

Choose a reason for hiding this comment

dagatsoin Apr 25, 2025

Choose a reason for hiding this comment

dagatsoin Apr 25, 2025

Choose a reason for hiding this comment

dagatsoin commented Apr 24, 2025

dagatsoin Apr 25, 2025

Choose a reason for hiding this comment

dagatsoin Apr 25, 2025

Choose a reason for hiding this comment

joshuaellis commented Apr 29, 2025

lavrton commented Apr 29, 2025 • edited Loading

dagatsoin commented Apr 18, 2025 •

edited

Loading

changeset-bot bot commented Apr 18, 2025 •

edited

Loading

vercel bot commented Apr 18, 2025 •

edited

Loading

dagatsoin commented Apr 22, 2025 •

edited

Loading

lavrton commented Apr 29, 2025 •

edited

Loading