The proper way to do GLOBAL STATE in React - Jotai, Boiletplate-free Redux
Vložit
- čas přidán 4. 09. 2024
- Global State Variables in React without Redux or boilerplate. Jotai takes an atomic approach to global React state management inspired by Recoil.
PocketBase Crash Course Playlist:
• PocketBase Crash Course
Jotai Docs:
jotai.org/
Hostinger Promo Code: RAVENJS
hostinger.com/...
(use code RAVENJS for 10% off all products/plans)
Thank you brother. Exactly what I needed
A very helpful and concise video 👍. Keep up the good work.
Preety good stuff
Keep posting ❤❤
Here in Brazil. Waiting for more content
very clear!
Thanks for the review! Everything is very well explained. But I still have one question: what is the difference between Jotai and Zustand, and also in which case should one or the other be used?
Thank you sir
post the video broda
i read article about 7 top react state management. and jotai is easy to learn.
really good please post!
Thank you
love your vids
Hi! Just as a tip when doing todos.map() you can pass in .map(todo, index) and it will create an auto-incremented index for you that you can use as your key :D (If you already knew this then this may just be for some other random viewer who doesn't yet)
Using index as key is not a good practice. If the list is dynamic key should be a unique id. for static using index is fine.
heyyy post more of the pocketbase too
awesome video, but need 2k or 4k to see things clear hehe.
🎯 Key Takeaways for quick navigation:
00:28 🚀 React developers often face boilerplate issues with global state management.
00:41 🔄 Jotai is a tool that simplifies global state management in React without complex Redux functionality or prop drilling.
02:30 🌐 Create a global variable in Jotai using `atom` to manage state across components easily.
04:18 🧩 Use Jotai's `useAtom` function similar to React's `useState` for intuitive state management.
07:36 💾 Jotai supports persistence with `atomWithStorage`, allowing state to persist across page reloads using local storage.
09:51 🚫 Optimize re-renders by using `useSetAtom` in components that only write to the global state, preventing unnecessary renders.
Made with HARPA AI
Thanks bro