solid: Effects of setState not working under certain conditions

I ran into some more weird update problems in my app. During debugging the problem has again morphed into something different, but hopefully it still represents my original issue. Example (codesandbox):

import { createState, createEffect } from "solid-js";
import { render, Switch, Match } from "solid-js/dom";

const Title = props => {
  /* prettier-ignore */
  return <div>Title length: {(props.title.length)}</div>;
};

const App = () => {
  const [state, setState] = createState({
    title: null,
    show: false
  });

  createEffect(() => {
    console.log("show state:", state.show);
  });

  /* prettier-ignore */
  return (
    <div>
      <Switch>
        <Match when={(state.show)}>
          <Title title={(state.title)}/>
        </Match>
        <Match when={(!state.show)}>
          <div>switched off</div>
        </Match>
      </Switch>
      <button onclick={() => {
        console.log("switch on");
        setState({title: "test", show: true});
      }}>Switch on</button>
      <button onclick={() => {
        console.log("switch off");
        setState({title: null, show: false});
      }}>Switch off</button>
    </div>
  );
};

render(App, document.getElementById("app"));

The two buttons are supposed to turn show on and off. However neither the <Match> elements update, nor does the createEffect code run when clicking “Switch off”.

What is surprising: Replacing the <Title> call by a simple <div> not only renders correctly, but also fixes the createEffect behavior. Apparently the fact that there is a <Match> with a function call interferes with the effect system.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 15 (15 by maintainers)

Most upvoted comments

I’ve confirmed Adam’s proposed subclock solution works and does not have this unexpected behaviour. I’m going to try some things and see if I can update the implementation with it.