avoid unnecessary render of Slate

zetkin · Sep 18, 2023 · 3f84b0d · 3f84b0d
1 parent d06fcd3
commit 3f84b0d
Showing 1 changed file with 16 additions and 4 deletions.
diff --git a/src/zui/ZUITextEditor/index.tsx b/src/zui/ZUITextEditor/index.tsx
@@ -20,7 +20,13 @@ import {
   Slate,
   withReact,
 } from 'slate-react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import './types';
 import { FileUpload } from 'features/files/hooks/useFileUploads';
@@ -125,15 +131,18 @@ const ZUITextEditor: React.FunctionComponent<ZUITextEditorProps> = ({
     return editor;
   };
 
+  const markdownValue = useRef('');
   const [initialValueSlate, setInitialValueSlate] = useState<
     Descendant[] | null
   >(null);
 
   useEffect(() => {
     (async () => {
       if (initialValue) {
-        const slate = await markdownToSlate(initialValue as string);
-        setInitialValueSlate(slate as Descendant[]);
+        if (initialValue !== markdownValue.current) {
+          const slate = await markdownToSlate(initialValue);
+          setInitialValueSlate(slate as Descendant[]);
+        }
       } else {
         setInitialValueSlate(emptySlate);
       }
@@ -163,7 +172,10 @@ const ZUITextEditor: React.FunctionComponent<ZUITextEditorProps> = ({
           <Slate
             editor={editor}
             initialValue={initialValueSlate}
-            onChange={(slateArray) => onChange(slateToMarkdown(slateArray))}
+            onChange={(slateArray) => {
+              markdownValue.current = slateToMarkdown(slateArray);
+              onChange(markdownValue.current);
+            }}
           >
             <Editable
               autoFocus