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/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);