Introduction to React Recoil (Experimental) State Management

[@chengjinfei8139]

better than context.

[@rodolphobravo298]

You are the best!! Thank you so much for sharing your knowledge!!

[@leighhalliday]

Thank you Rodolpho! Glad you enjoyed the video!! I have another one on the way later this week that I'm going to record right now, also about Recoil.

[@liu-river]

Thanks Leigh, you always explain things so well in your videos. Recoil seems very easy to grasp, way more comprehensive than Redux and less code than Context.

[@Norfeldt]

I did enjoy this video (as well as many of your other great ones). I have been using the react Context for quite some time now and couldn't stop thinking that the same could be archived by having a lot of different contexts and then make one provider that provides them all at the root of the app.

[@leighhalliday]

Thank you :) I think that works when you know how many providers you need... if it is unknown/dynamic, would be hard to get right!

[@larube]

Geat ! Muchas Gracias Leigh !

[@leighhalliday]

Con mucho gusto, Amador!

[@eduardohidalgo5260]

Pls continue this series about Recoil! I Really want to see how you use Recoil.js as persisting layer, and how you integrate with fetch and state of component lifecycle (: I love your content!

[@leighhalliday]

Thanks for the ideas Eduardo! I'm doing another video right now doing some experimenting with draggable squares that calculate dynamic bounding boxes... hopefully it'll be cool 😎

[@eduardohidalgo5260]

@@leighhalliday i'll be waiting for ✌️

[@landonschlangen]

Wow, Recoil seems amazing! Way better than Redux.

[@leighhalliday]

I agree, but I pretty much like everything more than Redux haha. Some things just click better for me than others, and Recoil is definitely one of those.

[@fernando9206]

You won a subscriber, good content

[@leighhalliday]

Excellent! Happy to have you on board, Fernando!

[@frozenplatina7652]

Nice guide man, btw is that One Monokai theme I see? ;D

[@leighhalliday]

You see correctly :)

[@marcodalborgo]

Great video!

[@leighhalliday]

Thank you Marco!

[@ridl27]

ty. looks like Recoil is really pretty good tool.

[@leighhalliday]

I enjoyed putting the videos together! Give it a try!

[@Daniel-wx9wz]

Great video! Have you tried Zustand by any chance?

[@leighhalliday]

I haven't :D Another thing to add to my list! Thanks for sharing!

[@lakmalp]

A very informative video. Please do keep them coming. A question popped to my mind right now is how it would be like to manage form data with dozens of input fields. Should I create an atom for each input or should I have a single atom with all the data in it?

[@leighhalliday]

Hey Lakmal! Great question... honestly for large forms I would look to use something like react-hook-form. Specific to your question, I'm honestly not sure :D I would choose whichever way you prefer, and only worry if you run into any performance issues. I always favour the develop first, and only worry about performance if it becomes an issue.

[@lakmalp]

@@leighhalliday Thanks for the reply and looking forward to see quality content like this in the future 🙂

[@harshuuu1852]

After reloading the page, atom's state value becomes to it's default value, not what we had changed.

[@ms77grz]

🌶🌶===👍👍

[@lord4791]

I dont understand why did we use selector instead of useRecoilValue of the atom directly? Wouldnt that do the same job?

[@shezzor]

Looks interesting. I know this is just an introduction to Recoil but I suppose if you are going to build such a simple low-frequency state change app, it's probably better to just stick with Context.

[@leighhalliday]

You're probably right, but it has a pretty nice feel to it... I almost prefer it over having to create my own context provider! I have another video coming this week that shows a higher frequency state change app.

[@oscarah317]

Nice intro to Recoil, could you tell which is the plugin you use for the emoticons and which is the extension to see the renderings? Thanks for sharing knowledge.

[@leighhalliday]

Hey Oscar! I think it's just whatever comes by default on the mac.

[@oscarah317]

Windows guy here 😂😂😂, I'll see if there's some plugin, waiting for the next video, enjoy the "mate" 👍🏼

[@PeterKellner99]

Curios why you need object.entries. Can’t you iterate over the JavaScript array directly?

[@leighhalliday]

Hey Peter! If it's object.entries, that looks like I'm iterating over an object, not an array... I think I stored things in an object in this video... can't remember though :D

[@les2997]

Better than MobX? Do you have an opinion after working with both?

[@leighhalliday]

Better is subjective... I guess it depends on what you prefer and your use-case. I love MobX too!

[@les2997]

@@leighhalliday MobX clones objects when it creates observables and then clones them again by calling toJS. Recoil doesn't clone objects. I like MobX, but I'm a little bothered by the cloning part.

[@garikdjan6266]

It seems to me that this is not a completely correct example. Why is the entire list constantly redrawn? After all, we change the state of one item in the list with the add button. Perhaps every element must be an atom. Or somehow get through the key selector...

[@leighhalliday]

Hey Garik! I think you're right, here's another example I did where I split things up into individual atoms to solve this issue: kzbin.info/www/bejne/n5DOaKJ8mL16bMk

[@berlino5563]

But can i work in production with recoil? What do you think?

[@leighhalliday]

If you consider yourself an adventurous person, yes. But it may change in the future so prepare to refactor some of your code.

[@berlino5563]

Leigh Halliday oh I agree :) thank you for your videos!

[@OussamaBouguerne]

What about RecoilRoot? What is it used for ?

[@leighhalliday]

It's acting as a "Context Provider"... similar to how you need a provider with useContext, MobX, Redux, Apollo, etc... something high level in the component tree that can share context (our state) with the rest of the components below.

[@OussamaBouguerne]

@@leighhalliday That's what I thought, thanks for replying to my comment and confirming my suspicion. Keep up the good work!

[@cizixap129]

Recoil good for data reading, but developers are still trying to figure out the API for update

[@leighhalliday]

Have you tried it on any apps yet? I've just been playing around with it this weekend, so nothing serious yet.

[@seanknowles5309]

how do you get the spicy pepper lol

[@leighhalliday]

Haha this one? 🌶 It's just an emoji on the mac. ctrl + option + space to bring up the menu

[@PS-dp8yg]

Sweet! I don't like Redux, and I don't like Mobx. This seems a better option when it is ready. At my job, we use both redux and mobx in the same project. We used Redux for our global state, and we use Mobx as if it is local state. We only use Mobx for our forms since our forms are too complex. Biggest mistake ever was to use redux-form for our forms.

[@leighhalliday]

Hehe... yea I find a lot of Redux/MobX is just preference eh? I'm a big fan of react-hook-form for managing forms... but Formik is awesome too!

[@PS-dp8yg]

@@leighhalliday We looked into those, but nothing worked for our scenario. Our forms are way too complex for those libraries, so we decided to use just local state for our new forms.

[@whitetommy5559]

This may replace the react state!!

[@leighhalliday]

I don't think it would need to replace local component state, but it is an option to replace sharing state via context providers, mobx, redux, etc... the "global state" parts of your app.

[@hansschenker]

If you use Typescript for static typing you don't get the error: NaN!!!

[@ГенаПетров-н5ы]

Get NaN, use TS

[@leighhalliday]

I love TS, but generally avoid it for videos because it adds some extra complexity when explaining a new concept. You're right, here it woulda saved me :)

[@aramisCC10]

Great video!!!

[@leighhalliday]

Thank you Aramis!