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

hooks.js — react Source File

Architecture documentation for hooks.js, a javascript file in the react codebase. 5 imports, 24 dependents.

File javascript BabelCompiler Validation 5 imports 24 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  315baf50_1028_51ca_a9c1_679c6a17ed98["hooks.js"]
  913bb343_55ea_f1b8_08f5_b75cb0a92b76["context.js"]
  315baf50_1028_51ca_a9c1_679c6a17ed98 --> 913bb343_55ea_f1b8_08f5_b75cb0a92b76
  fa31bba5_57ed_1039_52bb_4a8cb4382642["utils.js"]
  315baf50_1028_51ca_a9c1_679c6a17ed98 --> fa31bba5_57ed_1039_52bb_4a8cb4382642
  2020ba72_aecc_bb93_aaf6_bcaa01730dd1["smartStringify"]
  315baf50_1028_51ca_a9c1_679c6a17ed98 --> 2020ba72_aecc_bb93_aaf6_bcaa01730dd1
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  315baf50_1028_51ca_a9c1_679c6a17ed98 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  4f31ec17_ed00_bfa1_f25f_2101aa0548ee["storage"]
  315baf50_1028_51ca_a9c1_679c6a17ed98 --> 4f31ec17_ed00_bfa1_f25f_2101aa0548ee
  dc084a98_cfc9_b696_ce0b_8abf1ee07f6f["EditableValue.js"]
  dc084a98_cfc9_b696_ce0b_8abf1ee07f6f --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  9930e8cf_03b4_86c0_be04_47b410246b71["Element.js"]
  9930e8cf_03b4_86c0_be04_47b410246b71 --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  fd1ac927_00ef_d34e_8747_a00d62b71152["OwnerView.js"]
  fd1ac927_00ef_d34e_8747_a00d62b71152 --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  4e5b4a1f_694c_f426_36e2_a03da99b38d5["OwnersStack.js"]
  4e5b4a1f_694c_f426_36e2_a03da99b38d5 --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  80ad5569_a221_98e5_daec_ede1bea33ee0["Tree.js"]
  80ad5569_a221_98e5_daec_ede1bea33ee0 --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  e2c52a93_982e_407f_9fee_e89aa134ae9d["DevTools.js"]
  e2c52a93_982e_407f_9fee_e89aa134ae9d --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  899cf357_78bc_8627_bd54_2c00e2c9fde2["ModalDialog.js"]
  899cf357_78bc_8627_bd54_2c00e2c9fde2 --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  54e7a598_e83a_4b14_3104_1fa62a034c31["CommitFlamegraph.js"]
  54e7a598_e83a_4b14_3104_1fa62a034c31 --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  0ad6c6d5_5d6d_2d8a_d957_e1433af66ea0["CommitRanked.js"]
  0ad6c6d5_5d6d_2d8a_d957_e1433af66ea0 --> 315baf50_1028_51ca_a9c1_679c6a17ed98
  style 315baf50_1028_51ca_a9c1_679c6a17ed98 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 {
  useCallback,
  useEffect,
  useLayoutEffect,
  useReducer,
  useState,
  useSyncExternalStore,
  useContext,
} from 'react';
import {
  localStorageGetItem,
  localStorageSetItem,
} from 'react-devtools-shared/src/storage';
import {StoreContext, BridgeContext} from './context';
import {sanitizeForParse, smartParse, smartStringify} from '../utils';

type ACTION_RESET = {
  type: 'RESET',
  externalValue: any,
};
type ACTION_UPDATE = {
  type: 'UPDATE',
  editableValue: any,
  externalValue: any,
};

type UseEditableValueAction = ACTION_RESET | ACTION_UPDATE;
type UseEditableValueDispatch = (action: UseEditableValueAction) => void;
type UseEditableValueState = {
  editableValue: any,
  externalValue: any,
  hasPendingChanges: boolean,
  isValid: boolean,
  parsedValue: any,
};

function useEditableValueReducer(
  state: UseEditableValueState,
  action: UseEditableValueAction,
) {
  switch (action.type) {
    case 'RESET':
      return {
        ...state,
        editableValue: smartStringify(action.externalValue),
        externalValue: action.externalValue,
        hasPendingChanges: false,
        isValid: true,
        parsedValue: action.externalValue,
      };
    case 'UPDATE':
// ... (377 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does hooks.js do?
hooks.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 hooks.js?
hooks.js defines 2 function(s): UseEditableValueDispatch, useEditableValueReducer.
What does hooks.js depend on?
hooks.js imports 5 module(s): context.js, react, smartStringify, storage, utils.js.
What files import hooks.js?
hooks.js is imported by 24 file(s): ActivityList.js, CodeEditorByDefault.js, CodeEditorOptions.js, CommitFlamegraph.js, CommitRanked.js, ComponentsSettings.js, DevTools.js, EditableValue.js, and 16 more.
Where is hooks.js in the architecture?
hooks.js is located at packages/react-devtools-shared/src/devtools/views/hooks.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views).

Analyze Your Own Codebase

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

Try Supermodel Free