Repository: excalidraw/excalidraw
File: src/components/canvases/InteractiveCanvas.tsx (TypeScript)

Code before:

      renderInteractiveScene(
        {
          canvas: props.canvas,
          elements: props.elements,
          visibleElements: props.visibleElements,
          selectedElements: props.selectedElements,
          scale: window.devicePixelRatio,
          appState: props.appState,
          renderConfig: {
            remotePointerViewportCoords: pointerViewportCoords,
            remotePointerButton: cursorButton,
            remoteSelectedElementIds,
            remotePointerUsernames: pointerUsernames,
            remotePointerUserStates: pointerUserStates,
            selectionColor,
            renderScrollbars: false,
          },
          callback: props.renderInteractiveSceneCallback,
        },
        isRenderThrottlingEnabled(),
      );
    });

    return (
      <div ref={forwardedRef}>
        <canvas
          className="excalidraw__canvas interactive"
          style={{
            width: props.appState.width,
            height: props.appState.height,
            cursor: props.appState.viewModeEnabled
              ? CURSOR_TYPE.GRAB
              : CURSOR_TYPE.AUTO,
          }}
          width={props.appState.width * props.scale}
          height={props.appState.height * props.scale}
          ref={props.handleCanvasRef}
          onContextMenu={props.onContextMenu}
          onPointerMove={props.onPointerMove}
          onPointerUp={props.onPointerUp}
          onPointerCancel={props.onPointerCancel}
          onTouchMove={props.onTouchMove}
          onPointerDown={props.onPointerDown}
          onDoubleClick={
            props.appState.viewModeEnabled ? undefined : props.onDoubleClick
          }
        >
          {t("labels.drawingCanvas")}
        </canvas>
      </div>

Review comment (suggestion):
we're already assigning the ref to a excalidraw wrapper container upstream. Let's just use it directly instead of reassigning? Also, let's pass it as a regular prop (`containerRef`) instead of forwardRef.

Code after:

    renderInteractiveScene(
      {
        canvas: props.canvas,
        elements: props.elements,
        visibleElements: props.visibleElements,
        selectedElements: props.selectedElements,
        scale: window.devicePixelRatio,
        appState: props.appState,
        renderConfig: {
          remotePointerViewportCoords: pointerViewportCoords,
          remotePointerButton: cursorButton,
          remoteSelectedElementIds,
          remotePointerUsernames: pointerUsernames,
          remotePointerUserStates: pointerUserStates,
          selectionColor,
          renderScrollbars: false,
        },
        callback: props.renderInteractiveSceneCallback,
      },
      isRenderThrottlingEnabled(),
    );
  });

  return (
    <canvas
      className="excalidraw__canvas interactive"
      style={{
        width: props.appState.width,
        height: props.appState.height,
        cursor: props.appState.viewModeEnabled
          ? CURSOR_TYPE.GRAB
          : CURSOR_TYPE.AUTO,
      }}
      width={props.appState.width * props.scale}
      height={props.appState.height * props.scale}
      ref={props.handleCanvasRef}
      onContextMenu={props.onContextMenu}
      onPointerMove={props.onPointerMove}
      onPointerUp={props.onPointerUp}
      onPointerCancel={props.onPointerCancel}
      onTouchMove={props.onTouchMove}
      onPointerDown={props.onPointerDown}
      onDoubleClick={
        props.appState.viewModeEnabled ? undefined : props.onDoubleClick
      }
    >
      {t("labels.drawingCanvas")}
    </canvas>
  );
};