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

commitHookEffectListUnmount() — react Function Reference

Architecture documentation for the commitHookEffectListUnmount() function in ReactFiberCommitEffects.js from the react codebase.

Function javascript BabelCompiler Validation calls 4 called by 7

Entity Profile

Dependency Diagram

graph TD
  31dbea93_6a15_5a88_2a94_0513d6287f5a["commitHookEffectListUnmount()"]
  8f5342bb_933e_6410_b584_cc120047394a["ReactFiberCommitEffects.js"]
  31dbea93_6a15_5a88_2a94_0513d6287f5a -->|defined in| 8f5342bb_933e_6410_b584_cc120047394a
  6a791585_7057_bf37_7f59_c785a4d2ca32["recursivelyRestoreNew()"]
  6a791585_7057_bf37_7f59_c785a4d2ca32 -->|calls| 31dbea93_6a15_5a88_2a94_0513d6287f5a
  536f849f_4ed1_3dcd_f2ef_4c117116c0b7["commitHookLayoutUnmountEffects()"]
  536f849f_4ed1_3dcd_f2ef_4c117116c0b7 -->|calls| 31dbea93_6a15_5a88_2a94_0513d6287f5a
  f1b730f8_6531_6ca3_ecc6_386e64652c07["commitHookPassiveUnmountEffects()"]
  f1b730f8_6531_6ca3_ecc6_386e64652c07 -->|calls| 31dbea93_6a15_5a88_2a94_0513d6287f5a
  5af9a16a_ed89_d37e_b847_bcb6a2805eae["commitDeletionEffectsOnFiber()"]
  5af9a16a_ed89_d37e_b847_bcb6a2805eae -->|calls| 31dbea93_6a15_5a88_2a94_0513d6287f5a
  bc4a6de9_07dc_eca7_681a_10f692e08483["commitMutationEffectsOnFiber()"]
  bc4a6de9_07dc_eca7_681a_10f692e08483 -->|calls| 31dbea93_6a15_5a88_2a94_0513d6287f5a
  280e7198_912b_d409_1e7c_819dab383d5d["invokeLayoutEffectUnmountInDEV()"]
  280e7198_912b_d409_1e7c_819dab383d5d -->|calls| 31dbea93_6a15_5a88_2a94_0513d6287f5a
  31b9466e_e16b_b91d_e5c6_35944421a4ca["invokePassiveEffectUnmountInDEV()"]
  31b9466e_e16b_b91d_e5c6_35944421a4ca -->|calls| 31dbea93_6a15_5a88_2a94_0513d6287f5a
  05d943ce_0f8c_13ce_9358_02913d60d97f["markComponentPassiveEffectUnmountStarted()"]
  31dbea93_6a15_5a88_2a94_0513d6287f5a -->|calls| 05d943ce_0f8c_13ce_9358_02913d60d97f
  8b9d4cbc_9f16_85ba_1903_a03f8151a855["markComponentLayoutEffectUnmountStarted()"]
  31dbea93_6a15_5a88_2a94_0513d6287f5a -->|calls| 8b9d4cbc_9f16_85ba_1903_a03f8151a855
  67cc4947_e836_b40f_1550_666f13c52772["markComponentPassiveEffectUnmountStopped()"]
  31dbea93_6a15_5a88_2a94_0513d6287f5a -->|calls| 67cc4947_e836_b40f_1550_666f13c52772
  f736f4d0_0636_1417_2839_cd91d960beb1["markComponentLayoutEffectUnmountStopped()"]
  31dbea93_6a15_5a88_2a94_0513d6287f5a -->|calls| f736f4d0_0636_1417_2839_cd91d960beb1
  style 31dbea93_6a15_5a88_2a94_0513d6287f5a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberCommitEffects.js lines 248–302

export function commitHookEffectListUnmount(
  flags: HookFlags,
  finishedWork: Fiber,
  nearestMountedAncestor: Fiber | null,
) {
  try {
    const updateQueue: FunctionComponentUpdateQueue | null =
      (finishedWork.updateQueue: any);
    const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
    if (lastEffect !== null) {
      const firstEffect = lastEffect.next;
      let effect = firstEffect;
      do {
        if ((effect.tag & flags) === flags) {
          // Unmount
          const inst = effect.inst;
          const destroy = inst.destroy;
          if (destroy !== undefined) {
            inst.destroy = undefined;
            if (enableSchedulingProfiler) {
              if ((flags & HookPassive) !== NoHookEffect) {
                markComponentPassiveEffectUnmountStarted(finishedWork);
              } else if ((flags & HookLayout) !== NoHookEffect) {
                markComponentLayoutEffectUnmountStarted(finishedWork);
              }
            }

            if (__DEV__) {
              if ((flags & HookInsertion) !== NoHookEffect) {
                setIsRunningInsertionEffect(true);
              }
            }
            safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
            if (__DEV__) {
              if ((flags & HookInsertion) !== NoHookEffect) {
                setIsRunningInsertionEffect(false);
              }
            }

            if (enableSchedulingProfiler) {
              if ((flags & HookPassive) !== NoHookEffect) {
                markComponentPassiveEffectUnmountStopped();
              } else if ((flags & HookLayout) !== NoHookEffect) {
                markComponentLayoutEffectUnmountStopped();
              }
            }
          }
        }
        effect = effect.next;
      } while (effect !== firstEffect);
    }
  } catch (error) {
    captureCommitPhaseError(finishedWork, finishedWork.return, error);
  }
}

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does commitHookEffectListUnmount() do?
commitHookEffectListUnmount() is a function in the react codebase, defined in packages/react-reconciler/src/ReactFiberCommitEffects.js.
Where is commitHookEffectListUnmount() defined?
commitHookEffectListUnmount() is defined in packages/react-reconciler/src/ReactFiberCommitEffects.js at line 248.
What does commitHookEffectListUnmount() call?
commitHookEffectListUnmount() calls 4 function(s): markComponentLayoutEffectUnmountStarted, markComponentLayoutEffectUnmountStopped, markComponentPassiveEffectUnmountStarted, markComponentPassiveEffectUnmountStopped.
What calls commitHookEffectListUnmount()?
commitHookEffectListUnmount() is called by 7 function(s): commitDeletionEffectsOnFiber, commitHookLayoutUnmountEffects, commitHookPassiveUnmountEffects, commitMutationEffectsOnFiber, invokeLayoutEffectUnmountInDEV, invokePassiveEffectUnmountInDEV, recursivelyRestoreNew.

Analyze Your Own Codebase

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

Try Supermodel Free