How to Use Zustand in React Native for State Management

To use zustand in React Native, first install it with npm install zustand. Then create a store using create from zustand to hold your state and use hooks to read and update state inside your components.

Syntax

Zustand uses a simple syntax to create a store and access state. You import create from zustand, then define your store with state variables and functions to update them. Inside components, you use the store hook to read or change state.

• create: Function to make the store.
• useStore: Hook to access state and actions.
• State: Variables stored globally.
• Actions: Functions to update state.

javascript

import { create } from 'zustand';

const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  decrease: () => set(state => ({ count: state.count - 1 })),
}));

// In component
const count = useStore(state => state.count);
const increase = useStore(state => state.increase);

Example

This example shows a simple React Native app using zustand to manage a counter. The store holds the count and functions to increase or decrease it. The component reads the count and calls actions on button press.

javascript

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { create } from 'zustand';

const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  decrease: () => set(state => ({ count: state.count - 1 })),
}));

export default function App() {
  const count = useStore(state => state.count);
  const increase = useStore(state => state.increase);
  const decrease = useStore(state => state.decrease);

  return (
    <View style={styles.container}>
      <Text style={styles.countText}>Count: {count}</Text>
      <Button title="Increase" onPress={increase} />
      <Button title="Decrease" onPress={decrease} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  countText: {
    fontSize: 32,
    marginBottom: 20,
  },
});

Output

A screen with text "Count: 0" and two buttons labeled "Increase" and "Decrease". Pressing buttons updates the count number on screen.

Common Pitfalls

Common mistakes when using zustand in React Native include:

• Not wrapping state updates in the set function, causing state not to update.
• Accessing state outside components without hooks, which won't trigger UI updates.
• Forgetting to import create from zustand or installing the package.
• Using multiple stores unnecessarily instead of one centralized store.

javascript

/* Wrong: state updated directly, no set call */
const useStore = create(set => ({
  count: 0,
  increase: () => {
    // This won't update state properly
    // state.count += 1; // 'state' is not defined here
  },
}));

/* Right: use set to update state */
const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
}));

Quick Reference

Here is a quick summary of key zustand usage points:

Concept	Description
create	Function to create a store with state and actions
useStore	Hook to access state and actions inside components
set	Function to update state immutably
State	Variables stored globally and reactive
Actions	Functions that update state via set

Key Takeaways

Install zustand and create a store with create() to hold your app state.

Use the store hook inside React Native components to read and update state.

Always update state using the set function to trigger UI updates.

Avoid direct state mutation and use one centralized store for simplicity.

Zustand works well for simple and scalable state management in React Native.