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

disappearLayoutEffects() — react Function Reference

Architecture documentation for the disappearLayoutEffects() function in ReactFiberCommitWork.js from the react codebase.

Function javascript BabelCompiler Validation calls 7 called by 1

Entity Profile

Dependency Diagram

graph TD
  38cb51c8_1ba3_adb6_6b57_5b5853e89841["disappearLayoutEffects()"]
  e0fbfbd5_47b0_a489_0b36_bbfad9245544["ReactFiberCommitWork.js"]
  38cb51c8_1ba3_adb6_6b57_5b5853e89841 -->|defined in| e0fbfbd5_47b0_a489_0b36_bbfad9245544
  a3928289_980c_8d9b_b9f9_826f0c7a8bf8["recursivelyTraverseDisappearLayoutEffects()"]
  a3928289_980c_8d9b_b9f9_826f0c7a8bf8 -->|calls| 38cb51c8_1ba3_adb6_6b57_5b5853e89841
  4f76ed87_f151_2295_8bb4_c7b5dfe010a2["pushComponentEffectStart()"]
  38cb51c8_1ba3_adb6_6b57_5b5853e89841 -->|calls| 4f76ed87_f151_2295_8bb4_c7b5dfe010a2
  da570743_1675_9fe9_6425_06d6a84f49ba["pushComponentEffectDuration()"]
  38cb51c8_1ba3_adb6_6b57_5b5853e89841 -->|calls| da570743_1675_9fe9_6425_06d6a84f49ba
  536f849f_4ed1_3dcd_f2ef_4c117116c0b7["commitHookLayoutUnmountEffects()"]
  38cb51c8_1ba3_adb6_6b57_5b5853e89841 -->|calls| 536f849f_4ed1_3dcd_f2ef_4c117116c0b7
  a3928289_980c_8d9b_b9f9_826f0c7a8bf8["recursivelyTraverseDisappearLayoutEffects()"]
  38cb51c8_1ba3_adb6_6b57_5b5853e89841 -->|calls| a3928289_980c_8d9b_b9f9_826f0c7a8bf8
  53097c13_f55b_a762_7d12_7c560d2278d9["untrackNamedViewTransition()"]
  38cb51c8_1ba3_adb6_6b57_5b5853e89841 -->|calls| 53097c13_f55b_a762_7d12_7c560d2278d9
  ff9409a2_b556_06af_85c9_ee748a528d80["popComponentEffectStart()"]
  38cb51c8_1ba3_adb6_6b57_5b5853e89841 -->|calls| ff9409a2_b556_06af_85c9_ee748a528d80
  e047b0ab_3567_71e4_0705_344ee07a23b7["popComponentEffectDuration()"]
  38cb51c8_1ba3_adb6_6b57_5b5853e89841 -->|calls| e047b0ab_3567_71e4_0705_344ee07a23b7
  style 38cb51c8_1ba3_adb6_6b57_5b5853e89841 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberCommitWork.js lines 2984–3094

export function disappearLayoutEffects(finishedWork: Fiber) {
  const prevEffectStart = pushComponentEffectStart();
  const prevEffectDuration = pushComponentEffectDuration();
  const prevEffectErrors = pushComponentEffectErrors();
  const prevEffectDidSpawnUpdate = pushComponentEffectDidSpawnUpdate();
  switch (finishedWork.tag) {
    case FunctionComponent:
    case ForwardRef:
    case MemoComponent:
    case SimpleMemoComponent: {
      // TODO (Offscreen) Check: flags & LayoutStatic
      commitHookLayoutUnmountEffects(
        finishedWork,
        finishedWork.return,
        HookLayout,
      );
      recursivelyTraverseDisappearLayoutEffects(finishedWork);
      break;
    }
    case ClassComponent: {
      // TODO (Offscreen) Check: flags & RefStatic
      safelyDetachRef(finishedWork, finishedWork.return);

      const instance = finishedWork.stateNode;
      if (typeof instance.componentWillUnmount === 'function') {
        safelyCallComponentWillUnmount(
          finishedWork,
          finishedWork.return,
          instance,
        );
      }

      recursivelyTraverseDisappearLayoutEffects(finishedWork);
      break;
    }
    case HostSingleton: {
      if (supportsSingletons) {
        // TODO (Offscreen) Check: flags & RefStatic
        commitHostSingletonRelease(finishedWork);
      }
      // Expected fallthrough to HostComponent
    }
    case HostHoistable:
    case HostComponent: {
      // TODO (Offscreen) Check: flags & RefStatic
      safelyDetachRef(finishedWork, finishedWork.return);

      if (enableFragmentRefs && finishedWork.tag === HostComponent) {
        commitFragmentInstanceDeletionEffects(finishedWork);
      }

      recursivelyTraverseDisappearLayoutEffects(finishedWork);
      break;
    }
    case OffscreenComponent: {
      const isHidden = finishedWork.memoizedState !== null;
      if (isHidden) {
        // Nested Offscreen tree is already hidden. Don't disappear
        // its effects.
      } else {
        recursivelyTraverseDisappearLayoutEffects(finishedWork);
      }
      break;
    }
    case ViewTransitionComponent: {
      if (enableViewTransition) {
        if (__DEV__) {
          if (finishedWork.flags & ViewTransitionNamedStatic) {
            untrackNamedViewTransition(finishedWork);
          }
        }
        safelyDetachRef(finishedWork, finishedWork.return);
      }
      recursivelyTraverseDisappearLayoutEffects(finishedWork);
      break;
    }
    case Fragment: {
      if (enableFragmentRefs) {
        safelyDetachRef(finishedWork, finishedWork.return);
      }
      // Fallthrough

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does disappearLayoutEffects() do?
disappearLayoutEffects() is a function in the react codebase, defined in packages/react-reconciler/src/ReactFiberCommitWork.js.
Where is disappearLayoutEffects() defined?
disappearLayoutEffects() is defined in packages/react-reconciler/src/ReactFiberCommitWork.js at line 2984.
What does disappearLayoutEffects() call?
disappearLayoutEffects() calls 7 function(s): commitHookLayoutUnmountEffects, popComponentEffectDuration, popComponentEffectStart, pushComponentEffectDuration, pushComponentEffectStart, recursivelyTraverseDisappearLayoutEffects, untrackNamedViewTransition.
What calls disappearLayoutEffects()?
disappearLayoutEffects() is called by 1 function(s): recursivelyTraverseDisappearLayoutEffects.

Analyze Your Own Codebase

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

Try Supermodel Free