shouldRemainOnFallback() — react Function Reference

Architecture documentation for the shouldRemainOnFallback() function in ReactFiberBeginWork.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ shouldRemainOnFallback() — react Function Reference

Dependency Diagram

graph TD
  d19e18e7_cb00_83e4_585a_64317da109b2["shouldRemainOnFallback()"]
  0be70812_cc0c_b210_f84f_8e61dd5f831c["ReactFiberBeginWork.js"]
  d19e18e7_cb00_83e4_585a_64317da109b2 -->|defined in| 0be70812_cc0c_b210_f84f_8e61dd5f831c
  f4acdab6_f680_af63_8940_0259a68c2f48["updateSuspenseComponent()"]
  f4acdab6_f680_af63_8940_0259a68c2f48 -->|calls| d19e18e7_cb00_83e4_585a_64317da109b2
  4cf196ce_ffa9_10e5_640c_01c2be0e9d2d["hasSuspenseListContext()"]
  d19e18e7_cb00_83e4_585a_64317da109b2 -->|calls| 4cf196ce_ffa9_10e5_640c_01c2be0e9d2d
  style d19e18e7_cb00_83e4_585a_64317da109b2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberBeginWork.js lines 2298–2325

function shouldRemainOnFallback(
  current: null | Fiber,
  workInProgress: Fiber,
  renderLanes: Lanes,
) {
  // If we're already showing a fallback, there are cases where we need to
  // remain on that fallback regardless of whether the content has resolved.
  // For example, SuspenseList coordinates when nested content appears.
  // TODO: For compatibility with offscreen prerendering, this should also check
  // whether the current fiber (if it exists) was visible in the previous tree.
  if (current !== null) {
    const suspenseState: SuspenseState = current.memoizedState;
    if (suspenseState === null) {
      // Currently showing content. Don't hide it, even if ForceSuspenseFallback
      // is true. More precise name might be "ForceRemainSuspenseFallback".
      // Note: This is a factoring smell. Can't remain on a fallback if there's
      // no fallback to remain on.
      return false;
    }
  }

  // Not currently showing content. Consult the Suspense context.
  const suspenseContext: SuspenseContext = suspenseStackCursor.current;
  return hasSuspenseListContext(
    suspenseContext,
    (ForceSuspenseFallback: SuspenseContext),
  );
}