From 62f8ddd9713617bf474968a10b69c24b71074b41 Mon Sep 17 00:00:00 2001
From: Joe Anderson <joe@mousetrapped.co.uk>
Date: Mon, 6 Mar 2023 16:38:07 +0000
Subject: [PATCH] Fix performance issue with renderPlaceholder (#5339)

---
 .changeset/small-timers-sin.md                   | 5 +++++
 packages/slate-react/src/components/editable.tsx | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/small-timers-sin.md

diff --git a/.changeset/small-timers-sin.md b/.changeset/small-timers-sin.md
new file mode 100644
index 000000000..5d67d3550
--- /dev/null
+++ 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
index 448025b1b..20672e46a 100644
--- 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',