avoiding to make custom hooks while using useShallow

[ImamJanjua]

Hi, am trying to create an api, like in this file I have a main function and a helper function and both functions need some data from the store to execute. And than I wanna put the main func in the useMutation hook from react query.
But the problem ofcourse is that by calling the state from the store in this way, react will complain. Solution kinda would be custom hook but that would make the structure more complicated.
I could select the the states without the useShallow hook but wouldn't i than loose the render optimization?

const [id] = useDoctorStore(useShallow((state) => [state.id]));


async function helperFunc() {
  //...
}

export async function mainFunc() {
  //...
}

[dai-shi]

If you don't prefer making a custom hook, how about using createWithEqualityFn with shallow?

import { createWithEqualityFn } from 'zustand/traditional';
import { shallow } from 'zustand/shallow';

export const useDoctorStore = createWithEqualitfyFn((set) => ({
  // ...
}), shallow);

[dbritto-dev]

@dbritto-dev i got that, but i mean whats the benifit of using const bear = useBearStore.use.bear() instead of const nuts = useBearStore((state) => state.nuts) ?

@ImamJanjua it's the same thing, you are making them less verbose but that's all

[ImamJanjua]

@dbritto-dev Thanks, but why is it than in the docs?

[dbritto-dev]

@ImamJanjua what you mean? they are just different ways to do the same

[ImamJanjua]

@dbritto-dev, do u know why the function can only gets the newest states when i refresh?

Bildschirmaufnahme.2024-05-12.um.20.40.07.mov

[dbritto-dev]

@ImamJanjua you should use useTestStore.getState() inside of your changeValue() function, having that logic outside of that function is the reason of what you are facing that issue