From b490a9b4b967326b89c1b915213f8c9ef9d5d2c3 Mon Sep 17 00:00:00 2001
From: Nikita Gorin <36075690+NikitaCG@users.noreply.github.com>
Date: Thu, 23 May 2024 12:55:41 +0300
Subject: [PATCH] fix: memoized code editor (#946)

* fix: memo codeEditor

* fix: memo codeEditor:revert deps
---
 .../components/CodeEditor/CodeEditor.tsx      | 103 +++++++++---------
 1 file changed, 54 insertions(+), 49 deletions(-)

diff --git a/src/editor/components/CodeEditor/CodeEditor.tsx b/src/editor/components/CodeEditor/CodeEditor.tsx
index 2f5def0fb..4d6d6a926 100644
--- a/src/editor/components/CodeEditor/CodeEditor.tsx
+++ b/src/editor/components/CodeEditor/CodeEditor.tsx
@@ -17,6 +17,8 @@ import './CodeEditor.scss';
 
 const b = block('code-editor');
 
+const ON_CHANGE_DEBOUNCE_TIMEOUT = 300;
+
 interface CodeEditorProps {
     code: string;
     fullscreenModeOn: boolean;
@@ -26,57 +28,60 @@ interface CodeEditorProps {
     message?: CodeEditorMessageProps;
 }
 
-export const CodeEditor = ({
-    onChange,
-    validator,
-    fullscreenModeOn,
-    onFullscreenModeOnUpdate,
-    code,
-}: CodeEditorProps) => {
-    const [message, setMessage] = useState(() => validator(code));
-    const {theme = Theme.Light} = useContext(EditorContext);
+export const CodeEditor = React.memo(
+    ({onChange, validator, fullscreenModeOn, onFullscreenModeOnUpdate, code}: CodeEditorProps) => {
+        const [message, setMessage] = useState(() => validator(code));
+        const {theme = Theme.Light} = useContext(EditorContext);
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const onChangeWithValidation = useCallback(
-        debounce((newCode: string) => {
-            const validationResult = validator(newCode);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        const onChangeWithValidation = useCallback(
+            debounce((newCode: string) => {
+                const validationResult = validator(newCode);
 
-            setMessage(validationResult);
-            onChange(parseCode(newCode));
-        }, 200),
-        [onChange, validator],
-    );
+                setMessage(validationResult);
+                onChange(parseCode(newCode));
+            }, ON_CHANGE_DEBOUNCE_TIMEOUT),
+            [onChange, validator],
+        );
 
-    return (
-        <div className={b({fullscreen: fullscreenModeOn})}>
-            <div className={b('header')}>
-                <Button
-                    view="flat-secondary"
-                    onClick={() => onFullscreenModeOnUpdate(!fullscreenModeOn)}
-                >
-                    <Icon
-                        data={fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight}
-                        size={16}
+        return (
+            <div className={b({fullscreen: fullscreenModeOn})}>
+                <div className={b('header')}>
+                    <Button
+                        view="flat-secondary"
+                        onClick={() => onFullscreenModeOnUpdate(!fullscreenModeOn)}
+                    >
+                        <Icon
+                            data={
+                                fullscreenModeOn ? ChevronsCollapseUpRight : ChevronsExpandUpRight
+                            }
+                            size={16}
+                        />
+                    </Button>
+                </div>
+                <div className={b('code')}>
+                    <MonacoEditor
+                        key={String(fullscreenModeOn)}
+                        defaultValue={code}
+                        value={code}
+                        language="yaml"
+                        options={options}
+                        onChange={onChangeWithValidation}
+                        theme={theme === Theme.Dark ? 'vs-dark' : 'vs'}
                     />
-                </Button>
-            </div>
-            <div className={b('code')}>
-                <MonacoEditor
-                    key={String(fullscreenModeOn)}
-                    value={code}
-                    language="yaml"
-                    options={options}
-                    onChange={onChangeWithValidation}
-                    theme={theme === Theme.Dark ? 'vs-dark' : 'vs'}
-                />
+                </div>
+                <div className={b('footer')}>
+                    {message && (
+                        <div className={b('message-container')}>
+                            <div className={b('message', {status: message.status})}>
+                                {message.text}
+                            </div>
+                        </div>
+                    )}
+                </div>
             </div>
-            <div className={b('footer')}>
-                {message && (
-                    <div className={b('message-container')}>
-                        <div className={b('message', {status: message.status})}>{message.text}</div>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};
+        );
+    },
+);
+
+CodeEditor.displayName = 'CodeEditor';