Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: use memo to reduce editor state update

Browse Source
This commit is contained in:
clean99 2023-11-21 11:40:20 +08:00
parent f5804ad443
commit d9a4abcbf1
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/CodeMirror.tsx
View File

@ -1,4 +1,4 @@
import { useRef, useEffect } from "react"; import { useRef, useEffect, useMemo } from "react";
import { EditorState } from "@codemirror/state"; import { EditorState } from "@codemirror/state";
import { EditorView, keymap, lineNumbers, ViewUpdate } from "@codemirror/view"; import { EditorView, keymap, lineNumbers, ViewUpdate } from "@codemirror/view";
import { espresso, cobalt } from "thememirror"; import { espresso, cobalt } from "thememirror";
@ -22,7 +22,7 @@ interface Props {
function CodeMirror({ code, editorTheme, onCodeChange }: Props) { function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
const view = useRef<EditorView | null>(null); const view = useRef<EditorView | null>(null);
const editorState = EditorState.create({ const editorState = useMemo(() => EditorState.create({
extensions: [ extensions: [
history(), history(),
keymap.of([ keymap.of([
@ -43,7 +43,7 @@ function CodeMirror({ code, editorTheme, onCodeChange }: Props) {
} }
}), }),
], ],
}); }), [editorTheme]);
useEffect(() => { useEffect(() => {
view.current = new EditorView({ view.current = new EditorView({
state: editorState, state: editorState,