SolidJS does not support reactivity for arrays of objects

Question

SolidJS does not support reactivity for arrays of objects

I've been scratching my head trying to figure out why this code isn't working as expected. I'm simply updating an object and expecting it to be refreshed in the DOM, but for some reason, that's not happening. The console log confirms that the object was updated, so why isn't it reflecting in my DOM?

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

function ToDo() {
    const getToDos = () => {
        return [{
            id: 1, name: 'one'
        }, {
            id: 2, name: 'two'
        }]
    }

    const onTodoClick = (id: number) => {
        const td = [...todos()];
        const elem = td.find(t => t.id === id);
        elem!.name = elem!.name + ' - Done';
        console.log(td);
        console.log(todos());
        setTodos(() => td);
    }

    const [todos, setTodos] = createSignal(getToDos());

    return (
        <div>
            <For each={todos()} >
                {(todo) => <p onClick={() => onTodoClick(todo.id)}>{todo.name}</p>}
            </For>
        </div>
    );
}

render(() => <ToDo />, document.getElementById("app")!);

typescript solid-js

Answer 1

Answer №1

In short, the reason why const td = [...todos()]; is used instead of directly modifying the array is because it creates a shallow copy that works well for certain cases but not when using <For>, which relies on the internal structure of the array. Therefore, it's necessary to create a copy of the object being modified instead of changing the .name attribute directly.

A way to solve this issue is by following a similar approach to what you have already implemented:

const onTodoClick = (id: number) => {
    const td = [...todos()];
    const elemIndex = td.findIndex(t => t.id === id);
    td[elemIndex] = { ...td[elemIndex], name: td[elemIndex].name + ' - Done' }
    console.log(td);
    console.log(todos());
    setTodos(() => td);
}

The usage of createSignal in

const [todos, setTodos] = createSignal(getToDos(), { equals: false });

indicates that changes to todos will be tracked each time setTodos is called (docs).

Upon inspecting the source code of <For>, it becomes evident that it internally uses createMemo(), which depends on referential equality.

An alternative modern method involves utilizing Array.prototype.with.

const onTodoClick = (id: number) => {
    const elemIndex = todos().findIndex(t => t.id === id);
    const td = todos().with(elemIndex, {
      ...todos()[elemIndex],
      name: todos()[elemIndex].name + ' - Done'
    })
    console.log(td);
    console.log(todos());
    setTodos(() => td);
}

Answer 2

In short, the reason why const td = [...todos()]; is used instead of directly modifying the array is because it creates a shallow copy that works well for certain cases but not when using <For>, which relies on the internal structure of the array. Therefore, it's necessary to create a copy of the object being modified instead of changing the .name attribute directly.

A way to solve this issue is by following a similar approach to what you have already implemented:

const onTodoClick = (id: number) => {
    const td = [...todos()];
    const elemIndex = td.findIndex(t => t.id === id);
    td[elemIndex] = { ...td[elemIndex], name: td[elemIndex].name + ' - Done' }
    console.log(td);
    console.log(todos());
    setTodos(() => td);
}

The usage of createSignal in

const [todos, setTodos] = createSignal(getToDos(), { equals: false });

indicates that changes to todos will be tracked each time setTodos is called (docs).

Upon inspecting the source code of <For>, it becomes evident that it internally uses createMemo(), which depends on referential equality.

An alternative modern method involves utilizing Array.prototype.with.

const onTodoClick = (id: number) => {
    const elemIndex = todos().findIndex(t => t.id === id);
    const td = todos().with(elemIndex, {
      ...todos()[elemIndex],
      name: todos()[elemIndex].name + ' - Done'
    })
    console.log(td);
    console.log(todos());
    setTodos(() => td);
}

Answer 3

Answer №2

The problem lies in the method you are using to update the element. Instead of directly manipulating the element like this:

const elem = td.find(t => t.id === id);
elem!.name = elem!.name + ' - Done';

You should be updating the array immutably. Consider doing something like this instead:

const td = todos().map(todo=>todo.id===id ? {...todo, name:todo.name+'done'} : todo)

A more concise way of achieving this is by updating the array directly in the callback function:

 setTodos(todos=>todos.map(todo=>todo.id===id ? {...todo, name:todo.name+'done'} : todo));

If you are working with TypeScript, consider using readonly types for objects and arrays to prevent unintended mutations.

I hope this explanation helps clarify things for you.

Answer 4

The problem lies in the method you are using to update the element. Instead of directly manipulating the element like this:

const elem = td.find(t => t.id === id);
elem!.name = elem!.name + ' - Done';

You should be updating the array immutably. Consider doing something like this instead:

const td = todos().map(todo=>todo.id===id ? {...todo, name:todo.name+'done'} : todo)

A more concise way of achieving this is by updating the array directly in the callback function:

 setTodos(todos=>todos.map(todo=>todo.id===id ? {...todo, name:todo.name+'done'} : todo));

If you are working with TypeScript, consider using readonly types for objects and arrays to prevent unintended mutations.

I hope this explanation helps clarify things for you.

Answer 5

Answer №3

When Signals checks for a new value using the `===` operator, it will only call the effects if the value is actually set. It's important to note that objects are compared by reference, so if you mutate an object, Solid's runtime won't recognize the change as an update.

This condition is met in the following code snippet:

const td = [...todos()];

The `For` component also relies on this feature, as it takes each value and creates an array of signals to update individual DOM elements associated with each item. It uses object references as keys to cache DOM nodes, returning previously created elements or creating new ones when needed.

To better understand this concept, you can refer to:

Since mutating an array item causes `For` to return the cached DOM element, the UI remains unaffected:

const elem = td.find(t => t.id === id);
elem!.name = elem!.name + ' - Done';

To resolve this issue, it's recommended to create a new todo object instead:

const onTodoClick = (id: number) => {
  setTodos(prev => prev.map(item => {
    if (item.id !== id) return item;
    return { ...item, done: true };
  }));
}

In the above code snippet, I used the callback form of the setter function for clarity. The `done` property is added to mark an item as complete, allowing for easy customization when rendering items with different styles or HTML tags based on their completion status.

Answer 6

When Signals checks for a new value using the `===` operator, it will only call the effects if the value is actually set. It's important to note that objects are compared by reference, so if you mutate an object, Solid's runtime won't recognize the change as an update.

This condition is met in the following code snippet:

const td = [...todos()];

The `For` component also relies on this feature, as it takes each value and creates an array of signals to update individual DOM elements associated with each item. It uses object references as keys to cache DOM nodes, returning previously created elements or creating new ones when needed.

To better understand this concept, you can refer to:

Since mutating an array item causes `For` to return the cached DOM element, the UI remains unaffected:

const elem = td.find(t => t.id === id);
elem!.name = elem!.name + ' - Done';

To resolve this issue, it's recommended to create a new todo object instead:

const onTodoClick = (id: number) => {
  setTodos(prev => prev.map(item => {
    if (item.id !== id) return item;
    return { ...item, done: true };
  }));
}

In the above code snippet, I used the callback form of the setter function for clarity. The `done` property is added to mark an item as complete, allowing for easy customization when rendering items with different styles or HTML tags based on their completion status.

SolidJS does not support reactivity for arrays of objects

Answer №1

Answer №2

Answer №3

Similar questions

Using Typescript to import Eslint with the `import/named` method

Having difficulty converting string columns/data to numerical values when exporting an Ag-Grid table to Excel with getDataAsExcel function

Exploring the methods for monitoring multiple UDP ports on a single address in Node.js within a single process

Tips for picking out a particular item from a list of child elements

Merge the values of checkboxes into a single variable

The static method in TypeScript is unable to locate the name "interface"

Utilizing AWS Websockets with lambda triggers to bypass incoming messages and instead resend the most recent message received

Enhancing IntelliSense to recognize exports specified in package.json

Typescript: Potential null object error when defining a method

The disappearing act of embedded Twitter timelines in Ionic 2

Spotlight a newly generated element produced by the*ngFor directive within Angular 2

Determine the type of embedded function by analyzing the callback

The error message "The file 'environment.ts' is not located within the specified 'rootDir' directory" was encountered during the Angular Library build process

Ways to expand the DOM Node type to include additional attributes

Access values of keys in an array of objects using TypeScript during array initialization

Tips for accessing the StaticRouterContext in Typescript with react-router-dom

Utilizing a navigation menu to display various Strapi Collection pages within a single Angular Component

Organize by a collection of strings or a collection of enums

Arranging information by utilizing arrays

Custom typings for Next-Auth profile