UI did not update with <For>

[wcly]

I change the code in https://www.solidjs.com/tutorial/flow_for?solved，it‘ didn't work, the UI not update, why is that?

import { render } from 'solid-js/web';
import { createSignal, For } from 'solid-js';

function App() {
  const [cats, setCats] = createSignal([
		{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
		{ id: 'z_AbfPXTKms', name: 'Maru' },
		{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
	]);
  
  return (
    <ul>
      <For each={cats()}>{(cat, i) =>
        <li>
          <a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
			      {i() + 1}: {cat.name}
		      </a>
        </li>
      }</For>
      <button onclick={()=>{
       // try to update UI used setCats
        setCats((prev)=>{
          return prev.map(i=>{
            i.name = i.name.repeat(2);
            console.log(i);
            return i;
          })
        })
      }}>update</button>
    </ul>
  );
}

render(() => <App />, document.getElementById('app'))

[lxsmnsyc]

Although the array isn't the same, the items are still referentially the same. Since <For> memoizes UI by item, and the item isn't reactively mutated, the UI inside <For> wouldn't update. This is where createStore becomes handy.

[wcly]

I see, thanks!

[parker-crabnebula]

I was experiencing this same thing. I had created a derived value from some others and found that the <For> instance wasn't updating, though the value (an array of objects) was changing.

I fixed this by creating new object instances instead of returning the same objects. Here's some psuedocode to help demonstrate:

const derived = () => someArray().map((item) => {
    if (item.property1 === 'test') {
        item.property2 = 123;
    }
    item.property3 = someExternalSignal();
    return item; // <-- this is the problem
});

In my case I solved it simply by spreading the object into a new one as a simple shallow clone. For other use cases it may be better to use a deep clone.

const derived = () => someArray().map((item) => {
    if (item.property1 === 'test') {
        item.property2 = 123;
    }
    item.property3 = someExternalSignal();
    return { ...item };
});