From da89f58c4c88cf37bf979b3344422e766b332d15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Ill=C3=A9s?= <illes.gergo@gmail.com>
Date: Fri, 27 Apr 2018 22:57:09 +0200
Subject: [PATCH] remove extra force re-renders on onCompositionStart/End
 (#1711)

---
 packages/slate-react/src/components/content.js |  8 --------
 packages/slate-react/src/plugins/before.js     | 10 ++++++++--
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/slate-react/src/components/content.js b/packages/slate-react/src/components/content.js
index 680d460e2..798fd3442 100644
--- a/packages/slate-react/src/components/content.js
+++ b/packages/slate-react/src/components/content.js
@@ -71,7 +71,6 @@ class Content extends React.Component {
   constructor(props) {
     super(props)
     this.tmp = {}
-    this.tmp.key = 0
     this.tmp.isUpdatingSelection = false
 
     EVENT_HANDLERS.forEach(handler => {
@@ -276,12 +275,6 @@ class Content extends React.Component {
   onEvent(handler, event) {
     debug('onEvent', handler)
 
-    // COMPAT: Composition events can change the DOM out of under React, so we
-    // increment this key to ensure that a full re-render happens. (2017/10/16)
-    if (handler == 'onCompositionEnd') {
-      this.tmp.key++
-    }
-
     // Ignore `onBlur`, `onFocus` and `onSelect` events generated
     // programmatically while updating selection.
     if (
@@ -491,7 +484,6 @@ class Content extends React.Component {
       <Container
         {...handlers}
         data-slate-editor
-        key={this.tmp.key}
         ref={this.ref}
         data-key={document.key}
         contentEditable={readOnly ? null : true}
diff --git a/packages/slate-react/src/plugins/before.js b/packages/slate-react/src/plugins/before.js
index a06d7ecc0..c76b01536 100644
--- a/packages/slate-react/src/plugins/before.js
+++ b/packages/slate-react/src/plugins/before.js
@@ -143,7 +143,10 @@ function BeforePlugin() {
       // HACK: we need to re-render the editor here so that it will update its
       // placeholder in case one is currently rendered. This should be handled
       // differently ideally, in a less invasive way?
-      editor.setState({ isComposing: false })
+      // (apply force re-render if isComposing changes)
+      if (editor.state.isComposing) {
+        editor.setState({ isComposing: false })
+      }
     })
 
     debug('onCompositionEnd', { event })
@@ -164,7 +167,10 @@ function BeforePlugin() {
     // HACK: we need to re-render the editor here so that it will update its
     // placeholder in case one is currently rendered. This should be handled
     // differently ideally, in a less invasive way?
-    editor.setState({ isComposing: true })
+    // (apply force re-render if isComposing changes)
+    if (!editor.state.isComposing) {
+      editor.setState({ isComposing: true })
+    }
 
     debug('onCompositionStart', { event })
   }