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

Code before:
      process.env.NODE_ENV === ENV.TEST ||
      process.env.NODE_ENV === ENV.DEVELOPMENT
    ) {
      const setState = this.setState.bind(this);
      Object.defineProperties(window.h, {
        state: {
          configurable: true,
          get: () => {
            return this.state;
          },
        },
        setState: {
          configurable: true,
          value: (...args: Parameters<typeof setState>) => {
            return this.setState(...args);
          },
        },
        app: {
          configurable: true,
          value: this,
        },
      });
    }
    this.nearestScrollableContainer = getNearestScrollableContainer(
      this.excalidrawContainerRef.current!,
    );
    this.scene.addCallback(this.onSceneUpdated);
    this.addEventListeners();

    if ("ResizeObserver" in window && this.excalidrawContainerRef?.current) {
      this.resizeObserver = new ResizeObserver(() => {
        this.updateDOMRect();
      });
      this.resizeObserver?.observe(this.excalidrawContainerRef.current);
    }
    const searchParams = new URLSearchParams(window.location.search.slice(1));

    if (searchParams.has("web-share-target")) {
      // Obtain a file that was shared via the Web Share Target API.
      this.restoreFileFromShare();
    } else {
      this.updateDOMRect(this.initializeScene);
    }
  }

  public componentWillUnmount() {
    this.resizeObserver?.disconnect();
    this.unmounted = true;
    this.removeEventListeners();
    this.scene.destroy();
    clearTimeout(touchTimeout);

Review comment (suggestion):
I'm getting around 10-50ms on this because it seems it triggers a document reflow. If we defer it (setTimeout), moving it into the `addEventListeners()`, the reflow issue seems to be gone and I get sub-millisecond perf.

Code after:
      // legacy, kept for compat reasons
      new URLSearchParams(window.location.search).get(
        URL_QUERY_KEYS.addLibrary,
      );

    if (libraryUrl) {
      await this.importLibraryFromUrl(libraryUrl);
    }
  };

  public async componentDidMount() {
    if (
      process.env.NODE_ENV === ENV.TEST ||
      process.env.NODE_ENV === ENV.DEVELOPMENT
    ) {
      const setState = this.setState.bind(this);
      Object.defineProperties(window.h, {
        state: {
          configurable: true,
          get: () => {
            return this.state;
          },
        },
        setState: {
          configurable: true,
          value: (...args: Parameters<typeof setState>) => {
            return this.setState(...args);
          },
        },
        app: {
          configurable: true,
          value: this,
        },
      });
    }

    this.scene.addCallback(this.onSceneUpdated);
    this.addEventListeners();

    if ("ResizeObserver" in window && this.excalidrawContainerRef?.current) {
      this.resizeObserver = new ResizeObserver(() => {
        // compute isMobile state
        // ---------------------------------------------------------------------
        const {
          width,
          height,
        } = this.excalidrawContainerRef.current!.getBoundingClientRect();
        this.isMobile =
          width < MQ_MAX_WIDTH_PORTRAIT ||
          (height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE);
        // refresh offsets