S
SolidJS2mo ago
gsoutz

Why is this store change doesn't trigger a reactive computation

It looks like this:
// Reactive state store that can update UI
const [state, setState] = createStore<StoreState>({
current: { state: 'boot' },
});
const setCurrent = (state: SomeState) => setState('current', state);

createEffect(on(() => state.current, state => {
console.log('yes', state)
}))
// Reactive state store that can update UI
const [state, setState] = createStore<StoreState>({
current: { state: 'boot' },
});
const setCurrent = (state: SomeState) => setState('current', state);

createEffect(on(() => state.current, state => {
console.log('yes', state)
}))
Why this setCurrent, doesn't log anything except the first one? https://playground.solidjs.com/anonymous/7671caaa-1e05-40b2-bc52-a79140047484
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
9 Replies
bigmistqke
bigmistqke2mo ago
because store's update fine-grained, on does not track deeply, so it will only update when the reference to current is updated
gsoutz
gsoutzOP2mo ago
I don't understand, this set state call
set({ state: 'select-next' });
set({ state: 'select-next' });
changes the state.current reference to a new object.
bigmistqke
bigmistqke2mo ago
no, it doesn't, it shallow-merges it.
gsoutz
gsoutzOP2mo ago
oh because of optimizations, i see
bigmistqke
bigmistqke2mo ago
ye, by default it shallow merges stuff i think set(() => ({ state: 'select-next' })); might work to change the reference?
gsoutz
gsoutzOP2mo ago
ok thank you i will restructure based on that new insight.
bigmistqke
bigmistqke2mo ago
you are welcome!
bigmistqke
bigmistqke2mo ago
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template

Did you find this page helpful?