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

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

  


  
  
  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 :) 


Zustand Todo App
Project Source

Vignesh Iyer