useShallow vs selectors

[ImamJanjua]

Hi, i am bit confused. So as far as i know there are three ways to get state and actions. The first through state so useFooStore((state) ➔ state.upateStore)) which is not not render optimized and therefore not preferred, the second one using useShallow hook and the third use the selectors. Now which method is the best for getting states and actions and why?

[dbritto-dev]

@ImamJanjua here you go:

const { someField } = useStore() // there's no optimizations here 
const { someField } = useStore(state => state) // same as `useStore()`
const someField = useStore(state => state.someField) // optimized only for primitive values, so be careful when you use objects or arrays
const someField = useStore(useShallow(state => state.someField)) // optimized for any value, but be careful on nested values 

[ImamJanjua]

I mean in the docs u have this custom code which needs to be wrapped by a store and than in the components use can do something like const value = useFooStore.use.value()

[dbritto-dev]

@ImamJanjua under the hood use it's just an object and any value is wrapped is a custom hook that use a selector, so be careful with that

[ImamJanjua]

Hi, at the moment i am getting my states and actions from from useShallow hook at same way to get all on one swipe, but is there a better way?

const [ createStartSlot, setCreateStartSlot, createSlotLength, setCreateSlotLength, createEndSlot, setCreateEndSlot ] = useCalendarStore( useShallow((state) => [ state.createStartSlot, state.setCreateStartSlot, state.createSlotLength, state.setCreateSlotLength, state.createEndSlot, state.setCreateEndSlot, ]), );

[sonterix]

So as far as I understand we should use useStore(useShallow()) by default and without useShallow for deeply nested objects to have the best results, right?

[dbritto-dev]

@ImamJanjua perf boost, yes