perf: memoize the extensions in code editor to reduce expensive calcu…

…lations (#441)

src/playground/components/CodeEditor.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import CodeMirror from "@uiw/react-codemirror";
 import { history } from "@codemirror/history";
 import { bracketMatching } from "@codemirror/matchbrackets";
@@ -9,20 +9,22 @@ import { Linter as ESLint } from "../node_modules/eslint/lib/linter/";
 import "../scss/editor.scss";
 
 export default function CodeEditor({ codeValue, onUpdate, eslintOptions }) {
+    const extensions = useMemo(() => [
+        history(),
+        bracketMatching(),
+        linter(esLint(new ESLint(), eslintOptions), { delay: 0 }),
+        javascript(),
+        ESLintPlaygroundTheme,
+        ESLintPlaygroundHighlightStyle
+    ], [eslintOptions]);
+
     return (
         <CodeMirror
             value={codeValue}
             minWidth="100%"
             height="100%"
             extensions={
-                [
-                    history(),
-                    bracketMatching(),
-                    linter(esLint(new ESLint(), eslintOptions), { delay: 0 }),
-                    javascript(),
-                    ESLintPlaygroundTheme,
-                    ESLintPlaygroundHighlightStyle
-                ]
+                extensions
             }
             onChange={value => {
                 onUpdate(value);