Double mounting for children element.

[d8corp]

Describe the bug

Check the next code:

import { render } from "solid-js/web";
import { onMount } from "solid-js";

function Button(props: any) {
  return (
    <button class={props.children ? "withChildren" : undefined}>
      {props.children}
    </button>
  );
}

function Test() {
  onMount(() => {
    console.log("???");
  });

  return <span>Test</span>;
}

render(
  () => (
    <Button>
      <Test />
    </Button>
  ),
  document.getElementById("app")!,
);

Expected result: console.log("???") runs once Actual result: console.log("???") runs twice

Your Example Website or App

https://playground.solidjs.com/

Steps to Reproduce the Bug or Issue

1. Copy the code in description
2. Pass the code in playground
3. Check console output

Expected behavior

Expected result: console.log("???") runs once

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[d8corp]

Fixed by children function from solid-js

import { render } from "solid-js/web";
import { onMount, children } from "solid-js";

function Button(props: any) {
  const memo_children = children(() => props.children);

  return (
    <button class={memo_children() ? "withChildren" : undefined}>
      {memo_children()}
    </button>
  );
}

function Test() {
  onMount(() => {
    console.log("???");
  });

  return <span>Test</span>;
}

render(
  () => (
    <Button>
      <Test />
    </Button>
  ),
  document.getElementById("app")!,
);

[ryansolid]

Yeah this is by design. Children are executed lazily and created on access. So if you need to access children multiple times use the helper.