DEV Community: Salman Sadik Siddiquee

Zustand: A Lightweight State Management Library (No Boilerplate Needed)

Salman Sadik Siddiquee — Fri, 28 Nov 2025 16:16:23 +0000

Zustand is a simple and powerful state management library for React applications.
Unlike Redux, it has no heavy boilerplate, no reducers, no actions, and no complicated setup.
You just create a store using the create function and start using it immediately.

Here’s a basic todo store:

import { create } from 'zustand';

const useTodoStore = create(

    (set) => ({
        todos: [
            {
                id: crypto.randomUUID(),
                text: 'Learn React',
                completed: false,
            },
            {
                id: crypto.randomUUID(),
                text: 'Learn Zustand',
                completed: false,
            },

        ],
    })

);

export default useTodoStore;

Consuming the Store in a Component

 const todos = useTodoStore((state) => state.todos);

Need to add a new todo ?

To insert a new todo item into the store, you create an addTodo function inside your Zustand store. This function receives the new todo text and then updates the state using Zustand’s set function.

Zustand encourages immutable updates, meaning you should never directly mutate the previous state. You can also use immer for immutable updates easily. Instead, you create a new array by spreading the existing todos and adding the new one at the end.

import { create } from 'zustand';

const useTodoStore = create(

    (set) => ({
        todos: [],
        addTodo: (text) =>
            set((state) => ({
                todos: [
                    ...state.todos,
                    { id: crypto.randomUUID(), text, completed: false },
                ],
            })),
    })

);

export default useTodoStore;

Use the addTodo function in a component

   const addTodo = useTodoStore((state) => state.addTodo);

    const handleSubmit = (e) => {
        e.preventDefault();
        if (text.trim()) {
            addTodo(text.trim());
            setText('');
        }
    };

Persistance

You can persist the data in the local storage using the persist middleware that comes from zustand/middleware, like this

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useTodoStore = create(

    persist(
        (set) => ({
            todos: [],
            addTodo: (text) =>
                set((state) => ({
                    todos: [
                        ...state.todos,
                        { id: crypto.randomUUID(), text, completed: false },
                    ],
                })),
        })
    )
);

export default useTodoStore;

By default, the persist middleware does not assign a storage key.
To customize it, you can pass a second configuration object to persist and set a name property, which becomes the key used in localStorage.


import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useTodoStore = create(

    persist(
        (set) => ({
            todos: [],
            addTodo: (text) =>
                set((state) => ({
                    todos: [
                        ...state.todos,
                        { id: crypto.randomUUID(), text, completed: false },
                    ],
                })),
        }),
        {
            name: 'todo-storage',
        }
    )
);

export default useTodoStore;

Devtools

Zustand also supports Redux DevTools using the devtools middleware.
This lets you inspect state changes, time travel, and debug more easily.

The set function can accept three arguments:

A function that returns the updated state
A boolean indicating whether to replace the entire state
A string that names the action (useful for DevTools)

import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

const useTodoStore = create(
    devtools(
        persist(
            (set) => ({
                todos: [],
                filter: 'all',
                addTodo: (text) =>
                    set(
                        (state) => ({
                            todos: [
                                ...state.todos,
                                { id: crypto.randomUUID(), text, completed: false },
                            ],
                        }),
                        false,           // replace state?
                        "addTodo"        // action name for DevTools
                    ),
            }),
            { name: 'todo-storage' }
        ),
        { name: "TodoStore" }
    )
);

export default useTodoStore;

Now you can debug with the Redux devtool.

Summary

Zustand is a minimal state manager without boilerplate.
You create a store using create.
State consumption is simple: useStore((state) => state.value).
You can add actions like addTodo that modify state safely.
Persist middleware stores your data in localStorage.
- DevTools middleware integrates with Redux DevTools for debugging.

Zustand is perfect for React developers who want clean, predictable, and easy-to-maintain global state with minimal setup.

GitHub Repository & Live Demo

GitHub Repo:
👉 todo-app-zustand

Live Demo:
👉 Live Link

Building a 2D Array Visualizer with React: A Step-by-Step Guide

Salman Sadik Siddiquee — Thu, 19 Sep 2024 17:41:14 +0000

When working with multi-dimensional data, visualization can be a powerful tool for understanding and exploring complex structures. That’s why I built a 2D Array Visualizer using React. This project allows users to input a 2D array and view its representation as an interactive grid. Along the way, I added features like customizable colors for cells and error handling for invalid input.

In this post, I'll walk you through the journey of building this project and share some of the core features and challenges I encountered. Let's dive in!

1. Project Overview

The 2D Array Visualizer is a simple yet powerful React project that takes user input in the form of a 2D array and displays it visually as a grid. The grid can be customized to give each unique value its own color, and users can modify the text and border colors of the entire grid as well.

Key Features:

Users can input a 2D array to visualize it.
The app ensures the input is a valid 2D array; otherwise, it displays an error message.
Each unique value in the array can have a custom cell color.
The grid's border color and text color are fully customizable.

Tech Stack:

React for the frontend.
Tailwind for the grid styling and customizations.

This project is perfect for those looking to build a dynamic and interactive UI while learning about data validation, state management, and custom styling in React.

2. Input Validation and Error Handling

The foundation of this project lies in ensuring that users provide a valid 2D array. If the input isn't a properly formatted 2D array, the app won’t run and will display an error message instead.

Here’s how I handled input validation:



// Check if input is a 2D array
const is2DArray = Array.isArray(arr) && arr.every((row) => Array.isArray(row));

// Check if input is a square array
const isSquareArray = 
  arr.every(
   (row) =>
     row.length === len &&
     row.every((col) => typeof col === "number" || typeof col === "string")
);

This simple function checks whether the input is an array and whether each row within it is also an array. If the input passes this check, we proceed to render the grid. Otherwise, an error message appears. This way, the app remains user-friendly and ensures that errors are handled gracefully.

3. Grid Visualization

Once a valid 2D array is input, it's time to display it visually. I used simple HTML and CSS grid techniques to represent the array as a grid.

Here’s a simplified version of the grid rendering logic:



{/* 2D Array visualization */}
{ar.length > 0 &&
   ar.map((row, i) =>
       row.map((col, j) => (
           <div key={i * len + j>
                {col}
            </div>
         ))
 )}

The grid layout adjusts automatically based on the number of rows and columns in the input array.

4. Customization Features

One of the most exciting parts of this project is the ability to customize the grid’s appearance. The visualizer allows users to change the color of each unique value in the array, along with the border and text colors of the entire grid.

Custom Cell Colors:

For this, I implemented a color picker that maps each unique value in the array to a specific color. Users can choose different colors for cells, making it easier to visually distinguish different values.

Border and Text Color Customization:

Similarly, users can customize the border and text color for the entire grid using another set of color pickers. This allows for further personalization of the visualized array.

This flexibility in styling makes the visualizer not just functional but visually appealing and engaging for users.

5. Final Thoughts

Building the 2D Array Visualizer was both a fun and challenging experience. It taught me the importance of data validation, dynamic rendering, and UI customization in React applications. The project is a great tool for learning and visualizing 2D arrays, whether for educational purposes or general curiosity.

If you'd like to explore the project further, you can find the full code on my GitHub Repository. Feel free to try it out and customize it as you see fit! Check out live view.

Next Steps:

Add support for larger datasets or arrays with more complex structures.
Implement hover effects for enhanced interactivity.
Add downloadable or shareable grid images for users to save their visualized arrays.

Thank you for reading, and I hope this post inspires you to build your own visualizers or similar projects!

Feel free to adjust this blog post as needed or add more technical details. Would you like help setting up the GitHub repository or another platform to share it?