diff --git a/.changeset/empty-shirts-mate.md b/.changeset/empty-shirts-mate.md new file mode 100644 index 000000000..e1bb4400d --- /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 b2cae4d98..da574f711 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(() => {