refactor: performance optimization in the initialization

of the canvas

examples/web/react/app.tsx

@@ -57,7 +57,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
     const [paused, setPaused] = useState(false);
     const [fullscreen, setFullscreen] = useState(false);
     const [backgroundIndex, setBackgroundIndex] = useState(0);
-    const interval = useRef<number | undefined>(undefined);
+    const intervalRef = useRef<number | undefined>(undefined);
     const getPauseText = () => (paused ? "Resume" : "Pause");
     const getPauseIcon = () =>
         paused ? require("../res/play.svg") : require("../res/pause.svg");
@@ -79,8 +79,8 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
         setFullscreen(!fullscreen);
     };
     const onDrawHandler = (handler: DrawHandler) => {
-        if (interval.current) return;
-        interval.current = setInterval(() => {
+        if (intervalRef.current) return;
+        intervalRef.current = setInterval(() => {
             handler(emulator.getImageBuffer(), PixelFormat.RGB);
         }, 1000);
     };

examples/web/react/components/display/display.tsx

@@ -52,13 +52,13 @@ export const Display: FC<DisplayProps> = ({
         options.scale = window.devicePixelRatio ? window.devicePixelRatio : 1;
     }
 
-    let canvasContents: CanvasContents | null = null;
     const classes = () =>
         ["display", fullscreen ? "fullscreen" : null, size, ...style].join(" ");
 
     const [width, setWidth] = useState<number | undefined>(undefined);
     const [height, setHeight] = useState<number | undefined>(undefined);
     const canvasRef = useRef<HTMLCanvasElement>(null);
+    const canvasContentsRef = useRef<CanvasContents | undefined>(undefined);
     const resizeRef = useRef(() => {
         const [fullWidth, fullHeight] = crop(options.width / options.height);
         setWidth(fullWidth);
@@ -66,8 +66,8 @@ export const Display: FC<DisplayProps> = ({
     });
 
     useEffect(() => {
-        if (canvasRef.current && !canvasContents) {
-            canvasContents = initCanvas(
+        if (canvasRef.current && !canvasContentsRef.current) {
+            canvasContentsRef.current = initCanvas(
                 options.logicWidth,
                 options.logicHeight,
                 canvasRef.current
@@ -85,8 +85,8 @@ export const Display: FC<DisplayProps> = ({
 
     if (onDrawHandler) {
         onDrawHandler((pixels: Uint8Array, format: PixelFormat) => {
-            if (!canvasContents) return;
-            updateCanvas(canvasContents, pixels, format);
+            if (!canvasContentsRef.current) return;
+            updateCanvas(canvasContentsRef.current, pixels, format);
         });
     }