febe31a3d8
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.
28 lines
810 B
TypeScript
28 lines
810 B
TypeScript
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);
|