signals-react does not rerender arraySignal.value.map on value changed starting from v2

[pmunin]

Starting from V2 - the list using arraySignal.value.map does not rerender any more after updating the arraySignal.value.

const todos = signal([{ name: Date.now() }]);

const TodoList = () => {
  const addToDo = () => {
    todos.value = [...todos.value, { name: Date.now() }];
  };

  return (
    <div>
      <button
        onClick={() => {
          addToDo();
        }}
      >
      </button>
      {todos.value.map((td) => (
        <h1>{td.name}</h1>
      ))}
    </div>
  );
};

Open the example: https://stackblitz.com/edit/react-signal-for-state-management-sr6tqk. It locked on version 1.0.2 when you open it. Click on the button and see how items are being added.

Now update signals-react to v2:

Click on the button and see how items are not added anymore, even though the count value is being rerendered

[XantreDev]

Do you use the babel plugin?

[pmunin]

Do you use the babel plugin?

See the example - it's using just CRA, whatever plugins it comes with

[rschristian]

In that case, please read the docs. Usage has changed in v2: https://github.com/preactjs/signals/tree/main/packages/react#react-integration

[pmunin]

Can you please clarify - I don't see anything in the doc about using array as a signal value and mapping. Also is there any way to make it work with standard CRA (create-react-app) configuration, which does not allow configuring babel plugins unless you eject or use some rewiring packages?

[rschristian]

Can you please clarify - I don't see anything in the doc about using array as a signal value and mapping

The React integration doesn't work automatically like that anymore. Again, please read the getting started doc that I linked to. It covers all of this and presents the various options available to you.

Don't upgrade majors blindly.