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

HookChangeSummary.js — react Source File

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

File javascript BabelCompiler Validation 12 imports 1 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  42ca8057_28d2_de34_4629_6b91b57e8269["HookChangeSummary.js"]
  0609a3f2_aa64_e53b_b82c_95ea68e3100d["HookChangeSummary.css"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> 0609a3f2_aa64_e53b_b82c_95ea68e3100d
  9f39024f_b905_9b0f_2fc7_e24785732638["ButtonIcon.js"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> 9f39024f_b905_9b0f_2fc7_e24785732638
  4690d9c0_cb81_9593_7817_f9e61a49f9e7["ButtonIcon"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> 4690d9c0_cb81_9593_7817_f9e61a49f9e7
  73a58bda_a3e0_b7ab_6561_84167121e1ae["InspectedElementContext.js"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> 73a58bda_a3e0_b7ab_6561_84167121e1ae
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  61c0d244_ab84_2e1a_7b19_996aebeb6c63["Toggle.js"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> 61c0d244_ab84_2e1a_7b19_996aebeb6c63
  ad68b45d_879b_b053_fa18_da49ca05b77a["Toggle"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> ad68b45d_879b_b053_fa18_da49ca05b77a
  98e7cbed_f4b4_9f35_838e_6e7cf3e5edcf["types.js"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> 98e7cbed_f4b4_9f35_838e_6e7cf3e5edcf
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  1f37b01d_ae85_5546_b005_b686486b8d9e["hookNamesCache"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> 1f37b01d_ae85_5546_b005_b686486b8d9e
  2aea215d_7dea_32ff_b58a_e3e98c264b47["hookSourceLocation"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> 2aea215d_7dea_32ff_b58a_e3e98c264b47
  741f125f_8d71_2134_c016_a18fb8f60d66["ReactDebugHooks"]
  42ca8057_28d2_de34_4629_6b91b57e8269 --> 741f125f_8d71_2134_c016_a18fb8f60d66
  5e16f57b_1380_519b_fff9_378869430fab["WhatChanged.js"]
  5e16f57b_1380_519b_fff9_378869430fab --> 42ca8057_28d2_de34_4629_6b91b57e8269
  style 42ca8057_28d2_de34_4629_6b91b57e8269 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
 */

import * as React from 'react';
import {
  useContext,
  useMemo,
  useCallback,
  memo,
  useState,
  useEffect,
} from 'react';
import styles from './HookChangeSummary.css';
import ButtonIcon from '../ButtonIcon';
import {InspectedElementContext} from '../Components/InspectedElementContext';
import {StoreContext} from '../context';

import {getAlreadyLoadedHookNames} from 'react-devtools-shared/src/hookNamesCache';
import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookSourceLocation';
import Toggle from '../Toggle';
import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks';
import type {ChangeDescription} from './types';

// $FlowFixMe: Flow doesn't know about Intl.ListFormat
const hookListFormatter = new Intl.ListFormat('en', {
  style: 'long',
  type: 'conjunction',
});

type HookProps = {
  hook: HooksNode,
  hookNames: Map<string, string> | null,
};

const Hook: component(...props: HookProps) = memo(
  ({hook, hookNames}: HookProps) => {
    const hookSource = hook.hookSource;
    const hookName = useMemo(() => {
      if (!hookSource || !hookNames) return null;
      const key = getHookSourceLocationKey(hookSource);
      return hookNames.get(key) || null;
    }, [hookSource, hookNames]);

    return (
      <ul className={styles.Hook}>
        <li>
          {hook.id !== null && (
            <span className={styles.PrimitiveHookNumber}>
              {String(hook.id + 1)}
            </span>
          )}
          <span
            className={
              hook.id !== null ? styles.PrimitiveHookName : styles.Name
// ... (150 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does HookChangeSummary.js do?
HookChangeSummary.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 HookChangeSummary.js?
HookChangeSummary.js defines 2 function(s): filteredSubHooks, shouldKeepHook.
What does HookChangeSummary.js depend on?
HookChangeSummary.js imports 12 module(s): ButtonIcon, ButtonIcon.js, HookChangeSummary.css, InspectedElementContext.js, ReactDebugHooks, Toggle, Toggle.js, context.js, and 4 more.
What files import HookChangeSummary.js?
HookChangeSummary.js is imported by 1 file(s): WhatChanged.js.
Where is HookChangeSummary.js in the architecture?
HookChangeSummary.js is located at packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/Profiler).

Analyze Your Own Codebase

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

Try Supermodel Free