Discussion on: Using Zustand with React JS! 🚀

View post

Replies for: isnt this a better way to get the properties from the store? const {amount, updateAmount} = useBookStore() Enter fullscreen mode ...

Best ways to avoid unnecessary rerenders with zustand are :

Direct selectors:

const amount = useBookStore(state => state.amount)
const updateAmount = useBookStore(state => state.updateAmount)

Object destructuring with shallow:

import { shallow } from "zustand/shallow";

const { amount } = useBookStore((state) => ({
    amount: state.amount,
  }), shallow);

Since v4.x.x, you can also use the useShallow hook:

import { useShallow } from 'zustand/react/shallow'

const { amount } = useBookStore(
    useShallow((state) => ({ amount: state.amount })),
);

Other ways are wrong (unless re-renders / performance is not a problem) :

const state = useBookStore();

const { amount } = useBookStore();

const { amount } = useBookStore((state) => ({
    amount: state.amount,
}});