React 16 to 18 upgrade path for Sanity Studio - which React 17 version?

3 replies
Last updated: Jul 8, 2022
Hey everybody… I haven’t been here in some time. This is more of a react questions but since… I’m updating my Sanity Studio… I thought I’d ask here first.
My Studio is current on React 16.12. I want to get everything up to 18… but I error out having to go to React 17 first.

Does it matter which version of 17 I go to?

Any suggestions to make this a painless process? Thanks!
AI Update

Great question! While this is React-specific, it's definitely relevant since you're updating your Sanity Studio alongside it.

About upgrading from React 16 to 17:

For the specific React 17 version, it doesn't really matter which minor version you choose - any React 17.x will work as an intermediate step. React 17 was specifically designed as a "stepping stone" release with minimal breaking changes. You can safely go to React 17.0.2 (the latest 17.x) without worrying about compatibility issues within that version line.

The Sanity Studio context:

If you're currently on Sanity Studio v2 (which supported React 16), you should know that Studio v2 was deprecated when v3 launched in December 2022, and official support ended in December 2023.

This means if you're upgrading React anyway, you'll likely want to consider migrating to Sanity Studio v3 or v4 (the current version), which requires React 18. Studio v4 specifically requires:

  • React 18.2.0 or higher
  • Node.js 20+

Your migration paths:

  1. If staying on Studio v2 temporarily: Go React 16 → 17 → 18, but be aware you're on an unsupported Studio version
  2. If migrating to Studio v3/v4 (recommended): You can upgrade directly to React 18 as part of the Studio migration, skipping React 17 entirely

Tips for a painless upgrade:

  • Delete node_modules and your lock file (package-lock.json or yarn.lock), then reinstall after bumping versions
  • Test thoroughly after each major version jump
  • If you have custom Studio components or plugins, check they're compatible with React 18's concurrent rendering features
  • The React team's upgrade guides are helpful for understanding what changed between versions

If you're migrating Studio versions too:

The Studio v2 → v3/v4 migration involves more than just React - you'll need to convert from sanity.json to sanity.config.js, update plugin configurations, and potentially refactor custom components. The changes are significant but well-documented in the Sanity migration guides.

Since you're already doing a React upgrade, it might be worth doing the Studio migration at the same time to avoid upgrading React twice. What version of Sanity Studio are you currently running?

Show original thread
3 replies
The Studio is not currently compatible with React 18. We've seen a number of reported issues . You'll want to stay on
17.0.0
.
I think this may have solved an issue I am having. (I’m running react 18) When i click on a post page it generates the page just fine but then if I refresh that same page i get the error described above
Okay still had the same issue after downgrade but the below fixed it. https://sanity-io-land.slack.com/archives/C01T1B5GVEG/p1654286347242039 Sorry for posting a different problem under this thread but just wanted to update 👍

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?