Intro to Recoil - A great new Redux alternative? | Tutorial Video

YouTube generated these captions and sometimes gets names, punctuation, and code wrong. Check the recording if something reads oddly.

0:00 — hi folks today I want to take a look at an estate management library for react that I think has a lot of promise and it's called recoil by the end of this video you'll be able to get up and running with it and use it in your own project now there are a bunch of existing state management solutions out there such as redux and mob x but these submissions can require a lot of boilerplate or have a steep learning curve that's why I prefer to just use a regular old react state and context for my apps in fact the last time I used

0:30 — redux in a project was almost a year ago but react state has its limits and recoil was released a few weeks ago as an experimental library that aims to address those use cases that react itself consult and the main difference between recoil and existing solutions is that it's incredibly simple and it feels like you just write in react so let's dive into learning recoil by building a simple to-do list app the link to the github repo is in the description below

1:00 — if you want to clone it and follow along also if you like this video and want to see more please be sure to follow me on twitter at shark codes so we have this to-do list app called task hero we have all of the UI built alta ready we have a nice logo and some tasks just hard-coded in for now we also have an input to add tasks we can type a new task press enter and our new task will be logged to the console we also have some useful stats up here so the tasks that

1:32 — were completed and the number of tasks remaining and finally we have a dog mode switch of course all of this is hard-coded and our job now is to make it interactive and useful by adding some state so let's start by a heading over to our terminal and adding a recoil now that we have recoil added its head over to our index file of our app an importer equal route and now let's wrap the whole app in a recoil read component there's only one or equal root component per app

2:03 — and everything within recoil all of the state exists under this one are equal route provider next we'll hook up our dark mode switch so head over to our header file and to hook up our dark mode switch we will use an atom so let's import atom from R equal so we're going to call our atom dark mode state and we will give it a key say dark mode for the key and the default value I'm going to say true so to get

2:35 — and set our dark mode state atom we're going to use a use recoil State hook which we're going to import from recoil so let's import that and the user equal state hook worked very similar to your react own use state and you can see we currently have a new state that makes our swipe staple but we can actually just swap it out for a user equal state but instead of passing in a default value over here which is what you would do with you state we pass in the atom

3:05 — that we want to get in set and now you can see that our switch still works next let's export this atom and now let's head over to our app file and in our app file we have this theme provider where we can pass in dark mode true or dark mode false and you can see if I pass in false it renders out this lie to you I so we want to get the value of our atom that we set earlier and we want to pass it in here so we can do that by importing our atom

3:35 — so let's import it from header we called it dark mode state let's bring that in so now we can import another hook from recoil called a news recoil value so let's create a variable called dark mode and use our news or equal value hook and pass in our dark mode state atom and now this dark mode value over here is going to be the value of our atom and you'll notice here that we're using a user equal value hook instead of a user equal

4:06 — state hook and you can see here that the user equal state hook gives you the value of the atom but it also gives you a set of function that allows you to set the atom but if you just need the value but you can just use the user recoiled value hook which is what we do here and now you can see our dark mode is hooked up and now we have very simple shared state thanks to recoil next let's store our list of tasks so we're gonna head over to our tasks file and we're going to use an atom again

4:36 — so let's import Adam from recoil and we're going to create a new atom let's call this tasks state and let's say that he's just going to be tasks and the default value will just be an empty array now this is going to store an array of task IDs for us so I just need to tell typescript that it's going to be an array of numbers so let's import a user equal value hook and we're going to

5:07 — say tasks is equal to user equal value and pass in our item and here we're going to get the array of task IDs meaning we can map over it and just to keep react happy we need to pass in a key as well and let's pass in the idea of the task to the task component so of course because our default value for tasks is an empty array we don't have any tasks so let's deal with actually inserting some so let's head over to our input component and when we press ENTER

5:38 — we want to insert a new task so let's import the user equals data and what we want to do here is insert a new task ID when you insert a new task and one thing we forgot to do is export our task state from our tasks component so let's head back and do that quickly so it's exported here and head back to our input and now we can import from our tasks component we import our tasks state and now we can use our user equal

6:12 — State hook and pass in our task state so now when we insert a new task we're going to set tasks and spread in the current value tasks but then also add a new ID which is just one higher than the current ID so for that I'll just say tasks dot length so that's going to give us a very simple auto increment numerical ID and now when we add any tasks you can see that

6:42 — the task is inserted but you can see that we don't actually have a label hooked up to our target so somehow we need to get the label that we type into this input and store it somewhere so that we can display it for the task so let's head over to our task component to solve this and for this we're going to use an item family so let's import add some family from recoil and now we're going to create a new atom family so let's say task state so singular and

7:17 — create a new item family and the key is going to be task and the default value for this will be an object with an empty label and a complete value of false and now in our task component we want to display the label of a specific task and whether it's complete or not so let's import user equal value and now we can say task is equal to neither equal value and part in our atom family but because

7:47 — it's an atom family we pass in the ID of the task that we want to get the value for so you can think of an atom family as being a function that returns an atom for a specific item so if we have multiple items like tasks that are all grouped together the atom family allows us to store each task in its own atom and we can refer back to that same atom using the same task ID and here we have our label and our complete value for that task so we can just destructor it

8:18 — over here so let's say complete and label and we can remove our placeholders now if we insert a new task you can see that it's inserted but we inserted with the default value which is a blank label so let's head back to our input components rectify this so what we want to do is when we insert a new task we want to set the value of that specific atom to contain the label that we insert yet it import our task State so here we

8:51 — will have tasks and set tasks and then we can pass in our atom family but we also need to pass in the ID of our task but when we're inserting a task we'll only know what the idea of the new task is over here we won't note up here in the render method so this isn't going to work for us but there is a different solution so let's import user equal call back from

9:22 — recoil and let's create a new function here called insert task and use user equal call back and let's parse a function into that and return a function from that and our function is going to take in a label which will be a string and if I hover over insert ICO you can see that the type signature of our insert task function is the same as the type signature of this function and that's because the function that we

9:53 — returned here is the function that's called when we call insert task and the user equal call back gives us a handy set function which we can use to set atom values so let's do that firstly let's move our set tasks call from down here and move it into I'll use recoil call back and instead of calling step tasks we can call set and pass in button now we want to set as the first argument and the value as the second and

10:23 — just to make it a little bit clearer let extract out the new ID of our task into a variable so let's say new task ID is equal to task Stockman's and passing new task ID into our array of tasks next we can call set task state and pass in our new task ID and this gives us the item for our new task and as the second argument here we can pass

10:54 — in label which will just be the label that is passed in over here and we will say complete is false and now we can call our insert task function down here and pass in our label and now when we insert a task you can see that our task is inserted into the task state array and we get the aten file new task set the label and it gets

11:24 — displayed here and now if we head over to our task component we can also hook up the check box so let's turn this user equal value into a user equal state because we're going to be setting our Ataman up let's bring in set task and now in our unclick we can call set task and we're going to make sure we set the label to be the same as it was but our complete value is going to be the opposite of our current complete value so now if we insert a task and we check

11:57 — it we get to toggle whether it's complete or not so now that we're familiar with atoms let's take a look at how we can use selectors to hook up our stats over here so let's import selector from recoil and we're going to create a new selector that will count the number of tasks that are complete so let's call it tasks complete state and create a selector and

12:27 — for the selector we can also pass in a key so let's say tasks complete and we also pass a get function into our selector and for now let's just return the number 0 from our get function and now let's import user equal value and let's create a variable called tasks complete and use the user equal value hook and pass in our selector and now if we pass in our tasks complete value to

12:59 — our stat you can see that the value returned by our get function over here is displayed here and this shows that you can pass either an atom or a selector into user equal value or into user equal state next let the structure the gate function that the selector provides us analysts get an array about task IDs so let's say task IDs is equal to get and pass in our passive state atom and let's make sure we had imported our task state

13:31 — and now if you open up the console you can see that we get an empty array but if we insert a new task we get an array with one task ID and so on and so forth next we want to get all of our tasks and to do this we can map over our task our needs and for each task ID we can call get again but this time we're going to get each of our individual task atoms so

14:01 — let's import those and then we just pass in the ID about tasks to the atom family to get our individual atoms and now if I log out our tasks you can see here we get an empty array again and each time I insert a new task or one of the task exchanges our selector reruns and we get an array of tasks next we can filter out tasks array to only get the complete tasks and just get the length of that

14:33 — array and now if we insert a few tasks and we mark them as complete you can see that our tasks complete value updates automatically so if any atom that you get within a selector changes the selector will rerun automatically so you can see I've just done the same here for our remaining tasks that I've just inverted the condition okay and now as we insert tasks you can see our task remaining value taking up and as I take

15:03 — the tasks you can see the tasks complete study increasing or all the tasks remaining that you decrease it and that is how you can build a simple derive state using recoil I think recoils react like feel and elegant simplicity but still powerful features make it a great contender to existing solutions it is still experimental but it'll hopefully be ready for us all to use in production real soon so in summary we've learned how we can use R equals atoms to store

15:34 — state and share it across components and how we can use selectors to derive other states at ease from our atoms there's so much more to recoil than this though and if people find this video helpful I'll be posting another one soon covering the more advanced features of recoil such as state persistence asynchronous data fetching react suspense compatibility snapshots dev tools and more so if you found it useful and would like to see more please be sure to give the video a like and follow me at sharp codes on Twitter or subscribe to my channel to

16:04 — stay updated also please leave any questions you have in the comments below or mention me on Twitter I'd be more than happy to answer them this is my first video and I'd love to create more if people find these videos useful and like I said if you did please give it a like and subscribe Cheers