diff --git a/packages/gatsby/cache-dir/app.js b/packages/gatsby/cache-dir/app.js
index ba2869c191a9d..87091a43c4601 100644
--- a/packages/gatsby/cache-dir/app.js
+++ b/packages/gatsby/cache-dir/app.js
@@ -33,10 +33,10 @@ window.___emitter = emitter
if (
process.env.GATSBY_EXPERIMENTAL_CONCURRENT_FEATURES &&
- !ReactDOM.unstable_createRoot
+ !ReactDOM.createRoot
) {
throw new Error(
- `The GATSBY_EXPERIMENTAL_CONCURRENT_FEATURES flag is not compatible with your React version. Please install "react@0.0.0-experimental-57768ef90" and "react-dom@0.0.0-experimental-57768ef90" or higher.`
+ `The GATSBY_EXPERIMENTAL_CONCURRENT_FEATURES flag is not compatible with your React version. Please install "react@0.0.0-experimental-2bf4805e4" and "react-dom@0.0.0-experimental-2bf4805e4" or higher.`
)
}
@@ -143,9 +143,9 @@ apiRunnerAsync(`onClientEntry`).then(() => {
if (focusEl && focusEl.children.length) {
if (
process.env.GATSBY_EXPERIMENTAL_CONCURRENT_FEATURES &&
- ReactDOM.unstable_createRoot
+ ReactDOM.createRoot
) {
- defaultRenderer = ReactDOM.unstable_createRoot
+ defaultRenderer = ReactDOM.createRoot
} else {
defaultRenderer = ReactDOM.hydrate
}
@@ -203,7 +203,7 @@ apiRunnerAsync(`onClientEntry`).then(() => {
)
document.body.append(indicatorMountElement)
- if (renderer === ReactDOM.unstable_createRoot) {
+ if (renderer === ReactDOM.createRoot) {
renderer(indicatorMountElement).render(
)
@@ -232,7 +232,7 @@ apiRunnerAsync(`onClientEntry`).then(() => {
dismissLoadingIndicator()
}
- if (renderer === ReactDOM.unstable_createRoot) {
+ if (renderer === ReactDOM.createRoot) {
renderer(rootElement, {
hydrate: true,
}).render()
diff --git a/packages/gatsby/cache-dir/production-app.js b/packages/gatsby/cache-dir/production-app.js
index 34811f4024325..4b5fc4e90e21f 100644
--- a/packages/gatsby/cache-dir/production-app.js
+++ b/packages/gatsby/cache-dir/production-app.js
@@ -194,7 +194,7 @@ apiRunnerAsync(`onClientEntry`).then(() => {
`replaceHydrateFunction`,
undefined,
process.env.GATSBY_EXPERIMENTAL_CONCURRENT_FEATURES
- ? ReactDOM.unstable_createRoot
+ ? ReactDOM.createRoot
: ReactDOM.hydrate
)[0]
@@ -204,7 +204,7 @@ apiRunnerAsync(`onClientEntry`).then(() => {
? document.getElementById(`___gatsby`)
: null
- if (renderer === ReactDOM.unstable_createRoot) {
+ if (renderer === ReactDOM.createRoot) {
renderer(container, {
hydrate: true,
}).render()
diff --git a/packages/gatsby/src/utils/flags.ts b/packages/gatsby/src/utils/flags.ts
index 423e1fa50de90..98c88c2135b68 100644
--- a/packages/gatsby/src/utils/flags.ts
+++ b/packages/gatsby/src/utils/flags.ts
@@ -187,8 +187,8 @@ const activeFlags: Array = [
testFitness: (): fitnessEnum => {
// Because of this, this flag will never show up
const semverConstraints = {
- react: `^0.0.0-experimental-57768ef90`,
- "react-dom": `^0.0.0-experimental-57768ef90`,
+ react: `^0.0.0-experimental-2bf4805e4`,
+ "react-dom": `^0.0.0-experimental-2bf4805e4`,
}
if (satisfiesSemvers(semverConstraints)) {