installFizzInstrObserver() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ installFizzInstrObserver() — react Function Reference

Dependency Diagram

graph TD
  31404a96_99a5_3787_f3b9_d88138c9160f["installFizzInstrObserver()"]
  5caacc91_f7c4_8c34_9a60_f5f33ec98620["ReactDOMServerExternalRuntime.js"]
  31404a96_99a5_3787_f3b9_d88138c9160f -->|defined in| 5caacc91_f7c4_8c34_9a60_f5f33ec98620
  f1775454_756d_99db_f358_00d9b9cf99de["domBodyObserver()"]
  f1775454_756d_99db_f358_00d9b9cf99de -->|calls| 31404a96_99a5_3787_f3b9_d88138c9160f
  8f311e6c_3ea7_4b12_2c7e_b8f34b5a7ff4["handleNode()"]
  31404a96_99a5_3787_f3b9_d88138c9160f -->|calls| 8f311e6c_3ea7_4b12_2c7e_b8f34b5a7ff4
  style 31404a96_99a5_3787_f3b9_d88138c9160f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/server/ReactDOMServerExternalRuntime.js lines 47–69

function installFizzInstrObserver(target: Node) {
  const handleMutations = (mutations: Array<MutationRecord>) => {
    for (let i = 0; i < mutations.length; i++) {
      const addedNodes = mutations[i].addedNodes;
      for (let j = 0; j < addedNodes.length; j++) {
        if (addedNodes[j].parentNode) {
          handleNode(addedNodes[j]);
        }
      }
    }
  };

  const fizzInstrObserver = new MutationObserver(handleMutations);
  // We assume that instruction data nodes are eventually appended to the
  // body, even if Fizz is streaming to a shell / subtree.
  fizzInstrObserver.observe(target, {
    childList: true,
  });
  window.addEventListener('DOMContentLoaded', () => {
    handleMutations(fizzInstrObserver.takeRecords());
    fizzInstrObserver.disconnect();
  });
}