lazyLegacyRoot() — react Function Reference

Architecture documentation for the lazyLegacyRoot() function in lazyLegacyRoot.js from the react codebase.

Function javascript BabelCompiler Optimization calls 1 called by 1

Entity Profile

BabelCompiler→ Optimization→ lazyLegacyRoot() — react Function Reference

Dependency Diagram

graph TD
  c644c37d_b668_0a66_bdb8_24c9de5df7ea["lazyLegacyRoot()"]
  d273e762_42b4_589e_195c_7779bffc0b74["lazyLegacyRoot.js"]
  c644c37d_b668_0a66_bdb8_24c9de5df7ea -->|defined in| d273e762_42b4_589e_195c_7779bffc0b74
  71643b71_7de7_69a0_0b29_1079e8250f8f["Greeting()"]
  71643b71_7de7_69a0_0b29_1079e8250f8f -->|calls| c644c37d_b668_0a66_bdb8_24c9de5df7ea
  259a5510_1b26_e0ec_44e5_753ef0dbd76e["readModule()"]
  c644c37d_b668_0a66_bdb8_24c9de5df7ea -->|calls| 259a5510_1b26_e0ec_44e5_753ef0dbd76e
  style c644c37d_b668_0a66_bdb8_24c9de5df7ea fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/nesting/src/modern/lazyLegacyRoot.js lines 14–64

export default function lazyLegacyRoot(getLegacyComponent) {
  let componentModule = {
    status: 'pending',
    promise: null,
    result: null,
  };

  return function Wrapper(props) {
    const createLegacyRoot = readModule(
      rendererModule,
      () => import('../legacy/createLegacyRoot')
    ).default;
    const Component = readModule(componentModule, getLegacyComponent).default;
    const containerRef = useRef(null);
    const rootRef = useRef(null);

    // Populate every contexts we want the legacy subtree to see.
    // Then in src/legacy/createLegacyRoot we will apply them.
    const theme = useContext(ThemeContext);
    const router = useContext(__RouterContext);
    const reactRedux = useContext(ReactReduxContext);
    const context = useMemo(
      () => ({
        theme,
        router,
        reactRedux,
      }),
      [theme, router, reactRedux]
    );

    // Create/unmount.
    useLayoutEffect(() => {
      if (!rootRef.current) {
        rootRef.current = createLegacyRoot(containerRef.current);
      }
      const root = rootRef.current;
      return () => {
        root.unmount();
      };
    }, [createLegacyRoot]);

    // Mount/update.
    useLayoutEffect(() => {
      if (rootRef.current) {
        rootRef.current.render(Component, props, context);
      }
    }, [Component, props, context]);

    return <div style={{display: 'contents'}} ref={containerRef} />;
  };
}