Managing state in React has never been this simple and lightweight! Meet Zustand, a small but powerful state management library that will make your life as a developer much easier. Whether you're tired of Redux's boilerplate or Context API's limitations, Zustand is here to save the day.
In this post, I'll introduce Zustand and share a starter project I've built, available on GitHub. Follow along to get started with Zustand in a Next.js project in just a few steps! ?
What is Zustand? ?
Zustand (German for "state") is a minimalistic state management library for React. It offers:
- A super-simple API.
- High performance with no unnecessary re-renders.
- Easy-to-understand syntax.
- Built-in middleware support (e.g., for persisting state).
Now, let’s dive into setting it up in your Next.js project!
How to Set Up Zustand in Your Next.js Project
Follow these easy steps to integrate Zustand into your Next.js app.
1. Install Zustand
Run the following command to install Zustand:
npm i zustand
2. Create a Store Folder
Inside your src folder, create a new folder named store. This will hold all your Zustand state files.
src/ store/ index.ts userStore.ts
3. Add Your Stores
userStore.ts
This store will handle user-related data.
import { create } from "zustand"; interface User { id: string; name: string; email: string; } interface UserStore { user: User | null; setUser: (user: User | null) => void; } export const useUserStore = create<UserStore>((set) => ({ user: null, setUser: (user: User | null) => set({ user }), }));
counterStore.ts (with persist)
This store will handle a counter state and persist it in localStorage.
"use client"; import { create } from "zustand"; import { persist, createJSONStorage } from "zustand/middleware"; interface ICounterStore { counter: number; increment : ()=> void; decrement : ()=> void; reset : ()=> void; getLatestCountDivided2: ()=> number; } export const useCounterStore = create<ICounterStore>()( persist( (set, get) => ({ counter: 0, increment: () => set(state => ({ counter: state.counter + 1 })), decrement: () => set(state => ({ counter: state.counter - 1 })), reset: () => set({ counter: 0 }), getLatestCountDivided2: ()=> get().counter / 2, }), { name: "counter-store", storage: createJSONStorage(()=> localStorage), } ) );
index.ts
This file will export all the stores for easier imports.
import { useUserStore } from "./userStore"; import { useCounterStore } from "./counterStore"; export { useUserStore, useCounterStore };
4. Using Zustand in Components
Here’s an example of how to use Zustand stores in your Next.js components.
Home.tsx
"use client"; import { useCounterStore, useUserStore } from "@/store"; import Link from "next/link"; export default function Home() { // Access Zustand stores const userStore = useUserStore(); const counterStore = useCounterStore(); const handleAddUser = () => { userStore.setUser({ id: "1", name: "Joodi", email: "mail@example.com" }); }; return ( <div className=""> <div className="flex gap-2 p-2"> <Link className="p-2 border" href="/">Home</Link> <Link className="p-2 border" href="/about">About</Link> <Link className="p-2 border" href="/contact">Contact</Link> </div> <h1>Hello</h1> <h1>User: {userStore.user?.email}</h1> <button className="bg-blue-500 rounded-md p-2 text-white" onClick={handleAddUser} > Add User </button> <br /> <h1>Counter: {counterStore.counter}</h1> <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.increment}> Increment </button> <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.decrement}> Decrement </button> <button className="bg-blue-500 rounded-md text-white p-2" onClick={counterStore.reset}> Reset </button> </div> ); }
Starter Project Repository ?
The full code for this starter project is available on GitHub. It’s beginner-friendly and includes everything you need to start using Zustand with Next.js.
Clone the repository and get started:
git clone https://github.com/MiladJoodi/Zustand_Starter_Project.git cd Zustand_Starter_Project npm install npm run dev
Start managing your state effortlessly with Zustand. Let me know what you think, or share your own use cases! ?
The above is the detailed content of Learn Zustand Right Now in the Simplest Way!. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

JavaScriptisidealforwebdevelopment,whileJavasuitslarge-scaleapplicationsandAndroiddevelopment.1)JavaScriptexcelsincreatinginteractivewebexperiencesandfull-stackdevelopmentwithNode.js.2)Javaisrobustforenterprisesoftwareandbackendsystems,offeringstrong

In JavaScript, choosing a single-line comment (//) or a multi-line comment (//) depends on the purpose and project requirements of the comment: 1. Use single-line comments for quick and inline interpretation; 2. Use multi-line comments for detailed documentation; 3. Maintain the consistency of the comment style; 4. Avoid over-annotation; 5. Ensure that the comments are updated synchronously with the code. Choosing the right annotation style can help improve the readability and maintainability of your code.

Yes,JavaScriptcommentsarenecessaryandshouldbeusedeffectively.1)Theyguidedevelopersthroughcodelogicandintent,2)arevitalincomplexprojects,and3)shouldenhanceclaritywithoutclutteringthecode.

Java and JavaScript are different programming languages, each suitable for different application scenarios. Java is used for large enterprise and mobile application development, while JavaScript is mainly used for web page development.

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

CommentsarecrucialinJavaScriptformaintainingclarityandfosteringcollaboration.1)Theyhelpindebugging,onboarding,andunderstandingcodeevolution.2)Usesingle-linecommentsforquickexplanationsandmulti-linecommentsfordetaileddescriptions.3)Bestpracticesinclud

JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli

JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor
