Update relevant DOM element based on signal.

[ibtisamarif831]

Hello people.
I have a signal that stores different properties. It is a custom form and I cannot wrap my head around the rendering behavior. The signal looks something like this.

const [cart, setCart]=createSignal({ cartName:"", list:[{itemName:"", itemPrice:""}] })
I am using cartName on the parent component in an input element and changing its value on change

But I am also displaying it in the List component by passing the whole state.

<CartChart cart={cart().list} /> <deleteComponent />

In the chart component, i am plotting a simple chart with chartjs and whenever the value of list is changed, the chart is updated by using an effect

`createEffect(() => {
plot.data.datasets = props.list.map((dataItem, index) => ({
data: [
{ x: "Oct 25", y: itemPrice },

  ],
}));
plot.update();

});
`

The problem I am facing is that, whenever I change the cart name in the parent component, the effect runs and plot gets updated. I would want to avoid that but only update the plot when the list changes. How can i seem to solve it? Coming from react background, I seem to be a bit lost here.

[CalebOuellette]

The reason the effect runs on name change is that the entire cart is in one signal. So when any part of that object is updated anything listening to the signal is updated.

The simple way to solve this is to just use two signals instead of one.

const [name, setName]=createSignal('');
const [cartList, setCartList]=createSignal([{itemName:"", itemPrice:""}]);

Or if you want to keep everything in one object, take a look at the stores api.

https://www.solidjs.com/tutorial/stores_nested_reactivity