From 80661509ecf39b5d8256fa387c7eff15f60bf612 Mon Sep 17 00:00:00 2001
From: Masanori Onoue <ugaya40@hotmail.com>
Date: Sat, 5 Feb 2022 20:36:25 +0900
Subject: [PATCH] fix not update state when unmounted (#4819)

* fix not update state when unmounted

* add changeset
---
 .changeset/hot-beers-poke.md                  | 5 +++++
 packages/slate-react/src/components/slate.tsx | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/hot-beers-poke.md

diff --git a/.changeset/hot-beers-poke.md b/.changeset/hot-beers-poke.md
new file mode 100644
index 000000000..a25558b0b
--- /dev/null
+++ b/.changeset/hot-beers-poke.md
@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Fix a possible update of react state after Slate component is unmounted
diff --git a/packages/slate-react/src/components/slate.tsx b/packages/slate-react/src/components/slate.tsx
index 02cafc1be..b1af68856 100644
--- a/packages/slate-react/src/components/slate.tsx
+++ b/packages/slate-react/src/components/slate.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback, useEffect } from 'react'
+import React, { useMemo, useState, useCallback, useEffect, useRef } from 'react'
 import { Editor, Node, Element, Descendant } from 'slate'
 import { ReactEditor } from '../plugin/react-editor'
 import { FocusedContext } from '../hooks/use-focused'
@@ -19,6 +19,7 @@ export const Slate = (props: {
   onChange: (value: Descendant[]) => void
 }) => {
   const { editor, children, onChange, value, ...rest } = props
+  const unmountRef = useRef(false)
 
   const [context, setContext] = React.useState<[ReactEditor]>(() => {
     if (!Node.isNodeList(value)) {
@@ -47,6 +48,7 @@ export const Slate = (props: {
   useEffect(() => {
     return () => {
       EDITOR_TO_ON_CHANGE.set(editor, () => {})
+      unmountRef.current = true
     }
   }, [])
 
@@ -59,6 +61,9 @@ export const Slate = (props: {
   useIsomorphicLayoutEffect(() => {
     const fn = () => {
       setTimeout(() => {
+        if (unmountRef.current) {
+          return
+        }
         setIsFocused(ReactEditor.isFocused(editor))
       }, 0)
     }