Not sure why new state isn't reflected in html when using setState and Template Literals?

[rencire]

Hi, I've just started exploring using Solid.

I read the README, and created a new project:

npm init solid app my-app

Then I changed App.js to each of the following examples:

import { createState, createSignal } from "solid-js";
import html from "solid-js/html";  

function App() {
  // Ex. 1
  // const [count, setCount] = createSignal(0);
  // const handler = () => {
  //   console.log(count());
  //   setCount(count()+1);
  // };
  // return (
  //   <div>
  //     <p>{count}</p>
  //     <button onclick={handler}>click me</button>
  //   </div>
  // );

  // Ex. 2
  // const [count, setCount] = createSignal(0);
  // const handler = () => {
  //   console.log(count());
  //   setCount(count()+1);
  // };
  // return html`
  //   <div>
  //     <p>${count}</p>
  //     <button onclick=${handler}>click me</button>
  //   </div>
  // `;
	
  // Ex. 3
  // const [state, setState] = createState({count: 0});
  // const handler = () => {
  //   console.log(state.count);
  //   setState({count: state.count+1});
  // };
  // return (
  //   <div>
  //     <p>{state.count}</p>
  //     <button onclick={handler}>click me</button>
  //   </div>
  // );
	
  // Ex. 4
  // const [state, setState] = createState({count: 0});
  // const handler = () => {
  //   console.log(state.count);
  //   setState({count: state.count+1});
  // };
  // return html`
  //   <div>
  //     <p>${state.count}</p>
  //     <button onclick=${handler}>click me</button>
  //   </div>
  // `;
}

export default App;

Coming from a React background, I assume all the examples would re-render the html/jsx with the updated state. However, when I tried Ex. 4, it looks like the "count" is not being updated in the html from the Template Literal.

When I look at the console log, it does look like the state is being updated for all the examples.

Since I'm new to Solid (and to all this lit dom expression stuff) , I think there's something fundamental I don't understand with how the value is rendered in the Template Literal. Can anyone help point me in the right direction? Thanks.

[ryansolid]

Yeah this is why I strongly recommend JSX. State proxies track on property access.. ie state.count.. it basically internally calls a function. In the signal examples you are passing that function in and the view code executes it, but in the state code it is being executed first, which doesn't track. The solution, wrap it with a function.

 // Ex. 4
  // const [state, setState] = createState({count: 0});
  // const handler = () => {
  //   console.log(state.count);
  //   setState({count: state.count+1});
  // };
  // return html`
  //   <div>
  //     <p>${() => state.count}</p>
  //     <button onclick=${handler}>click me</button>
  //   </div>
  // `;

You can also see this example: https://codesandbox.io/s/jpm68z1q33

JSX compiler does that and more. The recommendation in the JSX version is to actually always execute the signals because the compiler uses that as a heuristic for wrapping expressions. This lets us universalize props easier and while inserts work passing the functions in attributes do not.

 // Ex. 1
  // const [count, setCount] = createSignal(0);
  // const handler = () => {
  //   console.log(count());
  //   setCount(count()+1);
  // };
  // return (
  //   <div>
  //     <p>{count()}</p>
  //     <button onclick={handler}>click me</button>
  //   </div>
  // );

I would have liked more consistency with the Tagged Template Literal version but for the same reason Solid can't use the standard Babel/React JSX transform Tagged Template Literals need special consideration. On the positive because it uses the same approach this is the most performant Tagged Template Literal library only milliseconds behind the JSX version in performance.

[rencire]

thanks for the info, helped clarified things for me. excited to keep experimenting with Solid, and see where the project will go!