TTC
Theo's Typesafe Cult•5mo ago
Yashu Mittal

Why radix-UI headless component render internal components if they're not mounted

After running the react profile for one of my page, I noticed this deep nested renders after using a RadixUI Dropdown component. As of now, I am only rendering the Button 👇 
/* ------- page/book.tsx ------- */
// ssr
// lazy import 'BookDropdownComponent' component

function Page() {
  return (
    <>
      // ....
      <BookDropdownComponent />
      // ...
    </>
  )
}

/* ------- component/BookDropdownComponent.tsx ------- */
'use client';
// lazy import 'BookDropdownContent' component

function BookDropdownComponent() {
  return (
    <DropdownMenu>
      <Trigger>
        Button
      </Trigger>

      <MenuContent>
        <BookDropdownContent />
      </MenuContent>
    </DropdownMenu>
  )
}
/* ------- page/book.tsx ------- */
// ssr
// lazy import 'BookDropdownComponent' component

function Page() {
  return (
    <>
      // ....
      <BookDropdownComponent />
      // ...
    </>
  )
}

/* ------- component/BookDropdownComponent.tsx ------- */
'use client';
// lazy import 'BookDropdownContent' component

function BookDropdownComponent() {
  return (
    <DropdownMenu>
      <Trigger>
        Button
      </Trigger>

      <MenuContent>
        <BookDropdownContent />
      </MenuContent>
    </DropdownMenu>
  )
}
and BookDropdownContent component itself has not been mounted or triggered yet, and still it has to render all of that stuff as you can see in the video. Now my question is: - Is this the intended behaviour from RadixUI component? - Could have neightbour components/element could be the reason?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?