stereokai Posts - Answer Overflow

stereokai

•Created by stereokai on 2/19/2025 in #support

Exclude store property from `unwrap` or from being watched

When updating a SolidJS store, the entire next state of the store gets unwrapped (for example by updateArray()). Let's say the store is an array of objects, and each object has a data property which is a really big array. Unwrapping each of these arrays adds up to a very noticeable slow down every time the store is updated. Is there a way to exclude this property from being unwrapped, or from being "watched" by SolidJS? Thanks.

23 replies

SSolidJS

•Created by stereokai on 9/18/2024 in #support

Template doesn't react to property change in store of array of objects

Using either of the 2 methods, when I log the users store, I see that the name of the user has changed in the store object. However, the template doesn't update/react to the new name. Why is that?

// user: { name: string }

const [users, setUsers] = createStore([{ name: "some user" }]);
const [userName, setUserName] = createSignal("");

currUser = users[0];
setUserName("newName")

// Store update, method 1:
setUsers((user) => user === currUser, "name", userName());
// Store update, method 2:
setUsers(
  produce((users) => {
    const user = users.find((user) => user === currUser);
    if (user) {
      user.name = userName();
    }
  }),
);

// JSX:
      <For each={users}>
        {(user, index) => {
          return (
            <div>
                {`${user.name}`}
            </div>
          );
        }}
      </For>

// user: { name: string }

const [users, setUsers] = createStore([{ name: "some user" }]);
const [userName, setUserName] = createSignal("");

currUser = users[0];
setUserName("newName")

// Store update, method 1:
setUsers((user) => user === currUser, "name", userName());
// Store update, method 2:
setUsers(
  produce((users) => {
    const user = users.find((user) => user === currUser);
    if (user) {
      user.name = userName();
    }
  }),
);

// JSX:
      <For each={users}>
        {(user, index) => {
          return (
            <div>
                {`${user.name}`}
            </div>
          );
        }}
      </For>

36 replies

Gaming

Programming