From 8688ed5c680069c4277d8b575b79fe525737935d Mon Sep 17 00:00:00 2001
From: Mathew Kleppin <matkle414@gmail.com>
Date: Tue, 31 Oct 2023 13:51:42 -0400
Subject: [PATCH] [editable] Fix Memory Leak when switching between focused
 editables (#5542)

* [editable] Fix Memory Leak when switching between focused editable containers

I've found a memory leak in Slate React where-in when you'd switch between two pages, each with their own editor instance, auto-focusing on these elements causes a memory leak, where there would be a lot of Detached HTML Element's just floating around.

At first I thought it a bunch of different bugs with chromium, but noticed that when I force removed the input elements from the dom before the component would unmount, we would still see small leak referencing "latestElement" (while simultaniously, I would still the element & children references in the `IN_FOCUSE` WeakMap) Looking at editable's code, I realized that we're storing state in a weird way, directly mutating it using `useMemo`, and React isn't removing all references (probably because its still stored in the WeakMap.

The simple fix for this is what I've commited; using `useLayoutEffect`, we forcably remove the `latestElement` and references to it.

* Update editable.tsx

* Add changeset

---------

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>
---
 .changeset/empty-shirts-mate.md                  |  5 +++++
 packages/slate-react/src/components/editable.tsx | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 .changeset/empty-shirts-mate.md

diff --git a/.changeset/empty-shirts-mate.md b/.changeset/empty-shirts-mate.md
new file mode 100644
index 0000000000..e1bb4400d2
--- /dev/null
+++ b/.changeset/empty-shirts-mate.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fix Memory Leak when switching between focused editables
diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx
index b2cae4d98a..da574f7117 100644
--- a/packages/slate-react/src/components/editable.tsx
+++ b/packages/slate-react/src/components/editable.tsx
@@ -4,6 +4,7 @@ import throttle from 'lodash/throttle'
 import React, {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useReducer,
   useRef,
@@ -176,6 +177,21 @@ export const Editable = (props: EditableProps) => {
     []
   )
 
+  useLayoutEffect(() => {
+    return () => {
+      if (state == null) {
+        return
+      }
+      // Avoid leaking DOM nodes when this component is unmounted.
+      if (state.latestElement != null) {
+        state.latestElement.remove()
+      }
+      if (state.latestElement != null) {
+        state.latestElement = null
+      }
+    }
+  }, [])
+
   // The autoFocus TextareaHTMLAttribute doesn't do anything on a div, so it
   // needs to be manually focused.
   useEffect(() => {