Selectors not firing after store update

[reintroducing]

I've got a method in my store called removeProduct:

removeProduct: descriptiveId => {
      set({
        products: get().products.filter(
          product => product.descriptiveId !== descriptiveId,
        ),
      });
    },

I also have a selectors.ts file that has some helper methods for retrieving things out of the store. Here is an example of one:

export function getProductsByGroup(
  group: ProductItemGroup,
  onlyAvailableInStore = false,
) {
  const products = useProductsStore.getState().products;

  ...bunch of code here
}

When I execute removeProduct() in a component, I'm expecting that any other component using getProductsByGroup() would see the product update in the store and re-render accordingly. This is not happening and the getProductsByGroup() selector is not running when I remove an item. In that same component, if I add a call to the products store (without actually using the value for anything, just placing it in there), the component does re-render and getProductsByGroup() gets called:

const p = useProductsStore(state => state.products); <--- without this in here, this component does not re-render
const products = getProductsByGroup('bag');

Am I misunderstanding how to use "selectors" in zustand? What am I doing wrong here and how do I fix this?

Thank you.

[mooalot]

I believe it's because you are lacking hook functionality here. You should be using zustand like this:

export function getProductsByGroup(
  group: ProductItemGroup,
  onlyAvailableInStore = false
) {
  return useProductsStore((state) => {
    const products = state.products;

    // ...bunch of code here
  });
}

Also side note, when you are getting data from state like this (and expecting a rerender), it's called a hook and usually people prefix hooks with use. So getProductsByGroup would look better as useProductsByGroup.

[reintroducing]

Thank you, this worked, coupled with useShallow to avoid the The result of getSnapshot should be cached to avoid an infinite loop error that I got as a result.

[dbritto-dev]

@reintroducing .getState() is not reactive you should use the hook