Recoil Tutorial | React State Libraries

facebook's most famous contribution to the open source community is of course react but it's not the only library that they have if you look at their github repository you'll see that they have a whopping 114 repos including the jest testing library flow for adding static typing to javascript draft.js which is a text editor framework and of course prop types for react beyond that facebook also has a separate repo called facebook experimental which they describe as facebook projects that are not necessarily used in production but are being developed in the open nevertheless one of the libraries published by facebook experimental that's getting some attention recently is recoil recoil is a simple state management library for react apps and it can be used in a similar way to how you would use context now in the last video i discussed state and react and we took a look at context and the use context took so if you haven't watched that video yet i'll link to it in the description for you they say recoil is not yet recommended for use in production apps but we've been using it at work since late last year and i'm using it in my own sas project without any issues so before we dig in just reminder that if you like these videos please hit the like button and also subscribe to my channel it'll help other people discover my videos and also help the channel get off the ground all right let's take a look so for this demonstration of recoil we're going to use the same demo app that i used in last week's tutorial which was for context so you can see we have a business name with an input anytime i change the text inside a business name it's going to change the title up here and it's going to change the footer below so the first thing we need to do is we'll take a look at the recoil docs i'm going to copy yarn add recoil paste that into the terminal and that's not installed recoil so i'll just check package.json and you can see here we now have recoil installed okay so the first thing we need to do is we need to import recoil route so if you have a look at app.js here you can see that we have businessnamecontext.provider so this recoil route will go in the same place where we have this business name context provider so i'm going to start off by doing import recoil route from recoil and i'm going to inside of this i'm going to wrap homepage in recoil route and we're going to save that now the next thing we need to do is we need to create an atom so as you can see here an atom represents a piece of state and atoms can be read from and written to from any component components that read the value of an atom are implicitly subscribed to that atom so any atom updates will result in a re-render of all components subscribed to that atom so this is how you create an atom so what i'm going to do is i'm going to create a separate file and i'm going to call it atoms and it's a javascript file and i'm going to import atom from recoil i'm going to call this business name state and then inside of it i'm going to give it a key which as you can see in the dock they take the name of the atom and they use that for the key this must be a unique id nowhere else in your application should you create a second text state or in our case business name state so they must be unique to the application so i'm going to give it a key of business name state and i want to give it a default value now as you can see the default value is the initial value of that state for us we're going to give it an initial value of dunder mifflin and what i'm going to do is i'm going to export that from this file okay now i'm going to go into the home page and you can see here we're using contacts at the moment to set the business name and to read the business name so we're going to change that from using context to using recoil so if i go into api reference and click on state what i'm looking for here is use recoil state so if i go into the home page i'm going to import use recoil state from recoil and i want to import the atom that i just created so i'm going to do import business name state from atoms and thank you vs code and use recoil state looks almost exactly the same as reacts use statehook so i'm going to do const business name set business name and instead of use state i'm going to do use recoil state and i need to pass in the atom as that first argument so business name state what i can do here is now delete this and i'm going to delete this because we're not using it anymore if i give that a save go back to the application give it a refresh just to show you that everything's cleared and using the default values and you can see we still have dunder mifflin here we still have dunder mifflin here we still have done a mifflin here now the title and the footer are currently being used by context but this value here is now being used by recoil so if i change this you can see that these aren't being updated because like i said they're using context but this is working now so if i'm going to go back so i'll go back to the title and what i'll do is i'll pass in business name equals business name and i need to make sure that we have the prop in this title component and we don't want to use contacts anymore and you can see now the title is updated so that's reflected from the value that we're passing down which we're setting inside of recoil state and if i go to the footer instead of passing the prop down i'm going to do the same thing i do in home page i'm going to do the same thing that i do inside home page except this time i don't need to set the state value here all i need to do is read it so i could theoretically still use recoil state and only destructure business name but according to the recoil docs what i should actually be doing is using their hook use recoil value so what i'll do in footer is i will import use recoil value from recoil i'm going to delete this instead i'm going to import business name state from atoms and i'm going to use recoil value pass in business name state and i'm not destructuring anything because what it's doing is it's returning the value directly so it's not returning an object it's not returning an array it's returning the actual business name so i save that now we'll go back to the app you can see now that the footer has the value that i have in state so if i was to fill this out both the the title which is taking it as a prop and the footer which is reading it from recall estate are working now if we have a look at the the docs here regarding state we have a few other hooks that we can use so i would advise you to read through the docs there but we've already demonstrated user recall state we've demonstrated use recall value we have used set recoil state which as you can imagine is just the setter so what that does is it returns the setter function so here's an example you take the atom and we have down here we pass the atom into use set recall state and that gives you the setter so that's useful if you have a component where you only need to set the value in state as opposed to actually reading it and setting it we'll go to the next one use reset recoil state and what that does is it will reset the state to the default value which you might remember we've set inside of the atom there are a few other hooks here as well you use recall state loadable use recall value loadable these are a little bit more complex and i would encourage you to have a look at the documentation as far as a simple setting and getting of state these are the hooks that you're going to use now if we go back into the basic tutorial and have a look at selectors you can see here it says a selector represents a piece of derived state okay so we'll have a look down here and it gives us an example of how you might use a selector so the selector will take existing items inside of a recoil state and then perform whatever calculation you require on that value and return that derived piece of state so in this case in this example what we're seeing here is we're creating a new item of state using a selector we're calling it filtered to-do list state so we're giving that the same key and then there's this get function which we then use to get to-do list filter state and to-do list state okay so we have the filter and we have the list here and then what it's going to do is it's going to filter the list based on this filter value and return a derived piece of state and finally if you watch my contacts video you'll see that we created a custom hook called use business name context i can do exactly the same thing with recoil i can create a hook called use business name and in here i'm going to do import use recoil states which is here from recoil i'm going to import the atom business name state from atoms i'm going to do use business name and then i'm going to export that as default what i'm going to do is i'm going to copy this code from the app component paste it in there and then i'm simply going to return business name and set business name now i can return this in an array as well if i want but because we're only using business name and set business name there's no need to give me the ability to rename these when i'm be structuring so i'm just for simplicity just going to return an object at which point i can destructure business name and set business name and keep them named the same way so now we go back in the home page and instead of importing the atom i'm going to import my hook use business name from use business name delete that use business name and this of course is an object to import it twice and i'm also done to import this so here it's just simplified again because i just need to import the hook and then use the hook here below and you can see that the app still works as expected it's using the default value of dunder mifflin and everything still works title input and footer all still work

Channel: Ian Lenehan

Views: 376

Keywords: react context, react state management, react state management 2021, react state management without redux, recoil js tutorial, recoil js react, javascript tutorial, facebook, web development, frontend

Id: jsp4h0ZQsbw

Length: 11min 12sec (672 seconds)

Published: Thu Sep 30 2021