Zustand: A Lightweight State Management Library for React

import React, { useState } from 'react';
import { useTodoStore } from './todoStore';

const TodoApp = () => {
    const [newTodo, setNewTodo] = useState('');
    const { todos, addTodo, removeTodo } = useTodoStore();

    const handleAddTodo = () => {
        if (newTodo) {
            addTodo({ id: Date.now(), text: newTodo });
            setNewTodo('');
        }
    };

    return (
        <div>
            <h1>Todo List</h1>
            <input
                type="text"
                value={newTodo}
                onChange={(e) => setNewTodo(e.target.value)}
                placeholder="Enter a new todo"
            />
            <button onClick={handleAddTodo}>Add Todo</button>
            <ul>
                {todos.map((todo) => (
                    <li key={todo.id}>
                        {todo.text}
                        <button onClick={() => removeTodo(todo.id)}>Remove</button>
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default TodoApp;

In this example, the TodoApp component consumes the useTodoStore hook to manage a list of todos. Zustand efficiently handles adding and removing todos while ensuring that only the necessary parts of the UI re-render when state changes.

5. Async Actions with Zustand

Zustand supports async actions as well. Let’s look at how to fetch data using an asynchronous action within a Zustand store.

Example: Async Action for Fetching Data

import create from 'zustand';

const useDataStore = create((set) => ({
    data: [],
    loading: false,
    fetchData: async () => {
        set({ loading: true });
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        set({ data: result, loading: false });
    },
}));

Explanation:

• loading: A boolean flag to indicate whether the data is being fetched.
• fetchData: An asynchronous function that fetches data from an API and updates the state.

Consuming Async State in a Component

import React, { useEffect } from 'react';
import { useDataStore } from './dataStore';

const DataComponent = () => {
    const { data, loading, fetchData } = useDataStore();

    useEffect(() => {
        fetchData();
    }, [fetchData]);

    if (loading) return <div>Loading...</div>;

    return (
        <ul>
            {data.map((item) => (
                <li key={item.id}>{item.name}</li>
            ))}
        </ul>
    );
};

export default DataComponent;