Repository: facebook/react
File: packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.js (JavaScript)

Code before:
    return true;
  }
  return (
    hook.subHooks?.some(subHook => shouldKeepHook(subHook, hooksArray)) ?? false
  );
};

const filterHooks = (
  hook: HooksNode,
  hooksArray: Array<number>,
): HooksNode | null => {
  if (!shouldKeepHook(hook, hooksArray)) {
    return null;
  }

  if (hook.subHooks?.length > 0) {
    const filteredSubHooks = hook.subHooks
      .map(subHook => filterHooks(subHook, hooksArray))
      .filter(Boolean);

    return filteredSubHooks.length > 0
      ? {...hook, subHooks: filteredSubHooks}
      : {...hook};
  }

  return hook;
};

type Props = {|
  fiberID: number,
  hooks: $PropertyType<ChangeDescription, 'hooks'>,
  state: $PropertyType<ChangeDescription, 'state'>,
  displayMode?: 'detailed' | 'compact',
|};

const HookChangeSummary: React.AbstractComponent<Props> = memo(
  ({hooks, fiberID, state, displayMode = 'detailed'}: Props) => {
    const {parseHookNames, toggleParseHookNames, inspectedElement} = useContext(
      InspectedElementContext,
    );
    const store = useContext(StoreContext);

    const [parseHookNamesOptimistic, setParseHookNamesOptimistic] =
      useState<boolean>(parseHookNames);

    useEffect(() => {
      setParseHookNamesOptimistic(parseHookNames);
    }, [inspectedElement?.id, parseHookNames]);

    const handleOnChange = useCallback(() => {
      setParseHookNamesOptimistic(!parseHookNames);

Review comment (suggestion):
```suggestion
  const subHooks = hook.subHooks;
  if (subHooks == null) {
    return hook;
  }
  
  const filteredSubHooks = subHooks
      .map(subHook => filterHooks(subHook, hooksArray))
      .filter(Boolean);

  return filteredSubHooks.length > 0
      ? {...hook, subHooks: filteredSubHooks}
      :  hook;
```

Code after:
    return false;
  }

  return subHooks.some(subHook => shouldKeepHook(subHook, hooksArray));
};

const filterHooks = (
  hook: HooksNode,
  hooksArray: Array<number>,
): HooksNode | null => {
  if (!shouldKeepHook(hook, hooksArray)) {
    return null;
  }

  const subHooks = hook.subHooks;
  if (subHooks == null) {
    return hook;
  }

  const filteredSubHooks = subHooks
    .map(subHook => filterHooks(subHook, hooksArray))
    .filter(Boolean);
  return filteredSubHooks.length > 0
    ? {...hook, subHooks: filteredSubHooks}
    : hook;
};

type Props = {|
  fiberID: number,
  hooks: $PropertyType<ChangeDescription, 'hooks'>,
  state: $PropertyType<ChangeDescription, 'state'>,
  displayMode?: 'detailed' | 'compact',
|};

const HookChangeSummary: React.AbstractComponent<Props> = memo(
  ({hooks, fiberID, state, displayMode = 'detailed'}: Props) => {
    const {parseHookNames, toggleParseHookNames, inspectedElement} = useContext(
      InspectedElementContext,
    );
    const store = useContext(StoreContext);

    const [parseHookNamesOptimistic, setParseHookNamesOptimistic] =
      useState<boolean>(parseHookNames);

    useEffect(() => {
      setParseHookNamesOptimistic(parseHookNames);
    }, [inspectedElement?.id, parseHookNames]);

    const handleOnChange = useCallback(() => {
      setParseHookNamesOptimistic(!parseHookNames);
      toggleParseHookNames();