getModernRenderImplementation() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ getModernRenderImplementation() — react Function Reference

Dependency Diagram

graph TD
  a5efc5c7_2c74_9c94_1e30_396b32c15d53["getModernRenderImplementation()"]
  7ea1760e_9c01_71c9_3ba5_32a9a10a0ce4["utils.js"]
  a5efc5c7_2c74_9c94_1e30_396b32c15d53 -->|defined in| 7ea1760e_9c01_71c9_3ba5_32a9a10a0ce4
  style a5efc5c7_2c74_9c94_1e30_396b32c15d53 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/__tests__/utils.js lines 186–239

export function getModernRenderImplementation(): RenderImplementation {
  let ReactDOMClient;
  let container;
  let root;
  const containersToRemove = [];

  beforeEach(() => {
    ReactDOMClient = require('react-dom/client');

    createContainer();
  });

  afterEach(() => {
    containersToRemove.forEach(c => document.body.removeChild(c));
    containersToRemove.splice(0, containersToRemove.length);

    ReactDOMClient = null;
    container = null;
    root = null;
  });

  function render(elements) {
    if (root == null) {
      root = ReactDOMClient.createRoot(container);
    }
    root.render(elements);

    return unmount;
  }

  function unmount() {
    root.unmount();
  }

  function createContainer() {
    container = document.createElement('div');
    document.body.appendChild(container);

    root = null;

    containersToRemove.push(container);
  }

  function getContainer() {
    return container;
  }

  return {
    render,
    unmount,
    createContainer,
    getContainer,
  };
}