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

Code before:

    const {
      onCollabButtonClick,
      renderTopRightUI,
      renderFooter,
      renderCustomStats,
    } = this.props;

    return (
      <div
        className={clsx("excalidraw excalidraw-container", {
          "excalidraw--view-mode": viewModeEnabled,
          "excalidraw--mobile": this.isMobile,
        })}
        ref={this.excalidrawContainerRef}
        onDrop={this.handleAppOnDrop}
        tabIndex={0}
        onKeyDown={
          this.props.handleKeyboardGlobally ? undefined : this.onKeyDown
        }
      >
        <ExcalidrawContainerContext.Provider
          value={{
            container: this.excalidrawContainerRef.current,
            id: this.id,
          }}
        >
          <IsMobileContext.Provider value={this.isMobile}>
            <LayerUI
              canvas={this.canvas}
              appState={this.state}
              setAppState={this.setAppState}
              actionManager={this.actionManager}
              elements={this.scene.getElements()}
              onCollabButtonClick={onCollabButtonClick}
              onLockToggle={this.toggleLock}
              onInsertElements={(elements) =>
                this.addElementsFromPasteOrLibrary({
                  elements,
                  position: "center",
                })
              }
              zenModeEnabled={zenModeEnabled}
              toggleZenMode={this.toggleZenMode}
              langCode={getLanguage().code}
              isCollaborating={this.props.isCollaborating || false}
              renderTopRightUI={renderTopRightUI}
              renderCustomFooter={renderFooter}
              viewModeEnabled={viewModeEnabled}
              showExitZenModeBtn={
                typeof this.props?.zenModeEnabled === "undefined" &&

Review comment (suggestion):
this will mess up referential integrity, thus rerender consumers unnecessarily, am I correct? And it looks like most of the UI is subscribing to this context.

If so, I'd suggest either 1) splitting into two context providers, or 2) factor the object out and replace it only if either of the two values change.

Code after:
        onPointerMove={this.handleCanvasPointerMove}
        onPointerUp={this.removePointer}
        onPointerCancel={this.removePointer}
        onTouchMove={this.handleTouchMove}
      >
        {t("labels.drawingCanvas")}
      </canvas>
    );
  }

  public render() {
    const { zenModeEnabled, viewModeEnabled } = this.state;

    const {
      onCollabButtonClick,
      renderTopRightUI,
      renderFooter,
      renderCustomStats,
    } = this.props;

    return (
      <div
        className={clsx("excalidraw excalidraw-container", {
          "excalidraw--view-mode": viewModeEnabled,
          "excalidraw--mobile": this.isMobile,
        })}
        ref={this.excalidrawContainerRef}
        onDrop={this.handleAppOnDrop}
        tabIndex={0}
        onKeyDown={
          this.props.handleKeyboardGlobally ? undefined : this.onKeyDown
        }
      >
        <ExcalidrawContainerContext.Provider
          value={this.excalidrawContainerValue}
        >
          <IsMobileContext.Provider value={this.isMobile}>
            <LayerUI
              canvas={this.canvas}
              appState={this.state}
              setAppState={this.setAppState}
              actionManager={this.actionManager}
              elements={this.scene.getElements()}
              onCollabButtonClick={onCollabButtonClick}
              onLockToggle={this.toggleLock}
              onInsertElements={(elements) =>
                this.addElementsFromPasteOrLibrary({
                  elements,
                  position: "center",
                })
              }