React Recoil / Recoil js - All you need to know | React tutorial

[@ClosureWebDevMore]

How do you like Recoil so far? Do you think it could fully replace Redux one day? 🤔

[@deusex8576]

When multiple users work simultaneously with one document (like google docs), I think it's easier to use redux to stream actions through middlewares. How to send deltas with recoil?

[@aaronely759]

@@deusex8576 Ive had luck with using websockets to transmit events that get filtered through a switch statement by event id to perform the necessary recoil state operations and broadcast the changes to all connected users if necessary-- or not depending on the event. But I suppose there are limitations to this, and it may not apply in your case.

[@aaronely759]

So far I really enjoy using Recoil and don't plan on using an alternative unless I ABSOLUTELY have to.

[@solomonogbodo4163]

This is the most descriptive recoil tutorial I had ever seen. Thanks a lot.

[@ClosureWebDevMore]

Thank you so much :)

[@elephant_888]

@solomon ogbodo - I second that opinion. Much better examples than the ones in the docs! 👌🏽👍🏽

[@showingsoftwarebugs5963]

Thanks. I was watching a previous video and they only showed atoms and it immediately gave me a bad first impression for the exact reason you showed at 4:42. Thanks for including the selectors in this tutorial.

[@DEVDerr]

Woaw, it's much better tutorial than Recoil's author presentation itself. Good job mate!

[@icfantv]

Kudos for specifically calling out the use of `useRecoilValue` and `useSetRecoilState`. I think it bears mentioning that, per the docs, the latter is recommended for components who intend to write to state without reading it because using this particular hook will prevent the component from subscribing to updates for that particular piece of state (which will prevent unnecessary renders).

[@kroloskar]

Thank you for great tutorial! Would be nice if you made one with all the advanced features...

[@6little6fang6]

This is video right here, amazing.

[@gwapster13]

This is an excellent walkthrough of what Recoil can do. Bravo. As for it replacing Redux, mobX, etc... I don't think so. While it's rather effective at solving specific problems, it doesn't necessarily cover everything that all those other popular state management libs excel at doing. So really it just gives us additional choice, depending on the specific needs/application.

[@ClosureWebDevMore]

Thank you for the kind words, Arnel! And I have to agree with you on that. At the moment , Recoil looks more like an alternative rather than a competitor. What’s interesting to me is where will Recoil be in a year or so! I think the team could easily make it a solid choice for small-mid scale projects. We’ll see!

[@RabeeRaad]

Wow, very helpful. Thanks for sharing.

[@ClosureWebDevMore]

I'm glad you liked it! :)

[@TehLostGamers]

Great video! Thank you. Recoil seems like a fast way for state management but it might get messy in big projects.

[@noahsigel3529]

Great video

[@musaid]

Awesome tutorial. Thanks.

[@Nyasha_Nziboi]

cheers for sharing

[@UIGems]

really helpful! Subd! expecting more vdos

[@madebydor]

Really great tutorial, thanks a lot. I fell in love with Recoil! Quick question - assuming I'm loading a list of articles using `useRecoilValueLoadable`, how can I fetch the articles again from the server? Right now, it only fetches it the first time the component was loaded, and then pulls the data from the state.

[@jamesjohnson5386]

switch actually makes sense

[@ClosureWebDevMore]

It does make sense, I agree on that. It just gives me Redux vibes with a 10-condition switch-case in a reducer. This is not critical, since other options are available, but it could have been better, in my opinion

[@SuperAdilMorocco]

nice video ever

[@dijup]

while fetching data from server can we use react-query to get the data

[@ideologic3407]

How do I prevent elements from rerendering if the recoil state of the atom is changed?

[@muneugi3900]

Hi requesting for a refresher on Recoil in 2022 together with use cases

[@dijup]

can we use react query to fetch the data

[@TheDorac1]

Here we are, a few years later, and it seems to be abandoned.

[@connygu]

Hi Thanks, a really great tutorial about recoil, short but very clear! I will try recoil now! 👍

[@ClosureWebDevMore]

I’m glad you liked it! :) Definitely try this out, so much fun

[@connygu]

Hi I just learned your example, everything works smoothly. Until there is a last problem. I found that if you async load one article, it will fetch the data 4 times during "loading" state. I made a sandbox code example and changed the code a little, so it will print the fetched data in console: codesandbox.io/s/recoil-loading-problem-ebmc4?file=/src/ArticleList/ArticleList.component.js Can you take a look? After running the page, just watch the console. It will show you 4 times fetched data. Do you know why?

[@ClosureWebDevMore]

Hey Conny! This has to do with the React core itself. If you try defining a regular useState hook, you will see that the component renders twice. And if the application is wrapped inside of component (which is the case for this tutorial, check index.js file), React triggers every re-render twice to help catch bugs. So it's 2 re-renders per hook multiplied by two due to Strict Mode and 4 in total! Don't worry, this is the expected behavior! :)

[@codingamer373]

is Recoil a compatible choice for a Next 13 project?

[@Timur21]

i dont understand how I would update an article for example.. Like an async set that would first update an article and then fetch them all again.

[@ms77grz]

👍👍

[@walkawelk]

in recoil-tutorial/src/shared/ globalState is missing

[@ClosureWebDevMore]

Totally missed that. Thanks for letting me know, fixed now!

[@milansingh3222]

Can we use along with redux where we have functional component?

[@ClosureWebDevMore]

I haven’t tried that, but it should work fine

[@creative-commons-videos]

what about mutation ? onclick i want to send post request on server

[@nhathuynguyen716]

Do you think context api + recoil can beat redux ?

[@ClosureWebDevMore]

I wouldn’t combine Recoil and Context API, because they do the same thing. As for Redux, I believe that Recoil has the potential to be the go-to solution for small/mid projects, but for large Redux is probably going to be the king still. Mainly because Redux is an industry standard and a proven library. Recoil is just way too new for that (at least for year 2020)

[@nhathuynguyen716]

@@ClosureWebDevMore Hey thanks for the detailed answer! Probably using Recoil over Context Api :)

[@Jackchen-qr7hq]

redux won't re-render whole Dom tree...

[@ClosureWebDevMore]

It won’t do that by itself, but if the redux state has changed and a component was listening to the changed property, all of that component’s children are being re-rendered. PureComponent fixes that, but on the surface Recoil is much efficient at preventing unnecessary re-renders

[@amobism]

@@ClosureWebDevMore So if we have component A, that has some children. And A uses redux state through a useSelector hook. If the state changes then component A must re-render and then react will also render all its children unless they are PureComponents or uses React.memo. But if we change component A to use recoil instead and the atom containing the state that component A subscribes to changes. Component A must also re-render but for "magic" reasons, the children will now not re-render? That sounds, magical.