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)
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.