Home / Function/ updateMemoComponent() — react Function Reference

updateMemoComponent() — react Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  a032b50f_d1ac_c367_9f15_394d8f0023c1["updateMemoComponent()"]
  0be70812_cc0c_b210_f84f_8e61dd5f831c["ReactFiberBeginWork.js"]
  a032b50f_d1ac_c367_9f15_394d8f0023c1 -->|defined in| 0be70812_cc0c_b210_f84f_8e61dd5f831c
  53f55fda_e2b6_2801_4fbc_525f8828d23d["updateHostRoot()"]
  53f55fda_e2b6_2801_4fbc_525f8828d23d -->|calls| a032b50f_d1ac_c367_9f15_394d8f0023c1
  235e1db1_02a4_912f_7d82_ea6636c850c0["beginWork()"]
  235e1db1_02a4_912f_7d82_ea6636c850c0 -->|calls| a032b50f_d1ac_c367_9f15_394d8f0023c1
  9408d455_e5fd_ad50_60cf_b71abb90bc98["isSimpleFunctionComponent()"]
  a032b50f_d1ac_c367_9f15_394d8f0023c1 -->|calls| 9408d455_e5fd_ad50_60cf_b71abb90bc98
  54379e26_51e2_5baf_65fd_04a04dbf0118["resolveFunctionForHotReloading()"]
  a032b50f_d1ac_c367_9f15_394d8f0023c1 -->|calls| 54379e26_51e2_5baf_65fd_04a04dbf0118
  e97df9a2_1803_92a2_50c0_f4ba3f1bebaa["validateFunctionComponentInDev()"]
  a032b50f_d1ac_c367_9f15_394d8f0023c1 -->|calls| e97df9a2_1803_92a2_50c0_f4ba3f1bebaa
  d5867db8_c86c_35f1_776d_f9f063826e18["updateSimpleMemoComponent()"]
  a032b50f_d1ac_c367_9f15_394d8f0023c1 -->|calls| d5867db8_c86c_35f1_776d_f9f063826e18
  ec058345_39f3_16c0_234d_553132510c15["checkScheduledUpdateOrContext()"]
  a032b50f_d1ac_c367_9f15_394d8f0023c1 -->|calls| ec058345_39f3_16c0_234d_553132510c15
  6cb202e6_76dc_0479_ff31_d0ef23610882["bailoutOnAlreadyFinishedWork()"]
  a032b50f_d1ac_c367_9f15_394d8f0023c1 -->|calls| 6cb202e6_76dc_0479_ff31_d0ef23610882
  style a032b50f_d1ac_c367_9f15_394d8f0023c1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberBeginWork.js lines 471–537

function updateMemoComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  nextProps: any,
  renderLanes: Lanes,
): null | Fiber {
  if (current === null) {
    const type = Component.type;
    if (isSimpleFunctionComponent(type) && Component.compare === null) {
      let resolvedType = type;
      if (__DEV__) {
        resolvedType = resolveFunctionForHotReloading(type);
      }
      // If this is a plain function component without default props,
      // and with only the default shallow comparison, we upgrade it
      // to a SimpleMemoComponent to allow fast path updates.
      workInProgress.tag = SimpleMemoComponent;
      workInProgress.type = resolvedType;
      if (__DEV__) {
        validateFunctionComponentInDev(workInProgress, type);
      }
      return updateSimpleMemoComponent(
        current,
        workInProgress,
        resolvedType,
        nextProps,
        renderLanes,
      );
    }
    const child = createFiberFromTypeAndProps(
      Component.type,
      null,
      nextProps,
      workInProgress,
      workInProgress.mode,
      renderLanes,
    );
    child.ref = workInProgress.ref;
    child.return = workInProgress;
    workInProgress.child = child;
    return child;
  }
  const currentChild = ((current.child: any): Fiber); // This is always exactly one child
  const hasScheduledUpdateOrContext = checkScheduledUpdateOrContext(
    current,
    renderLanes,
  );
  if (!hasScheduledUpdateOrContext) {
    // This will be the props with resolved defaultProps,
    // unlike current.memoizedProps which will be the unresolved ones.
    const prevProps = currentChild.memoizedProps;
    // Default to shallow comparison
    let compare = Component.compare;
    compare = compare !== null ? compare : shallowEqual;
    if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {
      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
    }
  }
  // React DevTools reads this flag.
  workInProgress.flags |= PerformedWork;
  const newChild = createWorkInProgress(currentChild, nextProps);
  newChild.ref = workInProgress.ref;
  newChild.return = workInProgress;
  workInProgress.child = newChild;
  return newChild;
}

Domain

Subdomains

Frequently Asked Questions

What does updateMemoComponent() do?
updateMemoComponent() is a function in the react codebase, defined in packages/react-reconciler/src/ReactFiberBeginWork.js.
Where is updateMemoComponent() defined?
updateMemoComponent() is defined in packages/react-reconciler/src/ReactFiberBeginWork.js at line 471.
What does updateMemoComponent() call?
updateMemoComponent() calls 6 function(s): bailoutOnAlreadyFinishedWork, checkScheduledUpdateOrContext, isSimpleFunctionComponent, resolveFunctionForHotReloading, updateSimpleMemoComponent, validateFunctionComponentInDev.
What calls updateMemoComponent()?
updateMemoComponent() is called by 2 function(s): beginWork, updateHostRoot.

Analyze Your Own Codebase

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

Try Supermodel Free