07. Use Case Scenario 1: Zustand
Re-rendering optimization with zustand, handling structured data
🔖 1. What is Zustand?
Key Features
A lightweight state management library that allows simple and intuitive global state management in React applications
You can define and use global state with just one or two hooks and simple function calls without complex setup
When creating a store, you simply define state and actions that change state in object form
It subscribes only to necessary state and re-renders only when that state changes, reducing unnecessary rendering
Asynchronous logic (API communication, data fetching, etc.) can be easily included in state definition logic, making it convenient to handle side effects
Example Code
Adapted from code on Zustand official documentation main page
import create from 'zustand';
// 1. Define global state (store)
// Create a store (useStore) by defining state and actions (increase, decrease, reset) with create function
const useStore = create((set) => ({
count: 0,
increase: () => set((state) => ({ count: state.count + 1 })),
decrease: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));
// When count value is updated through set, the state change function
// only components that depend on count re-render
function Counter() {
// 2. Use state
// When useStore hook is called within a component, you get count and each function
const { count, increase, decrease, reset } = useStore();
return (
<div>
<h1>{count}</h1>
<button onClick={increase}>A bear is born!!</button>
<button onClick={decrease}>A bear dies..</button>
<button onClick={reset}>Reset</button>
</div>
);
}
export default function App() {
return (
<div>
<h2>Zustand Bear 🐻</h2>
<Counter />
</div>
);
}Should I Use Zustand?
As such, Zustand defines a store and gets necessary state and functions through hooks
Since global state is defined and managed at once, state change logic can be gathered in one place, so maintenance is expected to be easy even as scale grows
Therefore, if you want to clearly structure global state at once and simplify state management flow through one store, Zustand would be good
Jotai requires breaking down state into atom units from the beginning, so I'm not sure if it can be used well in the early stages of a project
🔖 2. Immutable State Model
Explaining 'Immutable State Model'
When managing state, Zustand updates state by creating a new object with only the changed parts instead of modifying the original state object
In other words, when state changes, instead of modifying the existing object, it creates a new object and puts that object in place of the existing state
And unchanged parts (e.g., other fields or internal objects) reuse the previous ones as they are, reducing unnecessary rendering
To use an analogy, instead of erasing content written on paper with an eraser and writing again, you write only the changed content on new paper and replace it. Unchanged content can reuse previous content without wasting resources
Example Code
import create from 'zustand';
const useStore = create((set) => ({
user: { name: 'Ella', age: 20 },
// State change function (maintaining immutability)
updateUserName: (newName) =>
set((state) => ({
// Don't modify user object directly, return new object
// Only name changes, age doesn't change, so reuse existing user.age
user: { ...state.user, name: newName },
})),
items: ['apple', 'banana'],
addItem: (item) =>
set((state) => ({
// Don't modify existing array, create new array and return
items: [...state.items, item],
})),
}));
function App() {
const { user, updateUserName, items, addItem } = useStore();
return (
<div>
<p>
User: {user.name}, {user.age}
</p>
<button onClick={() => updateUserName('Ella')}>
Change name to Chloe
</button>
<p>Items: {items.join(', ')}</p>
<button onClick={() => addItem('orange')}>Give me Orange too</button>
</div>
);
}
export default App;Feeling the Benefits Through Examples
As such, Zustand makes it easy to understand how state has changed
By utilizing the immutability pattern that returns new objects, the process of comparing previous state and new state becomes simple
When the book says "Since you only need to check the equality of references to state objects to know if there's a change, you don't need to check the entire value of objects," it means you can determine whether state has changed just by checking "Is it the same object or a different object?"
🔖 3. Manual Rendering Optimization
What is Selector-Based Re-rendering Control?
It's a strategy to subscribe only to specific parts of state that components need and re-render components only when those parts actually change
This way, even if other parts of global state change, components are not affected, reducing unnecessary re-rendering
Components that use only a very small part of large global state will only render when that small part changes, which will be advantageous for performance optimization
Example Code
import create from 'zustand';
const useStore = create((set) => ({
user: { name: 'Ella', age: 20 },
items: ['apple', 'banana'],
setName: (name) =>
set((state) => ({
user: { ...state.user, name },
})),
addItem: (item) =>
set((state) => ({
items: [...state.items, item],
})),
}));
// Selector: get only user's name
const selectUserName = (state) => state.user.name;
// Selector: get only the length of items array
const selectItemsCount = (state) => state.items.length;
function UserNameDisplay() {
// Subscribe only to user.name value, don't re-render if name doesn't change
const name = useStore(selectUserName);
console.log('UserNameDisplay rendered');
return <div>User Name: {name}</div>;
}
function ItemsCountDisplay() {
// Subscribe only to items.length value, don't re-render if items count doesn't change
const count = useStore(selectItemsCount);
console.log('ItemsCountDisplay rendered');
return <div>Items Count: {count}</div>;
}
function App() {
const setName = useStore((state) => state.setName);
const addItem = useStore((state) => state.addItem);
return (
<div>
<UserNameDisplay />
<ItemsCountDisplay />
<button onClick={() => setName('Bob')}>Change name to Chloe</button>
<button onClick={() => addItem('orange')}>Give me Orange too</button>
</div>
);
}
export default App;My Thoughts
This chapter provides a practical introduction to Zustand, showing how it simplifies global state management compared to more complex solutions like Redux. The key insight is that Zustand provides a good balance between simplicity and functionality.
The discussion about immutable state models is particularly important - it shows how Zustand leverages React's optimization patterns to provide better performance without requiring complex setup.
The selector-based optimization examples demonstrate how Zustand can be used efficiently in real applications, showing that you can get good performance without over-engineering.
Code Examples
// ✅ GOOD: Basic Zustand store setup
interface BearState {
bears: number;
fish: number;
increasePopulation: () => void;
removeAllBears: () => void;
addFish: (amount: number) => void;
}
const useBearStore = create<BearState>((set) => ({
bears: 0,
fish: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
addFish: (amount) => set((state) => ({ fish: state.fish + amount })),
}));
// ✅ GOOD: Using selectors for performance optimization
function BearCounter() {
const bears = useBearStore((state) => state.bears); // Only re-renders when bears change
const increasePopulation = useBearStore((state) => state.increasePopulation);
return (
<div>
<h1>{bears} bears around here...</h1>
<button onClick={increasePopulation}>Add a bear</button>
</div>
);
}
function FishCounter() {
const fish = useBearStore((state) => state.fish); // Only re-renders when fish change
const addFish = useBearStore((state) => state.addFish);
return (
<div>
<h1>{fish} fish in the sea</h1>
<button onClick={() => addFish(5)}>Add 5 fish</button>
</div>
);
}
// ✅ GOOD: Complex state with nested objects
interface UserState {
user: {
name: string;
age: number;
preferences: {
theme: 'light' | 'dark';
language: string;
};
};
updateName: (name: string) => void;
updateAge: (age: number) => void;
updateTheme: (theme: 'light' | 'dark') => void;
updateLanguage: (language: string) => void;
}
const useUserStore = create<UserState>((set) => ({
user: {
name: 'Ella',
age: 25,
preferences: {
theme: 'light',
language: 'en',
},
},
updateName: (name) =>
set((state) => ({
user: { ...state.user, name },
})),
updateAge: (age) =>
set((state) => ({
user: { ...state.user, age },
})),
updateTheme: (theme) =>
set((state) => ({
user: {
...state.user,
preferences: { ...state.user.preferences, theme },
},
})),
updateLanguage: (language) =>
set((state) => ({
user: {
...state.user,
preferences: { ...state.user.preferences, language },
},
})),
}));
// ✅ GOOD: Selective subscriptions for nested state
function UserName() {
const name = useUserStore((state) => state.user.name); // Only re-renders when name changes
const updateName = useUserStore((state) => state.updateName);
return (
<div>
<p>Name: {name}</p>
<input
value={name}
onChange={(e) => updateName(e.target.value)}
placeholder='Enter name'
/>
</div>
);
}
function ThemeToggle() {
const theme = useUserStore((state) => state.user.preferences.theme); // Only re-renders when theme changes
const updateTheme = useUserStore((state) => state.updateTheme);
return (
<button onClick={() => updateTheme(theme === 'light' ? 'dark' : 'light')}>
Current theme: {theme}
</button>
);
}
// ✅ GOOD: Async actions with Zustand
interface TodoState {
todos: Todo[];
loading: boolean;
error: string | null;
fetchTodos: () => Promise<void>;
addTodo: (text: string) => void;
toggleTodo: (id: string) => void;
}
const useTodoStore = create<TodoState>((set, get) => ({
todos: [],
loading: false,
error: null,
fetchTodos: async () => {
set({ loading: true, error: null });
try {
const response = await fetch('/api/todos');
const todos = await response.json();
set({ todos, loading: false });
} catch (error) {
set({ error: error.message, loading: false });
}
},
addTodo: (text) =>
set((state) => ({
todos: [
...state.todos,
{ id: Date.now().toString(), text, completed: false },
],
})),
toggleTodo: (id) =>
set((state) => ({
todos: state.todos.map((todo) =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
),
})),
}));
// ✅ GOOD: Components using the async store
function TodoList() {
const { todos, loading, error, fetchTodos } = useTodoStore();
useEffect(() => {
fetchTodos();
}, [fetchTodos]);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return (
<ul>
{todos.map((todo) => (
<TodoItem key={todo.id} todo={todo} />
))}
</ul>
);
}
function TodoItem({ todo }: { todo: Todo }) {
const toggleTodo = useTodoStore((state) => state.toggleTodo);
return (
<li>
<input
type='checkbox'
checked={todo.completed}
onChange={() => toggleTodo(todo.id)}
/>
<span
style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
>
{todo.text}
</span>
</li>
);
}Last updated