DEV Community

Cover image for Building Todo app with Zustand in React
vigneshiyergithub
vigneshiyergithub

Posted on

Building Todo app with Zustand in React

What is this post about ?

Hello fellow humanoids. Today we will try to implement a basic todo app with Zustand in React Js. This post won't be focused much on the styling rather the bare minimum logic required.

Check out the app here : Todo App - Zustand

Todo App Zustand

Content

  • What is Zustand ?
  • Zustand store structure
  • Todo App - Adding Todos
  • Todo App - Adding todo items

Lets go deep dive into each one and explore how it was implemented.

What is Zustand ?

A small, fast and scalable bearbones state-management solution using simplified flux principles. Has a comfy api based on hooks, isn't boilerplatey or opinionated.

Don't disregard it because it's cute. It has quite the claws, lots of time was spent to deal with common pitfalls, like the dreaded zombie child problem, react concurrency, and context loss between mixed renderers. It may be the one state-manager in the React space that gets all of these right.

Check it out-Zustand

Zustand store

Todo App - Adding Todos

We would add new Todo using

Add New Todo

button

Todo App - Adding todo items

Let's create a basic comment component with basic utility functions

Conclusion

This app was made as part of learning new components which are used in real life applications.
Stay safe and lend a hand to another :)

Discussion (0)