react Architecture Docs
Home / File/ TreeContext.js — react Source File

TreeContext.js — react Source File

Architecture documentation for TreeContext.js, a javascript file in the react codebase. 7 imports, 18 dependents.

File javascript BabelCompiler Validation 7 imports 18 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd["TreeContext.js"]
  d7b27d30_728f_ba37_ed97_d371fbd3de62["utils.js"]
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd --> d7b27d30_728f_ba37_ed97_d371fbd3de62
  7edde25d_7a4e_2a08_9aa5_35235e4ca8a7["createRegExp"]
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd --> 7edde25d_7a4e_2a08_9aa5_35235e4ca8a7
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  bba85af0_a356_d0c5_4d12_914508b89593["store.js"]
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd --> bba85af0_a356_d0c5_4d12_914508b89593
  d8f20c67_f5fa_0f0a_c967_c41fd9ffce07["ReactTypes"]
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd --> d8f20c67_f5fa_0f0a_c967_c41fd9ffce07
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  aec7978f_0a19_ba93_de9e_ac8cf5ddc74b["types"]
  2d59b0f9_9ad6_da4d_0264_d98f193ab3fd --> aec7978f_0a19_ba93_de9e_ac8cf5ddc74b
  fa31bba5_57ed_1039_52bb_4a8cb4382642["utils.js"]
  fa31bba5_57ed_1039_52bb_4a8cb4382642 --> 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd
  3bbe1444_b210_8ba4_4493_8fd51690fd1d["ActivitySlice.js"]
  3bbe1444_b210_8ba4_4493_8fd51690fd1d --> 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd
  9930e8cf_03b4_86c0_be04_47b410246b71["Element.js"]
  9930e8cf_03b4_86c0_be04_47b410246b71 --> 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd
  9e753c35_ccc6_2061_a942_6e9b10c9177c["IndexableDisplayName.js"]
  9e753c35_ccc6_2061_a942_6e9b10c9177c --> 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd
  4c0d725a_27bd_a723_3599_a3e75bea5bd3["InspectedElement.js"]
  4c0d725a_27bd_a723_3599_a3e75bea5bd3 --> 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd
  73a58bda_a3e0_b7ab_6561_84167121e1ae["InspectedElementContext.js"]
  73a58bda_a3e0_b7ab_6561_84167121e1ae --> 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd
  8d1aac2b_7bad_9e53_cab3_6414b0d9e4c5["InspectedElementErrorBoundary.js"]
  8d1aac2b_7bad_9e53_cab3_6414b0d9e4c5 --> 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd
  style 2d59b0f9_9ad6_da4d_0264_d98f193ab3fd 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
 */

// This context combines tree/selection state, search, and the owners stack.
// These values are managed together because changes in one often impact the others.
// Combining them enables us to avoid cascading renders.
//
// Changes to search state may impact tree state.
// For example, updating the selected search result also updates the tree's selected value.
// Search does not fundamentally change the tree though.
// It is also possible to update the selected tree value independently.
//
// Changes to owners state mask search and tree values.
// When owners stack is not empty, search is temporarily disabled,
// and tree values (e.g. num elements, selected element) are masked.
// Both tree and search values are restored when the owners stack is cleared.
//
// For this reason, changes to the tree context are processed in sequence: tree -> search -> owners
// This enables each section to potentially override (or mask) previous values.

import type {ReactContext} from 'shared/ReactTypes';

import * as React from 'react';
import {
  createContext,
  useContext,
  useEffect,
  useLayoutEffect,
  useMemo,
  useReducer,
  useRef,
  startTransition,
} from 'react';
import {createRegExp} from '../utils';
import {StoreContext} from '../context';
import Store from '../../store';

import type {Element} from 'react-devtools-shared/src/frontend/types';

export type StateContext = {
  // Tree
  numElements: number,
  ownerSubtreeLeafElementID: number | null,

  // Search
  searchIndex: number | null,
  searchResults: Array<number>,
  searchText: string,

  // Owners
  ownerID: number | null,
  ownerFlatTree: Array<Element> | null,

  // Activity slice
// ... (1025 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does TreeContext.js do?
TreeContext.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 TreeContext.js?
TreeContext.js defines 1 function(s): DispatcherContext.
What does TreeContext.js depend on?
TreeContext.js imports 7 module(s): ReactTypes, context.js, createRegExp, react, store.js, types, utils.js.
What files import TreeContext.js?
TreeContext.js is imported by 18 file(s): ActivityList.js, ActivitySlice.js, DevTools.js, Element.js, IndexableDisplayName.js, InspectedElement.js, InspectedElementContext.js, InspectedElementErrorBoundary.js, and 10 more.
Where is TreeContext.js in the architecture?
TreeContext.js is located at packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/Components).

Analyze Your Own Codebase

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

Try Supermodel Free