Let's talk about Zustand, a state management solution that's been gaining significant traction in the React ecosystem. If you're wondering whether it's the right choice for your project, you're in the right place.
Zustand (German for "state") takes a refreshingly simple approach to state management. Created by the team behind React-Spring, it offers a minimal yet powerful API that might make you rethink everything you know about state management.
Here's a simple example that demonstrates Zustand's elegance:
1import create from 'zustand'
2
3const useStore = create((set) => ({
4 bears: 0,
5 increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
6 removeAllBears: () => set({ bears: 0 })
7}))
1import create from 'zustand'
2
3const useStore = create((set) => ({
4 bears: 0,
5 increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
6 removeAllBears: () => set({ bears: 0 })
7}))
That's it – no providers, no complex setup, just pure, functional state management.
Let's look at a more practical example. Here's how you might implement a shopping cart:
1interface Product {
2 id: string
3 name: string
4 price: number
5}
6
7interface CartStore {
8 items: Product[]
9 total: number
10 addItem: (product: Product) => void
11 removeItem: (productId: string) => void
12}
13
14const useCartStore = create<CartStore>((set) => ({
15 items: [],
16 total: 0,
17 addItem: (product) => set((state) => ({
18 items: [...state.items, product],
19 total: state.total + product.price
20 })),
21 removeItem: (productId) => set((state) => {
22 const item = state.items.find(i => i.id === productId)
23 return {
24 items: state.items.filter(i => i.id !== productId),
25 total: state.total - (item?.price || 0)
26 }
27 })
28}))
1interface Product {
2 id: string
3 name: string
4 price: number
5}
6
7interface CartStore {
8 items: Product[]
9 total: number
10 addItem: (product: Product) => void
11 removeItem: (productId: string) => void
12}
13
14const useCartStore = create<CartStore>((set) => ({
15 items: [],
16 total: 0,
17 addItem: (product) => set((state) => ({
18 items: [...state.items, product],
19 total: state.total + product.price
20 })),
21 removeItem: (productId) => set((state) => {
22 const item = state.items.find(i => i.id === productId)
23 return {
24 items: state.items.filter(i => i.id !== productId),
25 total: state.total - (item?.price || 0)
26 }
27 })
28}))
Zustand is particularly effective in certain scenarios:
When you need global state but don't want the overhead of more complex solutions. Zustand's simplicity shines in applications where:
- State management needs are straightforward
- Quick setup is important
- Bundle size matters
Zustand's TypeScript support is exceptional. The type inference works beautifully:
1interface ThemeStore {
2 theme: 'light' | 'dark'
3 toggleTheme: () => void
4}
5
6const useThemeStore = create<ThemeStore>((set) => ({
7 theme: 'light',
8 toggleTheme: () => set((state) => ({
9 theme: state.theme === 'light' ? 'dark' : 'light'
10 }))
11}))
1interface ThemeStore {
2 theme: 'light' | 'dark'
3 toggleTheme: () => void
4}
5
6const useThemeStore = create<ThemeStore>((set) => ({
7 theme: 'light',
8 toggleTheme: () => set((state) => ({
9 theme: state.theme === 'light' ? 'dark' : 'light'
10 }))
11}))
Zustand's minimal re-render approach means better performance out of the box:
1// Only re-renders when count changes
2const count = useStore((state) => state.count)
3
4// Only re-renders when specific properties change
5const { title, description } = useStore(
6 (state) => ({
7 title: state.title,
8 description: state.description
9 }),
10 shallow
11)
1// Only re-renders when count changes
2const count = useStore((state) => state.count)
3
4// Only re-renders when specific properties change
5const { title, description } = useStore(
6 (state) => ({
7 title: state.title,
8 description: state.description
9 }),
10 shallow
11)
After using Zustand in production, here are key practices that will serve you well:
Split your store into logical slices:
1const useStore = create((set) => ({
2 // Auth slice
3 user: null,
4 login: (user) => set({ user }),
5 logout: () => set({ user: null }),
6
7 // UI slice
8 theme: 'light',
9 toggleTheme: () => set((state) => ({
10 theme: state.theme === 'light' ? 'dark' : 'light'
11 }))
12}))
1const useStore = create((set) => ({
2 // Auth slice
3 user: null,
4 login: (user) => set({ user }),
5 logout: () => set({ user: null }),
6
7 // UI slice
8 theme: 'light',
9 toggleTheme: () => set((state) => ({
10 theme: state.theme === 'light' ? 'dark' : 'light'
11 }))
12}))
Take advantage of Zustand's middleware system:
1import { persist } from 'zustand/middleware'
2
3const useStore = create(
4 persist(
5 (set) => ({
6 preferences: {},
7 setPreference: (key, value) =>
8 set((state) => ({
9 preferences: { ...state.preferences, [key]: value }
10 }))
11 }),
12 {
13 name: 'user-preferences'
14 }
15 )
16)
1import { persist } from 'zustand/middleware'
2
3const useStore = create(
4 persist(
5 (set) => ({
6 preferences: {},
7 setPreference: (key, value) =>
8 set((state) => ({
9 preferences: { ...state.preferences, [key]: value }
10 }))
11 }),
12 {
13 name: 'user-preferences'
14 }
15 )
16)
Create derived state efficiently:
1const useStore = create((set, get) => ({
2 items: [],
3 addItem: (item) => set((state) => ({ items: [...state.items, item] })),
4 get totalItems() {
5 return get().items.length
6 }
7}))
1const useStore = create((set, get) => ({
2 items: [],
3 addItem: (item) => set((state) => ({ items: [...state.items, item] })),
4 get totalItems() {
5 return get().items.length
6 }
7}))
Zustand might not be the best choice when:
- You need extensive middleware ecosystem
- Your team is more familiar with Redux
- You require advanced dev tools
Zustand represents a modern, pragmatic approach to state management. It's perfect for teams that:
- Value simplicity and directness
- Need quick setup and minimal boilerplate
- Want excellent TypeScript support
- Prioritize performance
Remember: The best state management solution is the one that helps your team build and maintain your application effectively. Zustand excels at providing a simple, powerful API that gets out of your way and lets you focus on building features.
If you're starting a new project or feeling the pain of more complex state management solutions, give Zustand a try. Its simplicity might be exactly what your project needs.
