getComponentNameFromOwner() — react Function Reference

Source Code

packages/react-reconciler/src/getComponentNameFromFiber.js lines 73–162

export function getComponentNameFromOwner(
  owner: Fiber | ReactComponentInfo,
): string | null {
  if (typeof owner.tag === 'number') {
    return getComponentNameFromFiber((owner: any));
  }
  if (typeof owner.name === 'string') {
    return owner.name;
  }
  return null;
}

export default function getComponentNameFromFiber(fiber: Fiber): string | null {
  const {tag, type} = fiber;
  switch (tag) {
    case ActivityComponent:
      return 'Activity';
    case CacheComponent:
      return 'Cache';
    case ContextConsumer:
      const consumer: ReactConsumerType<any> = (type: any);
      return getContextName(consumer._context) + '.Consumer';
    case ContextProvider:
      const context: ReactContext<any> = (type: any);
      return getContextName(context);
    case DehydratedFragment:
      return 'DehydratedFragment';
    case ForwardRef:
      return getWrappedName(type, type.render, 'ForwardRef');
    case Fragment:
      return 'Fragment';
    case HostHoistable:
    case HostSingleton:
    case HostComponent:
      // Host component type is the display name (e.g. "div", "View")
      return type;
    case HostPortal:
      return 'Portal';
    case HostRoot:
      return 'Root';
    case HostText:
      return 'Text';
    case LazyComponent:
      // Name comes from the type in this case; we don't have a tag.
      return getComponentNameFromType(type);
    case Mode:
      if (type === REACT_STRICT_MODE_TYPE) {
        // Don't be less specific than shared/getComponentNameFromType
        return 'StrictMode';
      }
      return 'Mode';
    case OffscreenComponent:
      return 'Offscreen';
    case Profiler:
      return 'Profiler';
    case ScopeComponent:
      return 'Scope';
    case SuspenseComponent:
      return 'Suspense';
    case SuspenseListComponent:
      return 'SuspenseList';
    case TracingMarkerComponent:
      return 'TracingMarker';
    case ViewTransitionComponent:
      if (enableViewTransition) {
        return 'ViewTransition';
      }
    // The display name for these tags come from the user-provided type:
    // Fallthrough
    case IncompleteClassComponent:
    case IncompleteFunctionComponent:
      if (disableLegacyMode) {
        break;
      }
    // Fallthrough
    case ClassComponent:
    case FunctionComponent:
    case MemoComponent:
    case SimpleMemoComponent:
      if (typeof type === 'function') {
        return (type: any).displayName || type.name || null;