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/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 = {
-  value: string | null;
-};
+export interface OutputViewerRef {
+  /** 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);