Discussion on: Using Zustand with React JS! 🚀

[Stian Håve]

isnt this a better way to get the properties from the store?

const {amount, updateAmount} = useBookStore()

instead of

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

[Masoud Mohajeri]

no
if any other changes occur in store other than amount and updateAmount , you will have unnecessary rerender .

[Stian Håve]

Oh wow, had no clue. Thanks for pointing that out!
I guess it would still work with smaller and specific stores though, but i'll keep it in mind.

[Joshua Nwosu]

This isn't true.

[Stian Håve]

Can you elaborate?

[Clément Creusat]

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,
}});