Home / File/ ReactFizzTreeContext.js — react Source File

ReactFizzTreeContext.js — react Source File

Architecture documentation for ReactFizzTreeContext.js, a javascript file in the react codebase. 0 imports, 3 dependents.

File javascript BabelCompiler Validation 3 dependents 5 functions

Entity Profile

Dependency Diagram

graph LR
  fe344404_ced0_26ed_f52b_cbbe258bc47a["ReactFizzTreeContext.js"]
  62bbc5a9_96f5_01de_8910_fb5c249aaf87["ReactFizzHooks.js"]
  62bbc5a9_96f5_01de_8910_fb5c249aaf87 --> fe344404_ced0_26ed_f52b_cbbe258bc47a
  1b694821_5816_1762_7c98_f0727a09e732["ReactFizzServer.js"]
  1b694821_5816_1762_7c98_f0727a09e732 --> fe344404_ced0_26ed_f52b_cbbe258bc47a
  a625ee1f_41da_759d_b96d_f17ee797888e["ReactFizzViewTransitionComponent.js"]
  a625ee1f_41da_759d_b96d_f17ee797888e --> fe344404_ced0_26ed_f52b_cbbe258bc47a
  style fe344404_ced0_26ed_f52b_cbbe258bc47a 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
 */

// Ids are base 32 strings whose binary representation corresponds to the
// position of a node in a tree.

// Every time the tree forks into multiple children, we add additional bits to
// the left of the sequence that represent the position of the child within the
// current level of children.
//
//      00101       00010001011010101
//      ╰─┬─╯       ╰───────┬───────╯
//   Fork 5 of 20       Parent id
//
// The leading 0s are important. In the above example, you only need 3 bits to
// represent slot 5. However, you need 5 bits to represent all the forks at
// the current level, so we must account for the empty bits at the end.
//
// For this same reason, slots are 1-indexed instead of 0-indexed. Otherwise,
// the zeroth id at a level would be indistinguishable from its parent.
//
// If a node has only one child, and does not materialize an id (i.e. does not
// contain a useId hook), then we don't need to allocate any space in the
// sequence. It's treated as a transparent indirection. For example, these two
// trees produce the same ids:
//
// <>                          <>
//   <Indirection>               <A />
//     <A />                     <B />
//   </Indirection>            </>
//   <B />
// </>
//
// However, we cannot skip any node that materializes an id. Otherwise, a parent
// id that does not fork would be indistinguishable from its child id. For
// example, this tree does not fork, but the parent and child must have
// different ids.
//
// <Parent>
//   <Child />
// </Parent>
//
// To handle this scenario, every time we materialize an id, we allocate a
// new level with a single slot. You can think of this as a fork with only one
// prong, or an array of children with length 1.
//
// It's possible for the size of the sequence to exceed 32 bits, the max
// size for bitwise operations. When this happens, we make more room by
// converting the right part of the id to a string and storing it in an overflow
// variable. We use a base 32 string representation, because 32 is the largest
// power of 2 that is supported by toString(). We want the base to be large so
// that the resulting ids are compact, and we want the base to be a power of 2
// because every log2(base) bits corresponds to a single character, i.e. every
// log2(32) = 5 bits. That means we can lop bits off the end 5 at a time without
// ... (109 more lines)

Domain

Subdomains

Frequently Asked Questions

What does ReactFizzTreeContext.js do?
ReactFizzTreeContext.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in ReactFizzTreeContext.js?
ReactFizzTreeContext.js defines 5 function(s): clz32Fallback, getBitLength, getLeadingBit, getTreeId, pushTreeContext.
What files import ReactFizzTreeContext.js?
ReactFizzTreeContext.js is imported by 3 file(s): ReactFizzHooks.js, ReactFizzServer.js, ReactFizzViewTransitionComponent.js.
Where is ReactFizzTreeContext.js in the architecture?
ReactFizzTreeContext.js is located at packages/react-server/src/ReactFizzTreeContext.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-server/src).

Analyze Your Own Codebase

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

Try Supermodel Free