 Hi everyone, I'm making today's video about react global state management. So I've been a little annoyed recently at how much a boilerplate code it takes to just share a global state variable among different components in react. Sometimes I just, I don't ask for much. I don't need a bunch of complex functionality that Redux provides and I don't want to have to use reducers or react contacts. A new tool came under my radar in a very timely manner and I thought I'd make a video to share this with you guys and it's called Jotai. And Jotai is a really pleasant tool to work with when it comes to managing global state in your react because it introduces little to no boilerplate code and it's just such a pleasure to work with. If you have experience with Redux and you know, and you have experience with creating reducers and making context providers in react and doing prop drilling a couple of layers, nested layers, passing props to children of children of children in react you, you'll come to appreciate how simple Jotai is in terms of syntax. So here I have a very simple to-do list and I'm going to show you the code, right? So for the code I have app.js which is where everything happens. This is typically where you would have the state variable in the parent component and then you would pass the to-dos and set to-dos function to the children of this component. And then I have two children components. I have the list component which is basically just this list that you see here and then I have another component which is the text field component which is responsible for this top part here that has the input field and the add button. So let's see how we would use Jotai in this application in this scenario. I'm going to get rid of the state variables here because we don't need them anymore. Instead, I'm going to go to my source folder. I'm going to create a lib folder and have an adam.js file in it. It can be any name. The file can have any name. It doesn't even have to be in the lib folder but it's just the way I chose to structure my program. So in the adam.js file, I'm going to just import a function called adam from Jotai. And with this function, I can create a new adam variable. So I'm going to const, let's say to do adam equals to adam. So this is basically creating a new global variable. Adams in Jotai is equal to global variables in React. So I've just created a new global variable here and I initialize this variable with the value of an empty list. I'm also going to export this variable because I will be using this in other files and other components. And believe it or not, that's all that we had to do in this adam.js file. We can move on to the text field component now. So I'm just going to show you what the text field component looks like. It's this add button and the input field here. So basically what this code is doing right now is I have a button here that calls the handle add function when I click on it. And the handle add function does nothing but logs the current value from the input to the console. I'll show you an example. So I'll just say hello there. Let's click on add and you see that the console prints hello there. So that's working as expected. And this last line, the handle add function basically just clears out the value from the input from the input field. So it just empties the value after we're done with it. So it resets the input field. All right. So now let's try and implement our joe tie adam in this component. So the first thing we'll import is the use to, actually it's to do adam. Yeah. Let's import to do adam from the file that we've just created. So I'm importing this to do adam variable. And once I have that, I'm going to also import use adam from joe tie. So this use adam from joe tie, it's kind of like use date in react. And basically the way you use it is you come down here, you create to do, set to do equals to use adam and we pass in to do adam into the argument. So basically you can see how similar it is to the use date hook in react. It's pretty much the exact same thing. You have like the state variable and then you have the setter method and the setter function here. Can we all just take a moment and appreciate how clean this syntax looks compared to other solutions that we may have? So at this point, I'm pretty sure you're already familiar with how to use functions like these because it's just the same as use date. It's so intuitive. I can just do set to do's and I'll just get an old to do item, I'll use the spread operator here. Actually, it should be a list and let's use a spread operator and we'll spread out the old to do items and then you will add a new item to the list and we're getting the value from the input ref. And then once we're done with that, I'm just going to go out here and let's console log to do's for now so that we can see if it's working or not. Let's go back to app, refresh it, test one. You can see that it's printing array length of zero now. If I click on add, you see that array length of one and it says test one. Let's add another string, let's say test two and you see that test two is appended to the end of that array. So it's so simple. Now that that's done, I'm just going to take this line here, copy it. I'm going to go to my other component, which is the list component and literally paste it in here. I'll also just have to import use Adam again from Jotai. So I have the exact same code here and instead of just hard coding a single text element here, I'm just going to use to do's dot map and then map out for each to do item. Let's return a text element and because we're in react, we have to of course pass in the key. I'll just use math not random. This is not ideal. So just try not to use math at random for simplicity sake. I'm just going to just keep it at that. And then as a text, I'm going to do to do the to do itself. Yep. And see if it works. It's going to give me error to do Adam is not defined. Of course we have to import to do Adam as well. So that's the Adam that we're exporting from this file here. I'm going to go and copy the import statement. Put it in here as well and let's see. So it's empty for now. I can say watch. Let's do that and see that it's added. We can say do the dishes. It's going to add it to the bottom and it's working perfectly. Now before we call it a day, I'm just going to show you one additional utility and we can get off Jotai. So look what happens when I refresh the page. We lose all of our state. But what we can do is we can go to our Adam file here and instead of importing Adam from Jotai, we can import Adam with storage and we import Adam with storage from Jotai slash details. And then here instead of calling Adam, we call Adam with storage and then we pass in the initialization value and we also have to pass in a key, we can say to do or to do. It's basically just a string. It can be anything that you set it to be and then once we do this, let's go and try this out. I'm going to say this should persist and I'm going to do add. I'm going to go and close that page up and let's re-open the page and it does not work. So that was a mistake on my part because I completely forgot that I had this Firefox extension that clears out local storage and all of the cache when I create a new tab. It's called Firefox Containers and it's for privacy reasons. I have that extension up. So instead of doing that, I'll just open up a private Firefox window and I'll just go back to our app here. So we can just do test one, add test two, then we can open a new tab, we go to localhost 3000 again and we can clearly see that our state persists. So that's really neat, huh? Jotai can not only manage global state variables, you can also do local storage and it makes our lives that much easier. Now before you go, I'm going to show you one last thing you can do to optimize re-renders in Jotai. So in my text field code here, I have a console log statement here to indicate that the text field re-rendered every time this field component gets rendered. So here in my console, you can see that text field is rendered four times and when I say do the dish as the text field, I click on add, the text render statement is printed six times. So two additional re-renders from just this one action. But that's really inefficient because technically this add, this input field component shouldn't even have to re-render every time we add a new component. Only this bottom component, this display component should have to re-render and not the input component up here. So what we can do is instead of using use-adm, we'll use the use-set-adm function from Jotai instead and we'll replace the use-adm hook using use-set-adm instead. And you see that we don't even need to use the to-do state variable in this component. We're only writing to the global state, we're not reading from it. That's why we can completely just get rid of that and we can just do it this way using the use-set-adm function instead. So doing this, if I refresh the page, I can say test one. You see a text field re-rendered is only twice and I'll click on add, you see that the text field does not re-render at all, it remains that twice. Yeah, that's pretty much about everything that I want to share about Jotai. This was a pretty light video and yeah, I'm really sorry that it's been so long since I've posted anything. The truth is that I've been working on a really big project and I actually made a completely separate video for it and it's been taking up a lot of time but now I don't even know if I just want to post it because it's a really garbage trash video. So it's on my channel but it's a private video so I don't know what you guys think. Should I post it?