From 3c82af3842cb8e514cb8ba6b6734d978fa46ba84 Mon Sep 17 00:00:00 2001 From: Nick Perez Date: Tue, 12 Nov 2024 09:57:47 +0100 Subject: [PATCH] fix(react): useLayoutEffect instead of useEffect to cut down on reflow (#5825) --- .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])