Why does "Separator" need "use client"?

[avloss]

I'm trying to wrap my head around how to develop for Next.js 13+, and it's my understanding that "use client" should be avoided when possible, only reserving it for user interactions. I understand that still it might be used for animations, etc. But "Separator" element surely doesn't fit in a category where one would expect that JS would be needed to render it.

I'm still learning about this new paradigm, and perhaps an answer would be helpful to other too. Initial thought would be that it's just "bloated", but then there's probably a good reason for why it needs to run JS on a client to render a separator.

[avloss]

ui/apps/www/registry/default/ui/separator.tsx

Line 1 in a465432

"use client"

I've tried referencing this line while creating this question, but then it seemed not to have worked.

[Alexjoshua14]

Hey @avloss, the reason that 'use client' is needed for the Separator component is because it depends on Radix-ui's Separator component which relies on their Primitive component which uses use effect.

Essentially when the Separator component (or more specifically the Primitive component) is initially mounted, window['radix-ui'] is set to true.

In general, it's my understanding that components should be client components whenever user interactivity is needed or information about the client environment (such as using window) is needed.

Here's some snippets of the code pieces with permalinks embedded that are weaved together.