componentDidMount() — react Function Reference

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

Function javascript BabelCompiler Optimization calls 1

Entity Profile

BabelCompiler→ Optimization→ componentDidMount() — react Function Reference

Dependency Diagram

graph TD
  aa71aa4f_3ada_7570_6469_04d2e34e4b02["componentDidMount()"]
  7796199a_976b_30de_2bf9_e72aa702c083["App"]
  aa71aa4f_3ada_7570_6469_04d2e34e4b02 -->|defined in| 7796199a_976b_30de_2bf9_e72aa702c083
  6185959c_4ddd_3329_aa80_f0e7dfa03322["prepareState()"]
  aa71aa4f_3ada_7570_6469_04d2e34e4b02 -->|calls| 6185959c_4ddd_3329_aa80_f0e7dfa03322
  style aa71aa4f_3ada_7570_6469_04d2e34e4b02 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/attribute-behavior/src/App.js lines 801–862

  async componentDidMount() {
    const sources = {
      ReactStable: 'https://unpkg.com/react@latest/umd/react.development.js',
      ReactDOMStable:
        'https://unpkg.com/react-dom@latest/umd/react-dom.development.js',
      ReactDOMServerStable:
        'https://unpkg.com/react-dom@latest/umd/react-dom-server.browser.development.js',
      ReactNext: '/react.development.js',
      ReactDOMNext: '/react-dom.development.js',
      ReactDOMServerNext: '/react-dom-server.browser.development.js',
    };
    const codePromises = Object.values(sources).map(src =>
      fetch(src).then(res => res.text())
    );
    const codesByIndex = await Promise.all(codePromises);

    const pool = [];
    function initGlobals(attribute, type) {
      if (useFastMode) {
        // Note: this is not giving correct results for warnings.
        // But it's much faster.
        if (pool[0]) {
          return pool[0].globals;
        }
      } else {
        document.title = `${attribute.name} (${type.name})`;
      }

      // Creating globals for every single test is too slow.
      // However caching them between runs won't work for the same attribute names
      // because warnings will be deduplicated. As a result, we only share globals
      // between different attribute names.
      for (let i = 0; i < pool.length; i++) {
        if (!pool[i].testedAttributes.has(attribute.name)) {
          pool[i].testedAttributes.add(attribute.name);
          return pool[i].globals;
        }
      }

      let globals = {};
      Object.keys(sources).forEach((name, i) => {
        eval.call(window, codesByIndex[i]); // eslint-disable-line
        globals[name] = window[name.replace(/Stable|Next/g, '')];
      });

      // Cache for future use (for different attributes).
      pool.push({
        globals,
        testedAttributes: new Set([attribute.name]),
      });

      return globals;
    }

    const {table, rowPatternHashes} = await prepareState(initGlobals);
    document.title = 'Ready';

    this.setState({
      table,
      rowPatternHashes,
    });
  }