Home / File/ ReactFiberClassUpdateQueue.js — react Source File

ReactFiberClassUpdateQueue.js — react Source File

Architecture documentation for ReactFiberClassUpdateQueue.js, a javascript file in the react codebase. 12 imports, 10 dependents.

File javascript BabelCompiler 12 imports 10 dependents

Entity Profile

Dependency Diagram

graph LR
  39c2d339_1422_a702_78f7_1997d8d72c29["ReactFiberClassUpdateQueue.js"]
  6b9f5caa_fb13_3d3c_2f60_ad3c4f58371f["ReactInternalTypes.js"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> 6b9f5caa_fb13_3d3c_2f60_ad3c4f58371f
  768f6d67_77c1_be19_5596_a943eab59e05["ReactFiberLane.js"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> 768f6d67_77c1_be19_5596_a943eab59e05
  278c890a_abdf_e007_0c26_ae3bc8eda908["ReactFiberNewContext.js"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> 278c890a_abdf_e007_0c26_ae3bc8eda908
  6773f9a2_fdb7_4938_741f_4887273ad469["ReactFiberFlags.js"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> 6773f9a2_fdb7_4938_741f_4887273ad469
  e2d659a0_137e_44c3_6d74_509023d250de["getComponentNameFromFiber.js"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> e2d659a0_137e_44c3_6d74_509023d250de
  da3c54a1_3083_4820_c4b4_b893d0987ccb["ReactTypeOfMode.js"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> da3c54a1_3083_4820_c4b4_b893d0987ccb
  d73e9290_2d2e_5d3f_97dd_84929f205c77["ReactFiberWorkLoop.js"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> d73e9290_2d2e_5d3f_97dd_84929f205c77
  8dfed368_a2ce_03e8_73a7_410857344637["ReactFiberConcurrentUpdates.js"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> 8dfed368_a2ce_03e8_73a7_410857344637
  1f955e30_ff03_d9f9_d498_58b7dc7858dc["ReactFiberDevToolsHook.js"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> 1f955e30_ff03_d9f9_d498_58b7dc7858dc
  88d91075_df31_e6fc_5535_80030045f42a["setIsStrictModeForDevtools"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> 88d91075_df31_e6fc_5535_80030045f42a
  6332839f_b3f6_a025_4ca8_e9753718df71["ReactFiberAsyncAction.js"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> 6332839f_b3f6_a025_4ca8_e9753718df71
  326b1b33_c1be_450b_f53b_51a78bbe8633["assign"]
  39c2d339_1422_a702_78f7_1997d8d72c29 --> 326b1b33_c1be_450b_f53b_51a78bbe8633
  0be70812_cc0c_b210_f84f_8e61dd5f831c["ReactFiberBeginWork.js"]
  0be70812_cc0c_b210_f84f_8e61dd5f831c --> 39c2d339_1422_a702_78f7_1997d8d72c29
  3805476a_1924_0e35_fff7_6afad197a523["ReactFiberClassComponent.js"]
  3805476a_1924_0e35_fff7_6afad197a523 --> 39c2d339_1422_a702_78f7_1997d8d72c29
  style 39c2d339_1422_a702_78f7_1997d8d72c29 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

// UpdateQueue is a linked list of prioritized updates.
//
// Like fibers, update queues come in pairs: a current queue, which represents
// the visible state of the screen, and a work-in-progress queue, which can be
// mutated and processed asynchronously before it is committed — a form of
// double buffering. If a work-in-progress render is discarded before finishing,
// we create a new work-in-progress by cloning the current queue.
//
// Both queues share a persistent, singly-linked list structure. To schedule an
// update, we append it to the end of both queues. Each queue maintains a
// pointer to first update in the persistent list that hasn't been processed.
// The work-in-progress pointer always has a position equal to or greater than
// the current queue, since we always work on that one. The current queue's
// pointer is only updated during the commit phase, when we swap in the
// work-in-progress.
//
// For example:
//
//   Current pointer:           A - B - C - D - E - F
//   Work-in-progress pointer:              D - E - F
//                                          ^
//                                          The work-in-progress queue has
//                                          processed more updates than current.
//
// The reason we append to both queues is because otherwise we might drop
// updates without ever processing them. For example, if we only add updates to
// the work-in-progress queue, some updates could be lost whenever a work-in
// -progress render restarts by cloning from current. Similarly, if we only add
// updates to the current queue, the updates will be lost whenever an already
// in-progress queue commits and swaps with the current queue. However, by
// adding to both queues, we guarantee that the update will be part of the next
// work-in-progress. (And because the work-in-progress queue becomes the
// current queue once it commits, there's no danger of applying the same
// update twice.)
//
// Prioritization
// --------------
//
// Updates are not sorted by priority, but by insertion; new updates are always
// appended to the end of the list.
//
// The priority is still important, though. When processing the update queue
// during the render phase, only the updates with sufficient priority are
// included in the result. If we skip an update because it has insufficient
// priority, it remains in the queue to be processed later, during a lower
// priority render. Crucially, all updates subsequent to a skipped update also
// remain in the queue *regardless of their priority*. That means high priority
// updates are sometimes processed twice, at two separate priorities. We also
// keep track of a base state, that represents the state before the first
// update in the queue is applied.
//
// ... (704 more lines)

Domain

Frequently Asked Questions

What does ReactFiberClassUpdateQueue.js do?
ReactFiberClassUpdateQueue.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain.
What does ReactFiberClassUpdateQueue.js depend on?
ReactFiberClassUpdateQueue.js imports 12 module(s): ReactFiberAsyncAction.js, ReactFiberConcurrentUpdates.js, ReactFiberDevToolsHook.js, ReactFiberFlags.js, ReactFiberLane.js, ReactFiberNewContext.js, ReactFiberWorkLoop.js, ReactInternalTypes.js, and 4 more.
What files import ReactFiberClassUpdateQueue.js?
ReactFiberClassUpdateQueue.js is imported by 10 file(s): ReactFiberBeginWork.js, ReactFiberClassComponent.js, ReactFiberCommitEffects.js, ReactFiberCommitWork.js, ReactFiberConcurrentUpdates.js, ReactFiberHooks.js, ReactFiberReconciler.js, ReactFiberRoot.js, and 2 more.
Where is ReactFiberClassUpdateQueue.js in the architecture?
ReactFiberClassUpdateQueue.js is located at packages/react-reconciler/src/ReactFiberClassUpdateQueue.js (domain: BabelCompiler, directory: packages/react-reconciler/src).

Analyze Your Own Codebase

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

Try Supermodel Free