Need for shallow equality function

[gmahima]

Hello!
I tried extracting the state property into an object rather than the atomic pick without importing shallow. It still works the same way... could you please explain the problem with the default behaviour and why exactly we should pass in the alternate shallow equality function?
Here is what I tested it on:

import shallow from 'zustand/shallow'

const getState = state => ({test:state.test, setTest: state.setTest}) 
export default function Home() {
  const {test, setTest} = usePlayerStore(getState) // usePlayerStore(getState, shallow) -> both work the same way
  return (
    <h1 onClick={() => {setTest()}}>{test.value}</h1>
  )
}

store:

    const store = (set, get) => ({
        test: {value: 0},
        setTest: () => {
            const n = {...get().test}
            n.value = n.value +10;
            set({test: n})
        }
    })

[dai-shi]

Try creating another property like test2 and setTest2, and calling setTest2 will let Home component re-render, even though it doesn't depend on test2.
If you had a codesandbox of your example, I could modify it to show the difference.

[gmahima]

Oh! I see
https://codesandbox.io/s/suspicious-driscoll-sk5l6?file=/src/App.js
I created 2 components one fetches state using shallow and one without (Comp1 and Comp2) and I saw the difference. Could you also explain why this is not a problem when the state pick is atomic? (in Comp3 I created in the sandbox)
Thanks!

[gmahima]

I think when we give an atomic state pick, only that property of the store is fetched. But when multiple properties are fetched, the whole store is fetched and properties are extracted, so whenever any part of the store changes, the component re-renders by default.
But, when shallow equality is used, the properties of the state object are compared (rather than the whole state object) and only when they change, the component re-renders. Is that right?

[dai-shi]

By default, the hook checks the return value of a selector (like getStateForComp3) and only trigger re-renders if the return value is changed from the previous one, compared with Object.is. shallow is to change this behavior by comparing with shallow.

Remember:

const test3 = 0
test3 === test3 // is true

const test2 = 0
({ test2 }) === ({ test2 }) // is false

[gmahima]

Oh! I get it now. Thank you so much