Refactor state flow to boost performance

For intervals < ~24ms, the main thread as unable to cope up in handling
worker responses due to Mainframe rendering on each execution. To
resolve this, this commit delegates all execution-time states to child
components, controlled imperatively from Mainframe.

This yields huge performance boost, with main thread keeping up with
worker responses even at interval of 5ms.

ui/Mainframe.tsx

@@ -3,34 +3,39 @@ import { CodeEditor, CodeEditorRef } from "../ui/code-editor";
 import { InputEditor, InputEditorRef } from "../ui/input-editor";
 import { MainLayout } from "../ui/MainLayout";
 import { useExecController } from "../ui/use-exec-controller";
-import {
+import { LanguageProvider, StepExecutionResult } from "../engines/types";
-  DocumentRange,
-  LanguageProvider,
-  StepExecutionResult,
-} from "../engines/types";
 import BrainfuckProvider from "../engines/brainfuck";
-import { OutputViewer } from "../ui/output-viewer";
+import { OutputViewer, OutputViewerRef } from "../ui/output-viewer";
 import { ExecutionControls } from "./execution-controls";
+import { RendererRef, RendererWrapper } from "./renderer-wrapper";
 
+/**
+ * React component that contains and controls the entire IDE.
+ *
+ * For performance reasons, Mainframe makes spare use of state hooks. This
+ * component is rather expensive to render, and will block the main thread on
+ * small execution intervals if rendered on every execution. All state management
+ * is delegated to imperatively controlled child components.
+ */
 export const Mainframe = () => {
-  const codeEditorRef = React.useRef<CodeEditorRef>(null);
+  // Language provider and engine
-  const inputEditorRef = React.useRef<InputEditorRef>(null);
   const providerRef = React.useRef<LanguageProvider<any>>(BrainfuckProvider);
   const execController = useExecController();
 
-  // UI states used in execution time
+  // Refs for controlling UI components
+  const codeEditorRef = React.useRef<CodeEditorRef>(null);
+  const inputEditorRef = React.useRef<InputEditorRef>(null);
+  const outputEditorRef = React.useRef<OutputViewerRef>(null);
+  const rendererRef = React.useRef<RendererRef<any>>(null);
+
+  // Interval of execution
   const [execInterval, setExecInterval] = React.useState(20);
-  const [rendererState, setRendererState] = React.useState<any>(null);
-  const [output, setOutput] = React.useState<string | null>(null);
-  const [codeHighlights, setCodeHighlights] = React.useState<
-    DocumentRange | undefined
-  >();
 
   /** Utility that updates UI with the provided execution result */
   const updateWithResult = (result: StepExecutionResult<any>) => {
-    setRendererState(result.rendererState);
+    rendererRef.current!.updateState(result.rendererState);
-    setCodeHighlights(result.nextStepLocation || undefined);
+    codeEditorRef.current!.updateHighlights(result.nextStepLocation);
-    setOutput((o) => (o || "") + (result.output || ""));
+    outputEditorRef.current!.append(result.output);
   };
 
   /** Reset and begin a new execution */
@@ -43,8 +48,7 @@ export const Mainframe = () => {
     }
 
     // Reset any existing execution state
-    setOutput("");
+    outputEditorRef.current!.reset();
-    setRendererState(null);
     await execController.resetState();
     await execController.prepare(
       codeEditorRef.current!.getValue(),
@@ -104,9 +108,9 @@ export const Mainframe = () => {
 
     // Reset all execution states
     await execController.resetState();
-    setOutput(null);
+    outputEditorRef.current!.reset();
-    setRendererState(null);
+    rendererRef.current!.updateState(null);
-    setCodeHighlights(undefined);
+    codeEditorRef.current!.updateHighlights(null);
   };
 
   /** Translate execution controller state to debug controls state */
@@ -123,7 +127,6 @@ export const Mainframe = () => {
         <CodeEditor
           ref={codeEditorRef}
           languageId="brainfuck"
-          highlights={codeHighlights}
           defaultValue={providerRef.current.sampleProgram}
           tokensProvider={providerRef.current.editorTokensProvider}
           onUpdateBreakpoints={(newPoints) =>
@@ -132,10 +135,13 @@ export const Mainframe = () => {
         />
       )}
       renderRenderer={() => (
-        <providerRef.current.Renderer state={rendererState} />
+        <RendererWrapper
+          ref={rendererRef}
+          renderer={providerRef.current.Renderer}
+        />
       )}
       renderInput={() => <InputEditor ref={inputEditorRef} />}
-      renderOutput={() => <OutputViewer value={output} />}
+      renderOutput={() => <OutputViewer ref={outputEditorRef} />}
       renderExecControls={() => (
         <ExecutionControls
           state={getDebugState()}

ui/code-editor/index.tsx

@@ -7,10 +7,10 @@ import { useEditorBreakpoints } from "./use-editor-breakpoints";
 
 // Interface for interacting with the editor
 export interface CodeEditorRef {
-  /**
+  /** Get the current text content of the editor */
-   * Get the current text content of the editor.
-   */
   getValue: () => string;
+  /** Update code highlights */
+  updateHighlights: (highlights: DocumentRange | null) => void;
 }
 
 type Props = {
@@ -18,8 +18,6 @@ type Props = {
   languageId: string;
   /** Default code to display in editor */
   defaultValue: string;
-  /** Code range to highlight in the editor */
-  highlights?: DocumentRange;
   /** Tokens provider for the language */
   tokensProvider?: MonacoTokensProvider;
   /** Callback to update debugging breakpoints */
@@ -32,8 +30,8 @@ type Props = {
  */
 const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
   const editorRef = React.useRef<EditorInstance | null>(null);
+  const highlightRange = React.useRef<string[]>([]);
   const monacoInstance = useMonaco();
-  const { highlights } = props;
 
   // Breakpoints
   useEditorBreakpoints({
@@ -48,21 +46,28 @@ const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
     tokensProvider: props.tokensProvider,
   });
 
-  // Change editor highlights when prop changes
+  /** Update code highlights */
-  React.useEffect(() => {
+  const updateHighlights = React.useCallback(
-    if (!editorRef.current || !highlights) return;
+    (hl: DocumentRange | null) => {
-    const range = createHighlightRange(monacoInstance!, highlights);
+      // Remove previous highlights
-    const decors = editorRef.current!.deltaDecorations([], [range]);
+      const prevRange = highlightRange.current;
-    return () => {
+      editorRef.current!.deltaDecorations(prevRange, []);
-      editorRef.current!.deltaDecorations(decors, []);
+
-    };
+      // Add new highlights
-  }, [highlights]);
+      if (!hl) return;
+      const newRange = createHighlightRange(monacoInstance!, hl);
+      const rangeStr = editorRef.current!.deltaDecorations([], [newRange]);
+      highlightRange.current = rangeStr;
+    },
+    [monacoInstance]
+  );
 
   // Provide handle to parent for accessing editor contents
   React.useImperativeHandle(
     ref,
     () => ({
       getValue: () => editorRef.current!.getValue(),
+      updateHighlights,
     }),
     []
   );

ui/execution-controls.tsx

@@ -33,9 +33,9 @@ const IntervalInput = (props: {
   return (
     <div style={styles.inputWrapper}>
       <NumericInput
-        min={20}
+        min={5}
+        stepSize={5}
         defaultValue={20}
-        stepSize={10}
         minorStepSize={null}
         leftIcon="time"
         clampValueOnBlur

ui/output-viewer.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { TextArea } from "@blueprintjs/core";
 
 /**
@@ -14,11 +15,21 @@ const toTextareaValue = (value: string | null): string | undefined => {
   return value; // Non-empty output value
 };
 
-type Props = {
+export interface OutputViewerRef {
-  value: string | null;
+  /** Reset output to show placeholder text */
-};
+  reset: () => void;
+  /** Append string to the displayed output */
+  append: (str?: string) => void;
+}
+
+const OutputViewerComponent = (_: {}, ref: React.Ref<OutputViewerRef>) => {
+  const [value, setValue] = React.useState<string | null>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    reset: () => setValue(null),
+    append: (s) => setValue((o) => (o || "") + (s || "")),
+  }));
 
-export const OutputViewer = ({ value }: Props) => {
   return (
     <TextArea
       fill
@@ -31,3 +42,5 @@ export const OutputViewer = ({ value }: Props) => {
     />
   );
 };
+
+export const OutputViewer = React.forwardRef(OutputViewerComponent);

ui/renderer-wrapper.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { LanguageProvider } from "../engines/types";
+
+export interface RendererRef<RS> {
+  /** Update runtime state to renderer */
+  updateState: (state: RS | null) => void;
+}
+
+/**
+ * React component that acts as an imperatively controller wrapper
+ * around the actual language renderer. This is to pull renderer state updates
+ * outside of Mainframe for performance reasons.
+ */
+const RendererWrapperComponent = <RS extends {}>(
+  { renderer }: { renderer: LanguageProvider<RS>["Renderer"] },
+  ref: React.Ref<RendererRef<RS>>
+) => {
+  const [state, setState] = React.useState<RS | null>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    updateState: setState,
+  }));
+
+  return renderer({ state });
+};
+
+export const RendererWrapper = React.forwardRef(RendererWrapperComponent);