ReactFiberClassUpdateQueue.js — react Source File
Architecture documentation for ReactFiberClassUpdateQueue.js, a javascript file in the react codebase. 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
Dependencies
Imported By
- packages/react-reconciler/src/ReactFiberBeginWork.js
- packages/react-reconciler/src/ReactFiberClassComponent.js
- packages/react-reconciler/src/ReactFiberCommitEffects.js
- packages/react-reconciler/src/ReactFiberCommitWork.js
- packages/react-reconciler/src/ReactFiberConcurrentUpdates.js
- packages/react-reconciler/src/ReactFiberHooks.js
- packages/react-reconciler/src/ReactFiberReconciler.js
- packages/react-reconciler/src/ReactFiberRoot.js
- packages/react-reconciler/src/ReactFiberThrow.js
- packages/react-reconciler/src/ReactFiberWorkLoop.js
Source
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