prepareState() — react Function Reference

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

Function javascript BabelCompiler Optimization calls 1 called by 1

Entity Profile

BabelCompiler→ Optimization→ prepareState() — react Function Reference

Dependency Diagram

graph TD
  6185959c_4ddd_3329_aa80_f0e7dfa03322["prepareState()"]
  444f4239_c2fb_3bc5_1037_eb595d98f6e1["App.js"]
  6185959c_4ddd_3329_aa80_f0e7dfa03322 -->|defined in| 444f4239_c2fb_3bc5_1037_eb595d98f6e1
  aa71aa4f_3ada_7570_6469_04d2e34e4b02["componentDidMount()"]
  aa71aa4f_3ada_7570_6469_04d2e34e4b02 -->|calls| 6185959c_4ddd_3329_aa80_f0e7dfa03322
  8241cc1c_6a89_d873_cf16_ea64af5940d6["getRenderedAttributeValue()"]
  6185959c_4ddd_3329_aa80_f0e7dfa03322 -->|calls| 8241cc1c_6a89_d873_cf16_ea64af5940d6
  style 6185959c_4ddd_3329_aa80_f0e7dfa03322 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/attribute-behavior/src/App.js lines 431–522

async function prepareState(initGlobals) {
  async function getRenderedAttributeValues(attribute, type) {
    const {
      ReactStable,
      ReactDOMStable,
      ReactDOMServerStable,
      ReactNext,
      ReactDOMNext,
      ReactDOMServerNext,
    } = initGlobals(attribute, type);
    const reactStableValue = await getRenderedAttributeValue(
      ReactStable,
      ReactDOMStable,
      ReactDOMServerStable,
      attribute,
      type
    );
    const reactNextValue = await getRenderedAttributeValue(
      ReactNext,
      ReactDOMNext,
      ReactDOMServerNext,
      attribute,
      type
    );

    let hasSameBehavior;
    if (reactStableValue.didError && reactNextValue.didError) {
      hasSameBehavior = true;
    } else if (!reactStableValue.didError && !reactNextValue.didError) {
      hasSameBehavior =
        reactStableValue.didWarn === reactNextValue.didWarn &&
        reactStableValue.canonicalResult === reactNextValue.canonicalResult &&
        reactStableValue.ssrHasSameBehavior ===
          reactNextValue.ssrHasSameBehavior;
    } else {
      hasSameBehavior = false;
    }

    return {
      reactStable: reactStableValue,
      reactNext: reactNextValue,
      hasSameBehavior,
    };
  }

  const table = new Map();
  const rowPatternHashes = new Map();

  // Disable error overlay while testing each attribute
  uninjectErrorOverlay();
  for (let attribute of attributes) {
    const results = new Map();
    let hasSameBehaviorForAll = true;
    let rowPatternHash = '';
    for (let type of types) {
      const result = await getRenderedAttributeValues(attribute, type);
      results.set(type.name, result);
      if (!result.hasSameBehavior) {
        hasSameBehaviorForAll = false;
      }
      rowPatternHash += [result.reactStable, result.reactNext]
        .map(res =>
          [
            res.canonicalResult,
            res.canonicalDefaultValue,
            res.didWarn,
            res.didError,
          ].join('||')
        )
        .join('||');
    }
    const row = {
      results,
      hasSameBehaviorForAll,
      rowPatternHash,
      // "Good enough" id that we can store in localStorage
      rowIdHash: `${attribute.name} ${attribute.tagName} ${attribute.overrideStringValue}`,
    };
    const rowGroup = rowPatternHashes.get(rowPatternHash) || new Set();
    rowGroup.add(row);
    rowPatternHashes.set(rowPatternHash, rowGroup);