How to use reselect with zustand

Sometime , you may want to use a selector to pick up some comlicated calculation from the zustand store, in react , we have reselect to help us . But we can use reselect in zustand too.

First , let create a zustand store

import { create } from "zustand";

// Type
type BearData = {
  name: string;
  attitude: string;
  fishNeed: number;
};

type CatData = { name: string; attitude: string; fishNeed: number };

interface BearStoreState {
  fishes: number;
  bearsList: BearData[];
  catList: CatData[];
  addRandomBear: () => void;
  addRandomCat: () => void;
  addFish: () => void;
}

// Create the store with fish , cat and bears
const useBearStore = create<BearStoreState>((set) => ({
  fishes: 0,
  bearsList: [
    {
      name: "bear1",
      attitude: "angry",
      fishNeed: 2,
    },
  ],
  catList: [
    {
      name: "cat1",
      attitude: "angry",
      fishNeed: 2,
    },
  ],
  addRandomBear: () =>
    set((state) => ({
      bearsList: [
        ...state.bearsList,
        {
          name: `bear${state.bearsList.length + 1}`,
          attitude: Math.round(Math.random() * 100) % 2 === 0 ? "angry" : "happy",
          fishNeed: Math.round(Math.random() * 10),
        },
      ],
    })),

  addRandomCat: () =>
    set((state) => ({
      catList: [
        ...state.catList,
        {
          name: `cat${state.catList.length + 1}`,
          attitude: Math.round(Math.random() * 100) % 2 === 0 ? "angry" : "happy",
          fishNeed: Math.round(Math.random() * 10),
        },
      ],
    })),
  addFish: () => set((state) => ({ fishes: state.fishes + 5 })),
}));

We will have a simple App to run this example

I will separate the component into 4 parts for you to observe the renders of the component when the store change
You can watch the render with react dev tool

const App = () => {
  return (
    <div>
      <FishInfo />
      <BearInfo />
      <CatInfo />
      <AngryAnimalsInfo />
    </div>
  );
};

FishInfo

const FishInfo = () => {
  const addFish = useBearStore((state) => state.addFish);
  const fishes = useBearStore((state) => state.fishes);

  return (
    <div>
      <div>Total fished : {fishes}</div>
      <button onClick={addFish}>Add fish</button>
    </div>
  );
};

BearInfo

const BearInfo = () => {
  const addRandomBear = useBearStore((state) => state.addRandomBear);

  const angryBear = useBearStore(angryBearsSelect);

  return (
    <div>
      <button onClick={addRandomBear}>Add Bear</button>
      <h1>Angry bear</h1>
      {angryBear.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

CatInfo

const CatInfo = () => {
  const addRandomCat = useBearStore((state) => state.addRandomCat);
  const angryCat = useBearStore(angryCatReselect);

  return (
    <div>
      <button onClick={addRandomCat}>Add Cat</button>

      <h1>Angry cat</h1>
      {angryCat.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

AngryAnimalsInfo

const AngryAnimalsInfo = () => {
  const angryAnimals = useBearStore(angryAnimalsReselect);

  return (
    <div>
      <h1>Angry animals</h1>
      {angryAnimals.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

Finally . The selector .

I put the console.log here for you to observe how much time the selector run when the store change

const angryCatReselect = createSelector(
  (state: BearStoreState) => state.catList,
  (catList) => {
    console.log("angryCatReselect");
    return catList.filter((cat) => cat.attitude === "angry");
  }
);

const angryAnimalsReselect = createSelector(
  (state: BearStoreState) => state.bearsList,
  (state: BearStoreState) => state.catList,
  (bearsList, catList) => {
    console.log("angryAnimalsReselect");
    return [...bearsList, ...catList].filter((animal) => animal.attitude === "angry");
  }
);

const angryBearsSelect = (state: BearStoreState) => {
  console.log("angryBearsSelect");
  return state.bearsList.filter((bear) => bear.attitude === "angry");
};

Without reselect . The selector will run every time the store change . But with reselect . The selector will run only when the state that it depend on change

As you can see here , with angryBearsSelect , it will re-render everytime when you addFish, addRandomBear , addRandomCat . But with angryCatReselect , it will only re-render when you addRandomCat.

I put angryAnimalsReselect here as a example for multiple state selector . It will re-render when you addRandomBear , addRandomCat , not addFish

Put it all together

import { createSelector } from "reselect";
import { create } from "zustand";

type BearData = {
  name: string;
  attitude: string;
  fishNeed: number;
};
type CatData = { name: string; attitude: string; fishNeed: number };
interface BearStoreState {
  fishes: number;
  bearsList: BearData[];
  catList: CatData[];
  addRandomBear: () => void;
  addRandomCat: () => void;
  addFish: () => void;
}
const useBearStore = create<BearStoreState>((set) => ({
  fishes: 0,
  bearsList: [
    {
      name: "bear1",
      attitude: "angry",
      fishNeed: 2,
    },
  ],
  catList: [
    {
      name: "cat1",
      attitude: "angry",
      fishNeed: 2,
    },
  ],
  addRandomBear: () =>
    set((state) => ({
      bearsList: [
        ...state.bearsList,
        {
          name: `bear${state.bearsList.length + 1}`,
          attitude: Math.round(Math.random() * 100) % 2 === 0 ? "angry" : "happy",
          fishNeed: Math.round(Math.random() * 10),
        },
      ],
    })),

  addRandomCat: () =>
    set((state) => ({
      catList: [
        ...state.catList,
        {
          name: `cat${state.catList.length + 1}`,
          attitude: Math.round(Math.random() * 100) % 2 === 0 ? "angry" : "happy",
          fishNeed: Math.round(Math.random() * 10),
        },
      ],
    })),
  addFish: () => set((state) => ({ fishes: state.fishes + 5 })),
}));

const angryCatReselect = createSelector(
  (state: BearStoreState) => state.catList,
  (catList) => {
    console.log("angryCatReselect");
    return catList.filter((cat) => cat.attitude === "angry");
  }
);

const angryAnimalsReselect = createSelector(
  (state: BearStoreState) => state.bearsList,
  (state: BearStoreState) => state.catList,
  (bearsList, catList) => {
    console.log("angryAnimalsReselect");
    return [...bearsList, ...catList].filter((animal) => animal.attitude === "angry");
  }
);

const angryBearsSelect = (state: BearStoreState) => {
  console.log("angryBearsSelect");
  return state.bearsList.filter((bear) => bear.attitude === "angry");
};

const App = () => {
  return (
    <div>
      <FishInfo />
      <BearInfo />
      <CatInfo />
      <AngryAnimalsInfo />
    </div>
  );
};

const FishInfo = () => {
  const addFish = useBearStore((state) => state.addFish);
  const fishes = useBearStore((state) => state.fishes);

  return (
    <div>
      <div>Total fished : {fishes}</div>
      <button onClick={addFish}>Add fish</button>
    </div>
  );
};

const BearInfo = () => {
  const addRandomBear = useBearStore((state) => state.addRandomBear);

  const angryBear = useBearStore(angryBearsSelect);

  return (
    <div>
      <button onClick={addRandomBear}>Add Bear</button>
      <h1>Angry bear</h1>
      {angryBear.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

const CatInfo = () => {
  const addRandomCat = useBearStore((state) => state.addRandomCat);
  const angryCat = useBearStore(angryCatReselect);

  return (
    <div>
      <button onClick={addRandomCat}>Add Cat</button>

      <h1>Angry cat</h1>
      {angryCat.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

const AngryAnimalsInfo = () => {
  const angryAnimals = useBearStore(angryAnimalsReselect);

  return (
    <div>
      <h1>Angry animals</h1>
      {angryAnimals.map((item) => (
        <div key={item.name}>
          {item.name} - Need : {item.fishNeed}
        </div>
      ))}
    </div>
  );
};

export default App;

Some observation

• When add fish , only FishInfo should re-render . But here . BearInfo re-render too . That is because we use angryBearsSelect to display list of angry bear , angryBearsSelect will trigger everytime state is change .

We actually can eliminate the render of BearInfo by using compare function . But , as you check the log of angryBearsSelect , the calculation will still run . So , it is better to use reselect to eliminate the calculation too .

const angryBear = useBearStore(angryBearsSelect, compare);

const compare = (prev: any, next: any) => {
  if (prev.length !== next.length) return false;
  for (let i = 0; i < prev.length; i += 1) {
    if (!isEqual(prev[i].id, next[i].id)) return false; // isEqual is come from lodash
  }
  return true;
};

• CatInfo only be re-render when addRandomCat is called

• AngryAnimalsInfo only be re-render when addRandomBear or addRandomCat is called . Of course . And it wont be re-render when you addFish

So that how we use re-render for zustands .