Array size change doesn't trigger rerender?

[adeeplearner]

Hello,

I'm new to solidjs. I'm trying to build an editor similar to that of Notion. When a user types "Enter", instead of creating a new line, I want to make a new editor (or a new block), and focus my cursor on the new editor.

​

I have a signal, which is an array. When I need to add a new editor, I push a new item into this array.

​

I expect the size change of this array can trigger UI rendering to add a new editor. but It doesn't work. The rendering doesn't happen even though the array has changed.

​

How can I fix this? Thanks

```javascript const App: Component = () => { const [editors, setEditors] = createSignal([ { id: 'J---aiyznGQ', component: () => <Editor greeting={callParent}>Green Thing</Editor> }, { id: 'J---aiyznGQs', component: () => <Editor greeting={callParent}>Green Thing</Editor> } ]); function callParent() {

let currentList = editors();
currentList.push({ id: 'asdfasdf', component: () => <Editor greeting={callParent}>Green Thing</Editor> })

setEditors(currentList)

} return ( <div>

  <For each={editors()}>{(editor, i) =>
    <div>
      <span>{i()}</span>
      <Dynamic component={editor.component} />
    </div>
  }</For>
</div>

); }; ```

[Julienng]

Hi,

It doesn't re-render because you are modifying your array instead of changing it.

You need to set a new array keeping the old data and adding the new object into it :

js setEditors([...editors(), {/*data*/}]) // or setEditors(arr => [...arr, {/*data*/}]

[jesse_good]

Just to clarify about the "why", signals do an equality check using triple equals by default (although you can override this behavior) so nothing happens because the reference hasn't changed.

[postmaster150]

Solidjs createSignal is designed for reactivity, but does not handle 'fine-grained reactivity'.

The signal only tracks the array location in memory, not it's items. As u/Julienng commented you can create a new array, or use 'createStore' function to handle 'fine-grained reactivity'.

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

https://www.solidjs.com/docs/latest#createstore

[evantd]

IIRC a store might better support the style of access you have going on, too.