children helper seems to break Context, need help.

[grenierdev]

The following playground should show two identical counters under MenuItem1 and MenuItem2. It's a heavily stripped version of something I'm trying to port from React.

MenuItem1 component uses the children helper to check if props.children produce anything to set the value of hasChildren. This seems to break the context chain as the useContext(LostContext) always return the default value provided when creating the context with createContext. Thus, the counter under MenuItem1 is always -1.

MenuItem2 is identical to MenuItem1 except that it does not use the children helper. It's counter is correctly incrementing each second.

MenuItem3 is identical to MenuItem1, but uses both the children helper to check if there are any children and render props.children instead of the cached value returned by the children helper. This seems to work as intended but leaves a MenuItem3 component in limbo (not displayed, onCleanup never called).

How can we check if a component has children while keeping the context chain and not evaluating the children multiple times?

[ryansolid]

Would this work for your scenario?

function MenuItem(props) {
  console.log('MenuItem1', props.label);
  const [lost, setLost] = createSignal(0);
  const hasChildren = "children" in props;

  const t = setInterval(() => setLost(d => d + 1), 1000);
  onCleanup(() => { console.log('cleanup1'); clearInterval(t); });

  return (
    <li>
      <span>{props.label} <Show when={hasChildren} fallback={<small title="alone">🙍</small>}><small title="has children">👩‍👦</small></Show></span>
      <LostContext.Provider value={lost}>
        {props.children}
      </LostContext.Provider>
    </li>
  );
}

You are correct using the children helper above the context provider executes all children outside of the context. I believe the in operator will not execute the getter.

[grenierdev]

It does the trick! Didn't think of the in operator!