dsmurl
Why does effect re-fire? How to use createStore values in effect correctly?
Check out this component. Why does the effect refire when I'm only changing person.name.first? It has something to do with the Proxy object, but how is that useful if any change to any store fires all the effects where any part of the store is referenced?
import type { Component } from "solid-js";
import { createEffect } from "solid-js";
import { createStore, produce } from "solid-js/store";
import type { Person } from "../types/Person";
type Props = {};
export const StoreTest: Component<Props> = () => {
const [person, setPerson] = createStore<Person>({
name: {
first: "Brandon",
last: "Sanderson",
},
age: 45,
});
const changePersonFirstName = (name: string) => {
setPerson(
produce((p: Person) => {
// Immer style store update
p.name.first = name;
})
);
};
createEffect(() => {
// Why does this fire the effect again?
console.log(person);
});
return (
<div>
<h2>Store Test:</h2>
<p>
Person is named {person.name.first} {person.name.last} and he is{" "}
{person.age}
</p>
<button class="btn" onClick={() => changePersonFirstName("Sam")}>
Person first name change
</button>
</div>
);
};
82 replies