Project Overview

This project aims to compare three state management solutions

—Context API, Redux Toolkit, and Zustand —

when applied to the same problem. By examining the rendering effects on three distinct pages and evaluating the code quality and performance of each solution, we gain insights into the strengths and differences between these state management tools.

Exploring Rendering Effects

Navigate to three different pages to observe how each state management tool impacts rendering:

• / for context
• /rtk for Redux Toolkit
• /zustand for Zustand

Analyzing Code Quality and Performance

Delve into the codebase of each solution to assess code quality and performance:

• app/(examples)/(context)/context.tsx for Context
• app/(examples)/rtk/store.tsx for Redux Toolikt
• app/(examples)/zustand/store.ts for Zustand

Getting Started

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First install dependencies

yarn

or

npm install

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.