hydrateApp() — react Function Reference

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

Function javascript BabelCompiler Optimization calls 1

Entity Profile

BabelCompiler→ Optimization→ hydrateApp() — react Function Reference

Dependency Diagram

graph TD
  1abc23ea_6ee8_cf9b_bb89_f6f01642f596["hydrateApp()"]
  856b3a4c_6a24_b2e9_eb47_87b4757da255["index.js"]
  1abc23ea_6ee8_cf9b_bb89_f6f01642f596 -->|defined in| 856b3a4c_6a24_b2e9_eb47_87b4757da255
  d4550c74_c044_ca05_74c0_f2722e08bb76["createWebSocketStream()"]
  1abc23ea_6ee8_cf9b_bb89_f6f01642f596 -->|calls| d4550c74_c044_ca05_74c0_f2722e08bb76
  style 1abc23ea_6ee8_cf9b_bb89_f6f01642f596 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/flight/src/index.js lines 108–157

async function hydrateApp() {
  let response;
  if (process.env.NODE_ENV === 'development') {
    const requestId = crypto.randomUUID();
    const debugChannel = await createWebSocketStream(
      `ws://localhost:3001/debug-channel?id=${requestId}`
    );
    response = createFromFetch(
      fetch('/', {
        headers: {
          Accept: 'text/x-component',
          'rsc-request-id': requestId,
        },
      }),
      {
        callServer,
        debugChannel,
        findSourceMapURL,
      }
    );
  } else {
    response = createFromFetch(
      fetch('/', {
        headers: {
          Accept: 'text/x-component',
        },
      }),
      {
        callServer,
        findSourceMapURL,
      }
    );
  }
  const {root, returnValue, formState} = await response;

  ReactDOM.hydrateRoot(
    document,
    <Profiler id="root">
      <Shell data={root} />
    </Profiler>,
    {
      // TODO: This part doesn't actually work because the server only returns
      // form state during the request that submitted the form. Which means it
      // the state needs to be transported as part of the HTML stream. We intend
      // to add a feature to Fizz for this, but for now it's up to the
      // metaframework to implement correctly.
      formState: formState,
    }
  );
}