react: components rendered inside useCallback are not detected

[async3619]

Summary

When a component is rendered inside a useCallback body (commonly used with .map(renderFn) pattern), the rendered components are not detected in the react usage tree. Only the useCallback() hook itself appears.

Reproduction

Given a component like:

function MyComponent() {
  const renderItem = useCallback((item) => {
    switch (item.type) {
      case 'popup': return <PopupMenu {...item} />
      case 'section': return <SectionMenu {...item} />
      case 'link': return <Link href={item.url}>{item.text}</Link>
    }
  }, [])

  return <div>{items.map(renderItem)}</div>
}

Expected output:

<MyComponent /> [component]
├─ <PopupMenu /> [component]
├─ <SectionMenu /> [component]
├─ <Link /> [component]
└─ useCallback() [hook]

Actual output:

<MyComponent /> [component]
└─ useCallback() [hook]

The same pattern also occurs with nested callbacks:

const renderSlideMenuItem = useCallback((menu) => {
  return <LinkSlideMenuItem ... />
  return <SectionSlideMenuItem ... />
  return <HomeSlideMenuItem ... />
}, [])

const renderSection = useCallback((section) => {
  return <MenuList>{renderSlideMenuItem(...)}</MenuList>
}, [renderSlideMenuItem])

None of the components inside these callbacks are detected.

Impact

This is a common React pattern — extracting render logic into useCallback for performance or readability, then calling it via .map(). Missing these components means a significant portion of the component tree can be invisible in the output.