It is possible to create derivations that can accept parameters

[batusai513]

I'm trying to optimise the render of a big list, when selecting one of the items i'm adding the selected id to my store and for each item I'm comparing the current selected id with each item id to add some class, the problem is that because on each item i have the selected id, when this changes, all items get rerendered, I was trying to create a fn to pass the id of the item and using a derive i was returning true or false, which should only rerender the two items that changed:

// state
class RootState implements IRootStateSchema<IEditPageSchema> {
  page = editPageStore;
  componentsStore = componentsStore;
  pageComponentIdToEdit: { id: string | null } = {
    id: null,
  };
}

export function isComponentSelected(id: string) {
  const selectedIdState = derive({
    selected: (get) => {
      return get(rootState.pageComponentIdToEdit).id === id;
    },
  });

  return selectedIdState;
}

the problem with above snippet is that when using it on a useSnapshot, i get react infinite re-renders.

how can this kind of optimisations can be achieved in valtio?

Thanks

[dai-shi]

https://github.com/pmndrs/valtio/blob/43ebe89a92b49e103e5c566ec745c6a686167ec6/docs/how-tos/how-to-avoid-rerenders-manually.mdx might help.

derive() should work too. You need useMemo to get stable proxies to avoid infinite loop.

[batusai513]

Thanks for your response, I ended up using useMemo:

export function useIsComponentSelected(id: string) {
  const selectedIdState = useMemo(
    () =>
      derive({
        selected: (get) => {
          return get(rootState.pageComponentIdToEdit).id === id;
        },
      }),
    [id],
  );

  return selectedIdState;
}

this avoids infinite re-renders