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

reconcileChildren() — react Function Reference

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

Function javascript BabelCompiler Validation called by 15

Entity Profile

Dependency Diagram

graph TD
  cf5641cc_b89e_d6b2_5d40_41ad5bbdd682["reconcileChildren()"]
  0be70812_cc0c_b210_f84f_8e61dd5f831c["ReactFiberBeginWork.js"]
  cf5641cc_b89e_d6b2_5d40_41ad5bbdd682 -->|defined in| 0be70812_cc0c_b210_f84f_8e61dd5f831c
  f3abfeea_868f_5c8e_9744_74c9973ded12["updateForwardRef()"]
  f3abfeea_868f_5c8e_9744_74c9973ded12 -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  526a99f2_4938_2b27_2b9e_a0a59903cdb5["updateOffscreenComponent()"]
  526a99f2_4938_2b27_2b9e_a0a59903cdb5 -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  a1cb248e_a332_2329_3b0e_064edd3c0447["updateCacheComponent()"]
  a1cb248e_a332_2329_3b0e_064edd3c0447 -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  378fe066_0c65_1514_f9d1_c435960ed7e3["updateTracingMarkerComponent()"]
  378fe066_0c65_1514_f9d1_c435960ed7e3 -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  9de08ac8_c26a_67db_9944_713b083358ad["updateFragment()"]
  9de08ac8_c26a_67db_9944_713b083358ad -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  0aa7813c_2320_24a0_dc18_24050a811a89["updateMode()"]
  0aa7813c_2320_24a0_dc18_24050a811a89 -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  62d7e534_aaea_fb4d_6201_8841bd8d5f53["updateProfiler()"]
  62d7e534_aaea_fb4d_6201_8841bd8d5f53 -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  50e17875_d138_1098_df3a_5e5668c9be3d["updateFunctionComponent()"]
  50e17875_d138_1098_df3a_5e5668c9be3d -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  dfac1880_449a_ca3a_3037_ca7205fa8fa7["replayFunctionComponent()"]
  dfac1880_449a_ca3a_3037_ca7205fa8fa7 -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  fec6f182_8acb_a259_b114_e6d1db8ac64b["finishClassComponent()"]
  fec6f182_8acb_a259_b114_e6d1db8ac64b -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  53f55fda_e2b6_2801_4fbc_525f8828d23d["updateHostRoot()"]
  53f55fda_e2b6_2801_4fbc_525f8828d23d -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  52177215_eced_b9dc_62cc_32297ae94438["updateSuspenseListComponent()"]
  52177215_eced_b9dc_62cc_32297ae94438 -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  a4677f2e_f0f6_771a_d467_f3a4fbe183e4["updateViewTransition()"]
  a4677f2e_f0f6_771a_d467_f3a4fbe183e4 -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  style cf5641cc_b89e_d6b2_5d40_41ad5bbdd682 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberBeginWork.js lines 340–371

export function reconcileChildren(
  current: Fiber | null,
  workInProgress: Fiber,
  nextChildren: any,
  renderLanes: Lanes,
) {
  if (current === null) {
    // If this is a fresh new component that hasn't been rendered yet, we
    // won't update its child set by applying minimal side-effects. Instead,
    // we will add them all to the child before it gets rendered. That means
    // we can optimize this reconciliation pass by not tracking side-effects.
    workInProgress.child = mountChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderLanes,
    );
  } else {
    // If the current child is the same as the work in progress, it means that
    // we haven't yet started any work on these children. Therefore, we use
    // the clone algorithm to create a copy of all the current children.

    // If we had any progressed work already, that is invalid at this point so
    // let's throw it out.
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      current.child,
      nextChildren,
      renderLanes,
    );
  }
}

Domain

Subdomains

Defined In

Called By

Source

Frequently Asked Questions

What does reconcileChildren() do?
reconcileChildren() is a function in the react codebase, defined in packages/react-reconciler/src/ReactFiberBeginWork.js.
Where is reconcileChildren() defined?
reconcileChildren() is defined in packages/react-reconciler/src/ReactFiberBeginWork.js at line 340.
What calls reconcileChildren()?
reconcileChildren() is called by 15 function(s): finishClassComponent, replayFunctionComponent, updateCacheComponent, updateForwardRef, updateFragment, updateFunctionComponent, updateHostRoot, updateMode, and 7 more.

Analyze Your Own Codebase

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

Try Supermodel Free