What's the recommended way to count number of children passed to a component?

[TomerAberbach]

The Child/Children type look like this:

export type Child =
  | string
  | boolean
  | number
  | undefined
  | null
  | (() => Child | Children)
  | Child[]
  | Ref
  | Refkey;

export type Children = Child | Child[];

If I take children: Children as input for a component, then is there a way to make logic conditional on the number of children?

1. Naively counting the number of children directly is incorrect because ideally you filter empty string, null, and undefined children? (among others maybe?)

2. Let's say you filter those out from 1, then what about the () => Child | Children? (btw isn't Child | Children redundant? Why not () => Children?). Do you have to use reactivity somehow to react to the change in the number of children depending on the result of the thunk?

Or is counting the number of children a "bad" thing to do entirely?

[TomerAberbach]

My use-case is a somewhat standard one (I think) of deciding whether to place something on one or multiple lines depending on the number of children

[TomerAberbach]

By the way, I could misinterpreting the types, but aren't the Child and Children types identical? Like, they seem to represent the same set of values actually...?

So maybe type Children isn't needed at all... 😅