Reading state

Learn to read state from a Zustand store.

Reading state

To read state from a Zustand store you call the returned hook. There are two common methods: take the whole store (const { count, increment } = useCounter()) or select only one field (const count = useCounter((s) => s.count)).

The second method is more performant. Because the component re-renders only when count changes; even if increment reference does not change it does not trigger this render. This pattern is Zustand's recommended selector usage and reduces unnecessary renders.

Writing a selector

A selector is a callback; like (s) => s.count. This callback takes the store state and returns the wanted field. The component re-renders only when this field changes. To select multiple fields you can return an object with helpers like useShallow.

Example: const name = useUser((s) => s.name). Here name carries the user's name. Even if s.email or s.id change, as long as name stays the same no render is triggered. This fine selection makes a difference in large lists and forms.

Exercise Read the count value

Complete the CounterValue component. Import useCounter from ./useCounter. Read the value with const count = useCounter((s) => s.count). Return <Text>{count}</Text>.

Show example solution

import React from 'react';
import { Text } from 'react-native';
import { useCounter } from './useCounter';

export function CounterValue() {
  const count = useCounter((s) => s.count);

  return <Text>{count}</Text>;
}

Test yourself

Which usage is more efficient?
- useCounter((s) => s.count)
- useCounter.all()
- useCounter()
- useCounter.read()
Show answer

useCounter() — The selector usage re-renders only when the relevant field changes.
Match the reading parts

useCounter

Store hook
(s) => s.count

Selector
count

Selected value
re-render

Happens on value change

Write the selector function

const count = useCounter((s) => s.____);

Show answer

const count = useCounter((s) => s.count);

Next lesson: Action

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies