Component is re rendering even after putting shallow in Zustand. using my custom comparing function also doesnt fix

Question

i am using next 13 and typescript

this is my store

export const useModeStore = create<modeState>()(
    devtools(
        ((set) => ({
            // the mode of the test
            mode: "time",
            setMode: (newState: "time" | "zen") => set((state) => ({ mode: newState }) , false ),
            // the time mode of the test
            timeMode: {
                punctuation: false,
                number: false
            },
            // function to toggle the nested object in the timeMode
            setTimeMode: (toggleWhat: "punctuation" | "number") => set((state) => ({
                timeMode: {
                    ...state.timeMode,
                    [toggleWhat]: !state.timeMode[toggleWhat]
                }
            })),
            testMode:0,
            incrementMode:()=>set((state)=>({testMode:state.testMode+=1}))

        }))
    )
)

this

function MyComponent(){
const [mode, setMode, timeMode, setTimeMode] = useModeStore(
    (store) => [store.mode, store.setMode, store.timeMode, store.setTimeMode],shallow

const renderCountRef = useRef(0);

  useEffect(() => {
    renderCountRef.current++;
    console.log('Component re-rendered', renderCountRef.current);
  });
  console.log("rendered");

return(SOMETHING)
}

the above component uses only the mode and timeMode states. but it still rerenders every time testMode changes. event hough i have put shallow.

(prev, next) => {
      console.log("prev",prev)
      console.log("next",next)
      if (prev !== next) {
        console.log("false , component rerendered");
        return false;
      } else {
        console.log("true , component skipped");
        return true;
      }
    }

i have tried putting this instead of shallow. but it didnt help.

the console screenshot after i changed the shallow

in the docs i couldnt find any detailed explaination of shallow.

Answer 1

i fixed the problem.

i didnt know how it got fixed but here is what i did to fix it.

my project earlier had mixed code of useContext() API and zustand.

i completely ported my project to zustand and the components stopped rerendering without their state change.

i have made 3 zustand stores

i used zustand shallow everywhere.