From 7de99c30c71f66917a5a915bf9b7e24a0f094dca Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Tue, 12 Nov 2024 08:19:20 +0100 Subject: [PATCH] fix(react): useLayoutEffect instead of useEffect to cut down on reflow --- .changeset/long-pears-wash.md | 5 +++++ packages/react/src/useEditorState.ts | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/long-pears-wash.md 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 = { @@ -164,7 +164,7 @@ export function useEditorState( options.equalityFn ?? deepEqual, ) - useEffect(() => { + useLayoutEffect(() => { return editorStateManager.watch(options.editor) }, [options.editor, editorStateManager])