Home / File/ useInferredName.js — react Source File

useInferredName.js — react Source File

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

File javascript BabelCompiler Validation 5 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  73a4c056_d3b2_8bef_1f29_bf515f8cb1bc["useInferredName.js"]
  13680a3f_99de_28d1_e59a_bd17e6851f1d["FetchFileWithCachingContext.js"]
  73a4c056_d3b2_8bef_1f29_bf515f8cb1bc --> 13680a3f_99de_28d1_e59a_bd17e6851f1d
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  73a4c056_d3b2_8bef_1f29_bf515f8cb1bc --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  d8f20c67_f5fa_0f0a_c967_c41fd9ffce07["ReactTypes"]
  73a4c056_d3b2_8bef_1f29_bf515f8cb1bc --> d8f20c67_f5fa_0f0a_c967_c41fd9ffce07
  c3870ba8_6512_a088_2557_ff78b3a22e41["symbolicateSource"]
  73a4c056_d3b2_8bef_1f29_bf515f8cb1bc --> c3870ba8_6512_a088_2557_ff78b3a22e41
  aec7978f_0a19_ba93_de9e_ac8cf5ddc74b["types"]
  73a4c056_d3b2_8bef_1f29_bf515f8cb1bc --> aec7978f_0a19_ba93_de9e_ac8cf5ddc74b
  72d570aa_3875_3688_0200_4617e04d04ed["InspectedElementSuspendedBy.js"]
  72d570aa_3875_3688_0200_4617e04d04ed --> 73a4c056_d3b2_8bef_1f29_bf515f8cb1bc
  style 73a4c056_d3b2_8bef_1f29_bf515f8cb1bc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {use, useContext, useDeferredValue} from 'react';

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

import type {SourceMappedLocation} from 'react-devtools-shared/src/symbolicateSource';

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

import FetchFileWithCachingContext from './Components/FetchFileWithCachingContext';

import {symbolicateSourceWithCache} from 'react-devtools-shared/src/symbolicateSource';

export default function useInferredName(
  asyncInfo: SerializedAsyncInfo,
): string {
  const fetchFileWithCaching = useContext(FetchFileWithCachingContext);
  const name = asyncInfo.awaited.name;
  let inferNameFromStack = null;
  if (!name || name === 'Promise' || name === 'lazy') {
    // If all we have is a generic name, we can try to infer a better name from
    // the stack. We only do this if the stack has more than one frame since
    // otherwise it's likely to just be the name of the component which isn't better.
    const bestStack = asyncInfo.awaited.stack || asyncInfo.stack;
    if (bestStack !== null && bestStack.length > 1) {
      inferNameFromStack = bestStack;
    }
  }
  // Start by not source mapping and just taking the first name and upgrade to
  // the better name asynchronously if we find one. Most of the time it'll just be
  // the top of the stack.
  const shouldSourceMap = useDeferredValue(inferNameFromStack !== null, false);
  if (inferNameFromStack !== null) {
    if (shouldSourceMap) {
      let bestMatch = '';
      for (let i = 0; i < inferNameFromStack.length; i++) {
        const callSite: ReactCallSite = inferNameFromStack[i];
        const [virtualFunctionName, virtualURL, virtualLine, virtualColumn] =
          callSite;
        const symbolicatedCallSite: null | SourceMappedLocation =
          fetchFileWithCaching !== null
            ? use(
                symbolicateSourceWithCache(
                  fetchFileWithCaching,
                  virtualURL,
                  virtualLine,
                  virtualColumn,
                ),
              )
            : null;
        if (symbolicatedCallSite === null) {
          // If we can't source map, we treat it as first party code. We called whatever was
          // the previous callsite.
          if (bestMatch === '') {
            return virtualFunctionName || name;
          } else {
            return bestMatch;
          }
        } else if (!symbolicatedCallSite.ignored) {
          if (bestMatch === '') {
            // If we had no good stack frames for internal calls, just use the last
            // first party function name.
            return symbolicatedCallSite[0] || virtualFunctionName || name;
          } else {
            return bestMatch;
          }
        } else {
          // This line was ignore listed, it might be the one we called into from first party.
          bestMatch = symbolicatedCallSite[0] || virtualFunctionName;
        }
      }
      return name;
    } else {
      return inferNameFromStack[0][0];
    }
  } else {
    return name;
  }
}

Domain

Subdomains

Functions

Dependencies

Frequently Asked Questions

What does useInferredName.js do?
useInferredName.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 useInferredName.js?
useInferredName.js defines 1 function(s): useInferredName.
What does useInferredName.js depend on?
useInferredName.js imports 5 module(s): FetchFileWithCachingContext.js, ReactTypes, react, symbolicateSource, types.
What files import useInferredName.js?
useInferredName.js is imported by 1 file(s): InspectedElementSuspendedBy.js.
Where is useInferredName.js in the architecture?
useInferredName.js is located at packages/react-devtools-shared/src/devtools/views/useInferredName.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