Why are Zustand hooks called "selective"?

ReactJunior~2 min read

Zustand hooks are called selective hooks because they let you pull only the needed fragments of state out of the store, rather than the whole object. In other words, a component "subscribes" only to the part of the state it actually uses.

The essence of "selectiveness"

When you call a Zustand hook:

javascript

const count = useCounterStore((state) => state.count)

you pass a selector, a function that picks the needed part of the state (in this case count). Zustand "understands" that your component depends only on state.count, and it will trigger a re-render only when that field changes, not on any change to the store.

Example

javascript

const useStore = create(() => ({
  count: 0,
  text: 'Hello',
}))

Without a selector (not selective)

javascript

const { count } = useStore()

The component will re-render on any change to the store (for example, if text changes).

With a selector (selective)

javascript

const count = useStore((state) => state.count)

The component will re-render only when count changes. If text changes, the component is untouched.

Why this matters

It improves performance

Components don't re-render for no reason.
This is especially critical with large amounts of data and frequent updates.

It improves isolation

Each component "watches" only what it needs.
Fewer dependencies and side effects.

Using `shallow` for optimization

If you need to subscribe to several values at once, you can use shallow comparison:

javascript

import { shallow } from 'zustand/shallow'

const { count, text } = useStore(
  (state) => ({ count: state.count, text: state.text }),
  shallow
)

shallow prevents unnecessary re-renders if the { count, text } object hasn't actually changed (the values stayed the same).

Summary

Term	What it means
Selector	A function that picks the needed part of the state from the store
Selective hook	A hook subscribed only to part of the state
Benefit	Components re-render only when the selected data changes
Optimization tools	`shallow`, memoized selectors, destructuring

A simple formula to remember

"A selective Zustand hook" = "Pick exactly what you need, and React will re-render only that".

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.