⚛️ Getting ready for React 18 🪄

[joshuaellis]

Overview

This issue is for tracking changes that are required to bring the library in line with react@>=18. This would bump the project to v10. Until the release of react@18 this library will be released as an alpha. More issues will be added as time goes on, if you think there's something we need to do, let us know!

Motivation

React 18 is coming... thats motivation enough

To do

• [bug]: useTransition breaks in <StrictMode> with React 18 #1828
• All springs not working

[OleksiiKachan]

how about adding perfixes to hooks?
useSpring -> useSpring
useTransition -> useSpringTransition
useChain -> useSpringChain
and so on

[dbismut]

React should change its hook name, you were there first

[IngoValente]

Looks like mount/unmount single-component reveals break in latest alpha and v9 using react v18.
Components get mounted but keep at the initial 'from' style, without transitioning to the enter state. The 'leave' state seems to be working correctly.
This is a sandbox forked from the official docs example, only modified to use react v18:
https://codesandbox.io/s/sandpack-project-forked-81fgi?file=/App.js

[nicholaschiang]

React 18 is here! Any updates on this?

[mustafaabobakr]

Tried

yarn add react-spring@10.0.0-alpha.1

"dependencies": {
  "next": "^12.1.4",
  "react": "^18.0.0-rc.3",
  "react-dom": "^18.0.0-rc.3",
  "react-spring": "10.0.0-alpha.1"
},

But useSpring still not working with simple opacity animation

const headerAnimationProps = useSpring({
  from: { y: 100, opacity: 0 },
  to: { y: 0, opacity: 1 },
  delay: 0,
  duration: 900,
})
const subheaderAnimationProps = useSpring({
  from: { y: 80, opacity: 0 },
  to: { y: 10, opacity: 1 },
  delay: 1000,
  duration: 1000,
})

[joshuaellis]

Feel free to submit a code sandbox, but unfortunately I've been unwell so haven't had enough time to commit to investigating react18 comparability.

Will hopefully be looking at some of the issues over the next week.

[nicholaschiang]

Get better soon @joshuaellis, sorry to hear that.

[mustafaabobakr]

Get well @joshuaellis ❤

[joshuaellis]

Tried

yarn add react-spring@10.0.0-alpha.1

"dependencies": {
  "next": "^12.1.4",
  "react": "^18.0.0-rc.3",
  "react-dom": "^18.0.0-rc.3",
  "react-spring": "10.0.0-alpha.1"
},

But useSpring still not working with simple opacity animation

const headerAnimationProps = useSpring({
  from: { y: 100, opacity: 0 },
  to: { y: 0, opacity: 1 },
  delay: 0,
  duration: 900,
})
const subheaderAnimationProps = useSpring({
  from: { y: 80, opacity: 0 },
  to: { y: 10, opacity: 1 },
  delay: 1000,
  duration: 1000,
})

I've checked this out as it's a precursor to solving the transitions bug, i've released a new alpha – v9.4.5-beta.0 for people to try! I've decided not to follow through with renaming useTransition for now, so this isn't considered a breaking change release.

Please let me know if you experience any other issues (beside the transitions).