diff --git a/.changeset/long-pears-wash.md b/.changeset/long-pears-wash.md
new file mode 100644
index 000000000..eff6ca11a
--- /dev/null
+++ b/.changeset/long-pears-wash.md
@@ -0,0 +1,5 @@
+---
+"@tiptap/react": patch
+---
+
+This changes useEditorState to use the useLayoutEffect hook instead of the useEffect hook, so that state that might render to the page can be committed in one pass instead of two.
diff --git a/packages/react/src/useEditorState.ts b/packages/react/src/useEditorState.ts
index 26aabf038..c6292b768 100644
--- a/packages/react/src/useEditorState.ts
+++ b/packages/react/src/useEditorState.ts
@@ -1,6 +1,6 @@
 import type { Editor } from '@tiptap/core'
 import deepEqual from 'fast-deep-equal/es6/react'
-import { useDebugValue, useEffect, useState } from 'react'
+import { useDebugValue, useLayoutEffect, useState } from 'react'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 
 export type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
@@ -164,7 +164,7 @@ export function useEditorState<TSelectorResult>(
     options.equalityFn ?? deepEqual,
   )
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     return editorStateManager.watch(options.editor)
   }, [options.editor, editorStateManager])