mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-11-24 03:39:01 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(react): useLayoutEffect instead of useEffect to cut down on reflow

Browse Source
This commit is contained in:
Nick the Sick 2024-11-12 08:19:20 +01:00
parent 942fd07b76
commit 7de99c30c7
No known key found for this signature in database
GPG Key ID: F575992F156E5BCC
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/long-pears-wash.md Normal file
View File

@ -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.

4
packages/react/src/useEditorState.ts
View File

@ -1,6 +1,6 @@
import type { Editor } from '@tiptap/core' import type { Editor } from '@tiptap/core'
import deepEqual from 'fast-deep-equal/es6/react' 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' import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
export type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = { export type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
@ -164,7 +164,7 @@ export function useEditorState<TSelectorResult>(
options.equalityFn ?? deepEqual, options.equalityFn ?? deepEqual,
) )
useEffect(() => { useLayoutEffect(() => {
return editorStateManager.watch(options.editor) return editorStateManager.watch(options.editor)
}, [options.editor, editorStateManager]) }, [options.editor, editorStateManager])