Do not try to batch updates in React >= 18 (#5460)

* Do not try to batch updates in React >= 18 * Linter fixes * Add changeset
ianstormtaylor · Jun 21, 2023 · 5339544 · 5339544
1 parent 4b8ba51
commit 5339544
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/.changeset/nice-shirts-flash.md b/.changeset/nice-shirts-flash.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Do not attempt to batch updates manually in React >= 18
diff --git a/packages/slate-react/src/components/slate.tsx b/packages/slate-react/src/components/slate.tsx
@@ -9,7 +9,7 @@ import {
 } from '../hooks/use-slate-selector'
 import { EditorContext } from '../hooks/use-slate-static'
 import { ReactEditor } from '../plugin/react-editor'
-import { IS_REACT_VERSION_17_OR_ABOVE } from '../utils/environment'
+import { REACT_MAJOR_VERSION } from '../utils/environment'
 import { EDITOR_TO_ON_CHANGE } from '../utils/weak-maps'
 
 /**
@@ -78,7 +78,7 @@ export const Slate = (props: {
 
   useIsomorphicLayoutEffect(() => {
     const fn = () => setIsFocused(ReactEditor.isFocused(editor))
-    if (IS_REACT_VERSION_17_OR_ABOVE) {
+    if (REACT_MAJOR_VERSION >= 17) {
       // In React >= 17 onFocus and onBlur listen to the focusin and focusout events during the bubbling phase.
       // Therefore in order for <Editable />'s handlers to run first, which is necessary for ReactEditor.isFocused(editor)
       // to return the correct value, we have to listen to the focusin and focusout events without useCapture here.

diff --git a/packages/slate-react/src/plugin/with-react.ts b/packages/slate-react/src/plugin/with-react.ts
@@ -36,6 +36,7 @@ import {
   NODE_TO_KEY,
 } from '../utils/weak-maps'
 import { ReactEditor } from './react-editor'
+import { REACT_MAJOR_VERSION } from '../utils/environment'
 
 /**
  * `withReact` adds React and DOM specific behaviors to the editor.
@@ -324,11 +325,17 @@ export const withReact = <T extends BaseEditor>(
   }
 
   e.onChange = options => {
-    // COMPAT: React doesn't batch `setState` hook calls, which means that the
-    // children and selection can get out of sync for one render pass. So we
-    // have to use this unstable API to ensure it batches them. (2019/12/03)
+    // COMPAT: React < 18 doesn't batch `setState` hook calls, which means
+    // that the children and selection can get out of sync for one render
+    // pass. So we have to use this unstable API to ensure it batches them.
+    // (2019/12/03)
     // https://github.com/facebook/react/issues/14259#issuecomment-439702367
-    ReactDOM.unstable_batchedUpdates(() => {
+    const maybeBatchUpdates =
+      REACT_MAJOR_VERSION < 18
+        ? ReactDOM.unstable_batchedUpdates
+        : (callback: () => void) => callback()
+
+    maybeBatchUpdates(() => {
       const onContextChange = EDITOR_TO_ON_CHANGE.get(e)
 
       if (onContextChange) {

diff --git a/packages/slate-react/src/utils/environment.ts b/packages/slate-react/src/utils/environment.ts
@@ -1,7 +1,6 @@
 import React from 'react'
 
-export const IS_REACT_VERSION_17_OR_ABOVE =
-  parseInt(React.version.split('.')[0], 10) >= 17
+export const REACT_MAJOR_VERSION = parseInt(React.version.split('.')[0], 10)
 
 export const IS_IOS =
   typeof navigator !== 'undefined' &&