Fix performance issue with renderPlaceholder

ianstormtaylor · Mar 6, 2023 · 33b6352 · 33b6352
1 parent 4ab18e8
commit 33b6352
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/.changeset/small-timers-sin.md b/.changeset/small-timers-sin.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fixes #5335. To prevent performance issues, make sure to wrap custom `renderPlaceholder` values in `useCallback`.
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
@@ -129,6 +129,10 @@ export type EditableProps = {
  */
 
 export const Editable = (props: EditableProps) => {
+  const defaultRenderPlaceholder = useCallback(
+    (props: RenderPlaceholderProps) => <DefaultPlaceholder {...props} />,
+    []
+  )
   const {
     autoFocus,
     decorate = defaultDecorate,
@@ -137,7 +141,7 @@ export const Editable = (props: EditableProps) => {
     readOnly = false,
     renderElement,
     renderLeaf,
-    renderPlaceholder = props => <DefaultPlaceholder {...props} />,
+    renderPlaceholder = defaultRenderPlaceholder,
     scrollSelectionIntoView = defaultScrollSelectionIntoView,
     style: userStyle = {},
     as: Component = 'div',