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 (#5825)
Some checks failed
build / lint (20) (push) Has been cancelled
Details
build / test (20, map[name:Demos/Examples spec:./demos/src/Examples/**/*.spec.{js,ts}]) (push) Has been cancelled
Details
build / test (20, map[name:Demos/Experiments spec:./demos/src/Experiments/**/*.spec.{js,ts}]) (push) Has been cancelled
Details
build / test (20, map[name:Demos/Extensions spec:./demos/src/Extensions/**/*.spec.{js,ts}]) (push) Has been cancelled
Details
build / test (20, map[name:Demos/GuideContent spec:./demos/src/GuideContent/**/*.spec.{js,ts}]) (push) Has been cancelled
Details
build / test (20, map[name:Demos/GuideGettingStarted spec:./demos/src/GuideGettingStarted/**/*.spec.{js,ts}]) (push) Has been cancelled
Details
build / test (20, map[name:Demos/Marks spec:./demos/src/Marks/**/*.spec.{js,ts}]) (push) Has been cancelled
Details
build / test (20, map[name:Demos/Nodes spec:./demos/src/Nodes/**/*.spec.{js,ts}]) (push) Has been cancelled
Details
build / test (20, map[name:Integration spec:./tests/cypress/integration/**/*.spec.{js,ts}]) (push) Has been cancelled
Details
Publish / Release (20) (push) Has been cancelled
Details
build / build (20) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Nick Perez 2024-11-12 09:57:47 +01:00 committed by GitHub
parent 942fd07b76
commit 3c82af3842
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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 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])