react Architecture Docs
Home / Function/ throwOnHydrationMismatch() — react Function Reference

throwOnHydrationMismatch() — react Function Reference

Architecture documentation for the throwOnHydrationMismatch() function in ReactFiberHydrationContext.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 8

Entity Profile

Dependency Diagram

graph TD
  80ab8739_b87f_ce9e_47e3_2b23b5998883["throwOnHydrationMismatch()"]
  4bc7109f_638d_d9f7_bf47_6ec55b2fa128["ReactFiberHydrationContext.js"]
  80ab8739_b87f_ce9e_47e3_2b23b5998883 -->|defined in| 4bc7109f_638d_d9f7_bf47_6ec55b2fa128
  ae7022cd_2911_01f4_d595_3b71fd40d093["tryToClaimNextHydratableInstance()"]
  ae7022cd_2911_01f4_d595_3b71fd40d093 -->|calls| 80ab8739_b87f_ce9e_47e3_2b23b5998883
  ecaf5fc5_68ea_e183_4f16_c8c8eda2023d["tryToClaimNextHydratableTextInstance()"]
  ecaf5fc5_68ea_e183_4f16_c8c8eda2023d -->|calls| 80ab8739_b87f_ce9e_47e3_2b23b5998883
  55fdf17d_33e7_f55c_d2de_3d6f42a3be84["claimNextHydratableActivityInstance()"]
  55fdf17d_33e7_f55c_d2de_3d6f42a3be84 -->|calls| 80ab8739_b87f_ce9e_47e3_2b23b5998883
  063d3886_b682_bfe4_3526_2efd080da924["claimNextHydratableSuspenseInstance()"]
  063d3886_b682_bfe4_3526_2efd080da924 -->|calls| 80ab8739_b87f_ce9e_47e3_2b23b5998883
  842b7c57_27ab_db40_014d_ba7c60dcfce1["tryToClaimNextHydratableFormMarkerInstance()"]
  842b7c57_27ab_db40_014d_ba7c60dcfce1 -->|calls| 80ab8739_b87f_ce9e_47e3_2b23b5998883
  c3f56ddd_6159_7b0a_ff22_5226e70a7f05["prepareToHydrateHostInstance()"]
  c3f56ddd_6159_7b0a_ff22_5226e70a7f05 -->|calls| 80ab8739_b87f_ce9e_47e3_2b23b5998883
  0c745329_8d79_5006_cb91_2a5765029a9b["prepareToHydrateHostTextInstance()"]
  0c745329_8d79_5006_cb91_2a5765029a9b -->|calls| 80ab8739_b87f_ce9e_47e3_2b23b5998883
  b741356a_b031_e7cd_ea5d_ed59f056748d["popHydrationState()"]
  b741356a_b031_e7cd_ea5d_ed59f056748d -->|calls| 80ab8739_b87f_ce9e_47e3_2b23b5998883
  fdd4154a_3f30_1e00_766c_6534484f3d00["describeDiff()"]
  80ab8739_b87f_ce9e_47e3_2b23b5998883 -->|calls| fdd4154a_3f30_1e00_766c_6534484f3d00
  style 80ab8739_b87f_ce9e_47e3_2b23b5998883 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberHydrationContext.js lines 375–403

function throwOnHydrationMismatch(fiber: Fiber, fromText: boolean = false) {
  let diff = '';
  if (__DEV__) {
    // Consume the diff root for this mismatch.
    // Any other errors will get their own diffs.
    const diffRoot = hydrationDiffRootDEV;
    if (diffRoot !== null) {
      hydrationDiffRootDEV = null;
      diff = describeDiff(diffRoot);
    }
  }
  const error = new Error(
    `Hydration failed because the server rendered ${fromText ? 'text' : 'HTML'} didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
` +
      '\n' +
      "- A server/client branch `if (typeof window !== 'undefined')`.\n" +
      "- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.\n" +
      "- Date formatting in a user's locale which doesn't match the server.\n" +
      '- External changing data without sending a snapshot of it along with the HTML.\n' +
      '- Invalid HTML tag nesting.\n' +
      '\n' +
      'It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.\n' +
      '\n' +
      'https://react.dev/link/hydration-mismatch' +
      diff,
  );
  queueHydrationError(createCapturedValueAtFiber(error, fiber));
  throw HydrationMismatchException;
}

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does throwOnHydrationMismatch() do?
throwOnHydrationMismatch() is a function in the react codebase, defined in packages/react-reconciler/src/ReactFiberHydrationContext.js.
Where is throwOnHydrationMismatch() defined?
throwOnHydrationMismatch() is defined in packages/react-reconciler/src/ReactFiberHydrationContext.js at line 375.
What does throwOnHydrationMismatch() call?
throwOnHydrationMismatch() calls 1 function(s): describeDiff.
What calls throwOnHydrationMismatch()?
throwOnHydrationMismatch() is called by 8 function(s): claimNextHydratableActivityInstance, claimNextHydratableSuspenseInstance, popHydrationState, prepareToHydrateHostInstance, prepareToHydrateHostTextInstance, tryToClaimNextHydratableFormMarkerInstance, tryToClaimNextHydratableInstance, tryToClaimNextHydratableTextInstance.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free