Why is children() a function in ClientOnly?

[ilyapopovs]

Hi 👋

Probably a silly question, but why in ClientOnly is children a function and fallback is not?
I'd assume it's for deferring the execution, but I have a hard time figuring out the specifics.
Couldn't find relevant discussions here, nor links on google.

If there's a link to React/Remix docs of the behavior that causes this decision, just that link would be great - I'll figure it out from there 👍

Thank you! 🙏

[sergiodxa]

When you write this

<ClientOnly>
  <Component />
</ClientOnly>

This is converted to functions like this

React.createElement(ClientOnly, {}, React.createElement(Component, {}))

Even if not rendered, this React.createElement(Component, {}) will be called on SSR and it will log a warning in the terminal saying that undefined is not a valid React component, by wrapping it in a function we're basically doing this:

React.createElement(ClientOnly, {
  children: () => React.createElement(Component, {})
})

And with this, React.createElement(Component, {}) will not run until children is executed, which will only happen client-side where Component is defined.

[ilyapopovs]

Now it clicks! 😄
Thank you very much! 🙏