Double rendering

[MariuzM]

Getting double rendering

import Button from '@suid/material/Button';
import { createSignal } from 'solid-js';

export const Counter = () => {
  const [count, setCount] = createSignal(0);

  return (
    <Button variant="contained" onClick={() => setCount(count() + 1)}>
      Clicks1111: {count()}
    </Button>
  );
};

[juanrgm]

I recreated the problem without suid, so it looks like a SolidJS issue.

import { type JSXElement, Show, createSignal, onMount } from "solid-js";

type ButtonProps = {
  children: JSXElement;
  onClick?: () => void;
};

function ButtonBaseRoot(props: ButtonProps) {
  return <button onClick={props.onClick}>{props.children}</button>;
}

function ButtonBase(props: ButtonProps) {
  const [mountedState, setMountedState] = createSignal(false);
  onMount(() => setMountedState(true));
  return (
    <ButtonBaseRoot onClick={props.onClick}>
      {props.children}
      <Show when={mountedState()}>
        <span />
      </Show>
    </ButtonBaseRoot>
  );
}

function Button(props: ButtonProps) {
  return (
    <ButtonBase onClick={props.onClick}>
      <Show when={false}>{}</Show>
      {props.children}
    </ButtonBase>
  );
}

export function App() {
  const [count, setCount] = createSignal(0);
  return (
    <Button onClick={() => setCount(count() + 1)}>Clicks: {count()}</Button>
  );
}

[juanrgm]

Fixed at last SolidJS version:

https://playground.solidjs.com/anonymous/84f1398b-7b99-4d3a-befc-6f95abb6603d