fix: memoized code editor (#946)

* fix: memo codeEditor * fix: memo codeEditor:revert deps
gravity-ui · May 23, 2024 · b490a9b · b490a9b
1 parent 217f4b1
commit b490a9b
Showing 1 changed file with 54 additions and 49 deletions.
diff --git 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';