State Management for React: Jotai From Beginners to Masters

[@Norfeldt]

I feeling I have found a gold mine when I found this channel. It's a fantastic way to learn both typescript and get to know the current state management options in react

[@Booyamakashi]

True, true.

[@ToddPressleyy]

Thanks for the awesome content, Jack!

[@aldelta19]

Love the channel! Can you help me understand what's going on here? The project builds, but I just get a white, blank page. ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs Can't import the named export 'Children' from non EcmaScript module (only default export is available)

[@CodingNuggets]

Have never heard or seen Jotai. So interesting these different state managers. I still think I'll just stick with Redux or React Query. I'm really loving React Query and trying to use it when I can. Appreciate the content Jack. Much love and respect my friend!

[@jherr]

Yeah, I need to do some more stuff on `react-query`. Tanner is doing an awesome job on that. And I'm intrigued about the potential of it getting integrated into Jotai so that any atom can be its own managed query.

[@xan3xx443]

5:35 tf todo do todo into the todo got me tripping brah

[@jeffinj7707]

Great content 👍🏽

[@sevdacimen2321]

awesome work ! Clear and easy example thank you Jack

[@lost-prototype]

There's a simplicity to this that I just love. What would you say to people who feel it is too similar to global state?

[@jherr]

So when you say global state do you mean redux? Because there are a bunch of state managers and the my have different ways to model state.

[@lost-prototype]

@@jherr I guess the main contrast would be with prop drilling and more significantly (IMO), utility components with "onChange" callbacks littered everywhere.

[@techhguy]

Awesome as always! Thank you, Jack.

[@quelchx]

I'm curious, if you had to choose one or the other which would you choose between Jotai and Zustand for a state manager? Let's take managing user auth and say a cart state? I used both to write logic for managing auth state and a color palette state, I found both very good libraries but I wanted others input on if they had one what would they use.

[@jherr]

Personally I would choose Jotai because I'm fascinated by atomic state and I have a hunch that it's the future. Professionally I would choose Zustand because it's simple, conventional, and very popular.

[@quelchx]

@@jherr thanks for the response. I was watching your video on react context as a state provider a bit ago and when you showcased Zustand , I enjoyed how simple it was to implement + it didn't cause any unnecessary re-renders (I'm comparison to say react context patterns I see). My question I guess would be with Jotai would it cause re-renders similar to react context since it needs a provider as a HOC of sorts? Not sure if I make sense or not.

[@jherr]

@@quelchx Jotai has the same performance in terms of re-renders as Zustand. That being said, I think there is a lot of unnecessary concern about re-renders. React is VDOM framework that is optimized to handle re-renders very quickly.

[@quelchx]

@@jherr appreciate your input and time -- thank you 🙂

[@SwOOp_de]

Jack has a really nice calm voice!

[@seanknowles9985]

We need more of jotai vs recoil or in depth on both. Would be amazing.

[@lydstyl]

Thank you, I will get it a try.

[@eleah2665]

Hello Jherr - this series is always interesting. Thanks.

[@francorocchia6982]

Such a good video! Thanks Jack

[@allanpalomares7574]

Do you have sample that does not use typescript? Every sample I see are using typescript that makes me more confused

[@jackh3242]

Underrated channel

[@shlomomoller7440]

Can you please make an example where adding and setting a todo use an async atom?

[@alextonev4145]

I am confusion

[@gokulram423]

How can access the jotai state in Axios interceptor

[@jherr]

Jotai state appears to only be accessible within the jotai atom get/set functions or in the React component context. So I would set an external value in the atom set function and then use that value in Axios. I'm assuming you are storing the JWT in an atom.

[@armandsalle8447]

React + TS + atomic design (atoms, molecules, organisms, templates, pages etc..) + Jotai = ❤️❤️❤️