No reactivity with createStore when directly using fields inside a class

[vkryukov]

Hello,

I'm puzzled why in the following example, we have reactivity with State2 but not State1: when you press a button, State1 line doesn't change, but State2 line does.

In other words, when we setState1 with a field inside a class, it doesn't trigger reactivity, but when we setState2 with a method call on this class, which returns a newly constructed object, it does?

import { render } from "solid-js/web";
import { createSignal } from "solid-js";
import { createStore } from "solid-js/store"

interface Pair {
  x: number
  y: number
}

class Point {
  p: Pair
  
  constructor() {
    this.p = {
      x: 1,
      y: 2
    }
  }
  
  change() {
    this.p.x++
    this.p.y--
  }

  pair(): Pair {
    return {x: this.p.x, y: this.p.y}
  }
}

function Counter() {
  const p = new Point()
  const [count, setCount] = createSignal(0);
  const [state1, setState1] = createStore(p.p)
  const [state2, setState2] = createStore(p.pair())
  const increment = () => {
    setCount(count() + 1);
    p.change()
    setState1(p.p)
    setState2(p.pair())
  }

  return (
    <>
    <button type="button" onClick={increment}>
      {count()}
    </button>
    <div>State1: x: {state1.x} y: {state1.y}</div>
    <div>State2: x: {state2.x} y: {state2.y}</div>
    </>
  );
}

render(() => <Counter />, document.getElementById("app"));

[ryansolid]

You are assigning the same reference. It thinks it hasn't changed. We do equality checks on state changes which means they don't directly support mutation.

[vkryukov]

Right - that makes sense. Thank you for clarifying it.