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
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 :)
Top comments (0)