Global State Management with Zustand in React Native | DEVember Day 17

what's up not just developers welcome back to a new live stream today uh is day 17 of demember our month-long marathon of re native tutorials the topic of today's video is going to be managing Global state in Rea native using Zeus Dand so the goal is to get started H install and set up Z and in react native learn about the concepts and how to use this library to manage State at a global level in a react or a react native application so we're going to use that uh for this we're going to use that to do application uh we're going to we have a user interface built in the previous days and we're going to focus on the global state in this video before we get started let me uh remind about the demember our monthlong marathon so every day we're doing a new live tutorial here on YouTube and you'll find all the videos on our Channel if you are on your journey to learn and become a re native developer make sure to subscribe to the channel uh because we do a lot of uh rack native and Expo tutorials here if you have ideas make sure to submit them to our idea board you'll find the link to the description below and I will choose some ideas because we still have 7 days we still have one week for demember and demember is not only about um learning it's also about giving back during November we are uh organizing a fundraiser called education for children and we are um partnering up with a save children organization to support the efforts in providing accessible education to Children worldwide if you are interested you can find we donate now pop up directly here on YouTube and I would be very thankful if you can help with this cause we also have some incentives and I would like to say big thank you to Rogelio Stewart Sagar Val Travis and others who already donated all right guys so shall we shall we get started uh hello everyone who is joining this live I hope that today we didn't uh mess up anything with a live stream because previous two days it was connecting like with a different URL uh but now I see that everything should be nice hello eani hello danil Dana all right guys so let's see our application so here we have it let me make it so you will see it uh the source code you will find in the demember repository also the link is in the description and here I keep track of all the days with SE separate branches so let's actually set up the branch for today together give me just one second to push the day 16 and yesterday we learned about the context for Global State Management EV and today we're going to upgrade this solution to a proper library to manage the global State origin let's do day 16 start not start should have been day6 and all right so now I pushed the uh repository as it is to a branch called day 17 start so after you clone the repository from here you'll have to do get checkout day 17 SL start and we're going to be uh on the same branch and working in the same application so let's have a look at day 16 which was yesterday here we implemented this to-do list application uh using react context we also uh implemented persistence to the data filtering searching uh and so on but the problem is that R context was not designed to manage Global state it was designed to fix the prop drilling issue and to share some State uh or some access to some state to different components directly without having to pass through properties it's a great great solution for data that changes uh rarely such as the theme or some settings of application um and when it comes to to state that changes very often it's a bit um less performant less optimal uh because the whole whenever changes in our react context everything down below will have to render even if the data that changes does not um does not change for a specific component it will be rendered so if we have like very nested and deep trees uh in our application a small change will basically R render everything which will hurt our the performance of application a better approach is to use a global State and let components subscribe to specific data changes and let components reender only when the data that they depend on changes and that's the principle of how zand is working and let's go to their homepage where is it I was impressed by their landing page here look at this beautiful be uh let's go to the documentation and and we're going to start installing it but first let's prepare our project for day 17 what I'm suggesting is to go ahead and duplicate day 16 rename it to day 17 and this way we're going to have a starting point uh an application that manages State using um react context I realize that I'm not sharing the screen but the only thing that I did and I can do it again is back in our application we're going to go to the days and let's duplicate day 16 folder rename it to day 17 and as as I was saying this way we're going to start with a to-do application that uh works with ract context and we're going to have to upgrade to zustand so I'm going to only change a bit here in the index day 17 here a button we'll have to redirect us to day 17 to-do not to the old one uh and go to the to-do now inside the to-do here I think that I'm also going to go into the components and duplicate the components folder for day 16 let's do that here day 17 uh I'm going to go quickly through these components to see if it has anything imported that we don't need okay okay everything looks everything looks okay now back in our application directory for the screens let's open to-do let's start with a underscore layout and fix the Imports because we need to import from day components from day 17 in order to when update them to to see the effect actually and inside the index here as well let's see wherever we see day 16 should be changed to day 17 here as well and we can even do a day 16 search to make sure that we don't import any old components now let's quickly reload the application I'm going to go go uh do a quick overview of the files and what we have have currently and go to the day 17 to-do up with zustand that means that correctly edited here let's go to the to-do and here is going to be the to-do uh we can even change [Music] them the title to to do to make sure that we are actually on that page that uses stand for State Management okay perfect so let's have a quick uh overview of what do we have um the focus of today is on this page so this page is our day 17 to-do folder and it create it's made up of the page which is this index. TSX our index uh has the to-do screen it uses uh it uses where it uses the use tasks hook imported from our tasks context provider so this is what we are going to change where the data is coming from and it renders them in a flat list here below now we have a layout that actually provides the context provider and in the component here we have the components that we need uh together with a context provider the task list item which represents one of these lines and the new task input which represents at the bottom the input that automatically appears as the last item so that's what we have to work with uh and yeah basically we're going to in the starting with the to-do screen we're going to have to change where we get the the tasks and then in different components we also need um functions from the global State like information about the task or functions to delete them update them and so on all right so let's go ahead uh uh at the do for let's go ahead and check the documentation of the stand and I was not sharing the screen so I'm going to share the the landing page once again look at this isn't it pretty all right let's see how easy it is to to integrate um I'm going to jump into the introduction let's go ahead and install the zustand library in our application so I'm going to do a clear and then npm install now what do we have to do we need to create a store and and the story is going to be the place where we have our state and also functions that will update that state so that means that let's think where we're going to create the store probably that's going to be a separate file and we don't create files other screens in our application directory so let's go into the components directory day 17 and here let's create a new file tasks tasks store. TSX in this task store we need to create the store that will contain our tasks let's copy the boiler plate here uh but we actually don't need the the boiler plate we actually simply have to import create function from zand then Define the store which we can actually let's rename this variable to use tasks store and let's export from this file to be able to import it later well we're not going to count burs we're going to have an array of tasks uh an array of tasks and but it's not zero it's an array so yeah that's it that's our store let's have a look how we can use the data for this store in some of our components if we go to day 17 we need the list of tasks inside our to-do screen at the moment we are using this get filter tasks from from our tasks context provider but now we need to use the newly created tasks store to get access to these tasks to do that if I look in the documentation all we have to do is import that use to our function and take access to it so let's go ahead and uh I think we're going to get Auto uh suggestions to Auto Import so I can do tasks equal use tasks store because that's how we called it in our store here and we also exported it um and just like that we can we can maybe take a like store this is store and we can do console log store. tasks if I have a look here in the console we see the empty array that was there just using the used task store this will basically subscribe to changes of every state variable from this store well at this moment yes we have only one state variable later we're going to this state this store is going to grow so we want to basic basically subscribe only to the tasks State uh from our store to do that we provide here a function that will receive the whole state so we can say State and will'll return uh the value from the state that we depend on like state. tasks and the result will already be tasks here so we can console log only with tasks if I go to day 17 go here yes we see them perfect now I think we can take these tasks give them in our flat list and start from here from an empty list of tasks let's go ahead and maybe import the damit tasks to use as the as the initial one so if I'm going to write here dummy tasks it doesn't want to import automatically but it's from this file it's an array of tasks so now right away we have the to do the the damit tasks initially when we load the application perfect let me see if there are any questions hello AR Mo uh hello full stack Pro I started studying rack native with you that's so cool thank you please remember to consider creating an OCR application um did you submit the the idea on the idea board if more people are interested we'll definitely do it what do you think about rtk queries I think great great solution good morning hello Rogelio menta hello from Indonesia hello how to make responsive in react native that's it's a hard question to answer try to to use instead of fixed wi uh relative wi like percentage wise based on the screen and start there then you can use like Max WS uh and then you can also get into um conditionals like checking if the screen is large you can have like multiple columns so it's a lot of custom where is Lucas Lucas is working working at his startup all right guys so let's continue because we just got started we created the stores we initialized the state in the store and we also used it already in our component to render it let's go ahead and do what start with some updates to this state let's have a look at what do we need should we create a function in our store that will give us the filtered t tasks the function will be called get filtered tasks and we can have a look in the tasks context provider how we implemented this get filtered tasks we can copy this function from here because it's going to be similar and let's put it in our task store it's not going to be a const it's going to be a property so let's say get filter tasks double dots and the value is going to be an arrow function uh I don't think we're going to let's see let's see maybe we we jumped too too fast State yes we state it updates the State okay so tasks tasks we are going to get them from uh from the second property here we can also have a getter and using the getter inside the function we can get a list of current tasks const or we can do here get is it State state. tasks. filter and at the end we need a another bracket oh boy wait a second so good this is the first time I'm also using zustand so it's going to be a learning for me as well updating state so to update the first name we call the set okay okay okay okay so yeah maybe maybe we jump to too fast with this filtered uh we'll see how to implement this kind of Getters um another um a better approach is going to be to update something here in tasks because we saw how to get things but how to update them we haven't one of the updates in our context provider is adding a task Let's uh copy this function in our task store and we're going to uh remove the cons from here and replace it with and the key of the object is add task the value is title string here let's import a type task from task context provider maybe we're going to have to move it here but we'll see for the uuid we have to import this library to because when creating new items we are generating a new ID title false and here instead of set tasks we're going to use this Set uh so we can do set in the set we're going to get the the tasks we're going to get the current state and we need to do state DOT tasks new task so that's basically this one and I will not return actually anything so just like that maybe we're going to have to define the the type of this story in a moment but yeah let's see so now we have a function that will receive a title and we'll add to the existing tasks from the state We'll add a new task let's try to import this add task where it's going to be part of our new task input this is the component that is using that we are using to create a new task currently it's working with a context provider but we want to import the add task function I'm going to comment out the previous one from our use T store and again we don't want to take uh to to get access to everything we only want to take uh to get access to the state. add task function now a dusk will be called when we create one with this variable Let's test it if I go here hello enter it's it's not working it's not working let's debug it um let's do here const not const but console log adding new task so if I write here something it's saying that it's adding but it's actually not happening so let me double check how to update things set State and we need to return a yes we need to actually return a new object with a new property so that's my mistake I return an array but I need to return a new state object and the state object this array belong belongs to the tasks property and here I need to close these two now if I do here hello enter it it correctly adds it to the list so the setter that we get uh when creating the store is Will in the setter we need to send a function that will receive all the state and should return a partial dat with the fields that we want to update okay cool uh so this one works add task was migrated that means that from the task input we no longer depend on the tasks context provider I can remove it from here and move to the next part part another thing is uh when clicking on one item we want to set it to uh to set it to checked and un checked let's see in the context provider V function uh this function here is called not add not delete or maybe we should Implement delete first yeah that would be an easier one so let's take take again the whole function move it to our store and change it to to the proper format where the name delete task is going to be a property and the value is going to be a function a function that has to update the the current tasks from State how do we do that we use to update the state we use the set method the set method expects a a callback function where we will receive a whole state and we need to return an updated State the updated state will contain the tasks that will be filtered that would be state. tasks. filter and we'll have we'll look for V ID now I can remove this one uh and yeah delete task let's go ahead inside our task list item here we need the delete task somewhere in the right actions it's using the delete task I'm going to comment it out and I'm going to import the delete task from our use tasks store and we only need access to the state do delete task let's see if it works I'm going to go to 17 if I delete this one it actually works so deleting works and that means that here uh we need the use tasks here right for what all for changes finished changes finished yes that's the next one that we depend on uh and we we need to this is for updating an existing item so let's see the implementation I don't actually see it here change is oh here change is finished let's copy a logic into our store let's remove con and replace this one with dots and ADV then we need a comma Now change is finished we'll receive an ID and we need to update the array of tasks we will do that by calling the set we're going to get access to the existing state and we're going to return a new partial state where tasks is going to be equal to state. tasks Dot and let's see what are we doing here we are mapping over them and updating the one that we are looking for so let's delete this one I hope it works now yeah we also need to import it inside our day 17 task list item in the actual task list item component where we import changes finished from use tasks we are going to switch to changes finished from use task store and we only take EST state. change is finished let's see if it works again the simulator my simulator stops working or my computer lags I don't know what's happening actually heard there was an interest to use mm KV rather than a s storage for performance my question is I'm waiting for a question hello aash uh Akash is saying hi I am Akash I bought your full stack course and learned uh and built and work organ donation application called organ is hope you remember me I'm a cash yes uh you you build application during the hacka phone right impressive hey why my application is stuck let's reload let's run again on iOS do something close open again and let's go to 17 and our updating from the the status should work if I change yes it works correctly nice perfect uh so that means that in task list item we no longer need the used tasks that is coming from cont text we see we don't need this one here and the type task that is coming from Context H we can leave it for a moment we might delete it a bit later we'll give him a bit of time to think about anyway so our task store is already looking good we have a tasks we have functions to update them to delete to change and so on what else what else we still need the search functionalities and the filtering so let's see why we didn't we couldn't Implement that there I'm going to start from scratch and slowly console log and learn about how to do it what we need is no yeah we don't need a Setter we need a getter to work with them and filter it's a a computed um it's a computed property so maybe I can write here computed don't see but what I can do is yeah get filtered tasks let's start let's start by copying it again in our store at the end here I'm going to replace this one to fix our issues and I might comment it out just to to get started let's do a console log Tab and search query and let's import get filters in our screen the screen is the one that Imports get filtered tasks currently it's importing them from use tasks but we are going to move them to I'm going to remove them from here and import them from use tasks store and we're going to only access state. get filter tasks now we're going to call them and we can actually also do console log filtered tasks let's see if I go to 17 go to application we see all undefined all undefine all undefine that's good that means that in our task store uh we console log we conso log with Tab and search query no we can log the the tab and search query here in the first one but and Define is what we return from here if we would return an empty array that we will see in console log so what we need to return is a filter version of our tasks to do that we first need to get the tasks so how do we get them this method get is declar but never used let's look at the documentation of actually I don't see API references get don't think it will work like this can I consume it can we persist or yes we can and we're going to cover that as well uh maybe that should not even be inside the store because that's a m method that can use this store computed State using getter to calculate computer yes that's what I'm looking for oh it's simply calling get. value okay let's try so if I do console log get. tasks what we're going to see as's first go to 17 yeah yeah I think it's correct by simply calling get we get access to the to the whole store maybe we need here to select to to only subscribe to to re um re run this function only when the state. tasks changes will that work I don't know let's see and we need to get them let's do const tasks equal get let's go ahead and do a console or maybe uh return them right away return tasks and not here let's do that at the end and inside index uh in the in the flat list I'm going to switch from tasks to filtered tasks so it still works it it returns all of them it returns all of them and we can now uncommon this logic to see what are we actually doing here return return tasks. filter yeah I think it work it that's supposed to work out of a box yes and as you can see we can move on we can go to all search search only inside 15 for example yes so with that uh that means that we have moved all the functions maybe not all yet but let's see for example this tasks from the store we actually don't need it we only work with filtered ones we still have these two kind of Getters number of completed tasks and number of tasks which in our react context provider there are two values that are derived this is usually called derived state so it all always depends on the state itself and when the state changes the derived value will also change and we have like we are using them in a lot of situations so let's go to our store and I will move them at the top because they will not be functions they will be they will be State variables as well I think so let's do that like this um and we need to do get we're going to get the state tasks and then dot filter hope it looks weird but hopefully it will work and the same thing for the next one we need to get the state tasks and that's going to be the length pay attention at all the um here we are inside an object so we need commas not uh semic columns so now I think we can also import these two number of completed tasks and number of tasks uh number of completed tasks inside the index inside the to-do screen so yeah let's uh see how we can do that separately the same way as we already saw use task store and then from this state State we're only going to take state DOT number of completed tasks and once again for the second one number of tasks like this so does it work if I do cancel no actually no it in fact broke a lot of things why number of completed tasks get do length filter oh I need after get I need to actually access these tasks sorry uh it return returns an actual State partial State object and we need to take the tasks from there now now please work it still doesn't if I'll replace number of tasks with a hardcoded seven will it work can create property tasks of undefined where so six work works if I do it like this now if instead of that I'm not sure if this is a feature because this might be the suggested way to do it I think the the only difference is that it has to be an actual function that returns this get number of tasks still doesn't want but let me make it a function return return it and then I don't know console log it as well oh come on uh what's what's wrong so we see here number of tasks number of tasks let me debug what I receive here where I'm consol looking this all oh boy oh here so number of tasks this is a function so it should be number of tasks where in the index if we would call this one where we conso log it like a function then it's going to properly tell us but I don't want to call it I want but if we make it a get in front let's see H number of tasks if we put a get here at the top doesn't work at all use of create set get user get it's not working you know okay so when consuming they are calling it and still it should be a function and when consuming it number of tasks if I'm not going to call it here but I'm going to call it where we consume it it's going to work and we see here and the same for the other one number of completed task we need to call it and back in here number of completed tasks will be a function that returns get and so one one out of five and if we change it automatically updates and here I'm I will be able to do that and actually simplify it a bit okay okay five out of five so all everything rerenders correctly but we still have a lot of issues with typescript so let's have a look at how we can use it with typescript the only thing that we need to do is provide the type of our store when creating it so let's go ahead and create the type of our tasks store equal well it needs an array of tasks that we can type with tasks like this this tasks uh we can either import but I would rather uh bring them from the context I would bring them here into the store just because usually you'll have them either close to the store or or completely in a different um completely in a different file V is blanking what's wrong here did you mean task yes task now if we send this type to the create come on to create uh this one will be perfectly fine the second one will say h something is not right why a g is not it returns why it's not properly typed because the set is actually typed correctly the state here is Tusk store but in the get they do not have so maybe we shouldn't actually do that but I'm wondering if this will hard hard the performance if the number of task will update no matter what but we can we can try that um so here we only have these issues but where we import we still will see issues like for example in the task list item where we import the used task store it still doesn't know about the delete task uh function because in the type we didn't we didn't provide the types for our functions let's let's look in the context provider because some of the types will be similar to to this one so let me try to actually copy uh all that the type of a task context into our tasks store and only update some of the things for example set task uh it's not going to be set task we don't even have a Setter for tasks we only have an add task which receives a title this is the first one and return tasks are undefined it doesn't return anything so it will return void now next one change is finished changes finished receives ID and returns void changes finished ID void delete task string void string void get filtered task tab okay okay and it returns an array of tasks number of tasks this one is not no not an number anymore but it's a function that returns a number and this one as well it's a function that returns a number we had it like a getter here and just like that now when we consume this one it should tell us that the state has this actually function and we will see even the types for example if we simply say number of completed tasks we're going to see that we this one is a function okay number of tasks in number this one is a function this one is a list of tasks so as you can see everything is correctly typed now we no longer need the Ed task uh not even in our uh not even in our page so let me go ahead and delete this one and I will even go ahead and delete the tasks context provider from day 17 completely uh because in day 17 we don't need it we moved everything to Z stand and even if we need to to check like some of the functions we're going to look into the day 16 there will be some problems for example in layout TSX of day 17 we import the provider so we no longer need it let's remove it and let's remove even them task provider but leave an empty fragment here so if I go to 17 still everything working I can update I can add I can filter I can search and I can also delete tasks cool but the problem is that now if for example I delete all the tasks uh and reload the application hello healthy drugs what kind of healthy drugs are you if I go back we see that we always start from the the damit tasks list so that means that we are not persisting the data we are not saving the data everything uh in our state and also in zustand this is toore in the uh in the memory of a phone that is being deleted as soon as you leave a component or as soon as you close the application and in order to be able to save our state to the Dei device permanent storage we have to persist the data if we look at the zustand yesterday actually in the in our context provider we implemented the saving and loading of data using a sync storage so when we Mount the component we use a sync storage to uh load the item low data and here to save it so we have also implemented these two functions and the logic behind like when to save when to load and so on not super complicated but still it's quite a lot of code to manage all of a persistent and you need to remember and test it and make sure like that you don't override some unintentional data with zustand as I saw they are providing um quite an easy solution for p cons istent haven't tried it yet so let's try it persisting store data and integration so the persist middleware enables you to store state in storage either in local storage for for browsers in a sync storage or even in indexed database note that its middleware supports both synchronous storage like local storage and a sync like a sync but using an asynchron storage does come with a cost hydration and a synchron okay let's go ahead and from zent middle Wares import the persist and create Json storage let's see in our application in the task store at the top let's import these two from zeust and middleware we see that what we have to do is the create inside the create we put the persist and everything else Remains the Same so inside the create we put a persist we add a bracket and we close it at the end here and everything else Remains the Same no something is not correct wait a second uh set what's missing here this is this object I'm figuring out the the brackets and everything expected where here you don't like it there no it shouldn't have oh boy okay so as we see in the create we put the persist and everything else Remains the Same oh but we need name of item in storage and the storage so yeah after this one we still need some information so let's maybe extract this set and get [Applause] to no I will not do that I will do persist I will open it this is going to be the first parameter of persist all the way till here yes and we need to say the second object and only then close it and in the second object we have name tasks store and then storage create Json storage by default local storage is used session storage what's wrong now come on so every everything starts with create This one belongs to this one then we have pist open everything should be correct my brain my brain import oh what happened here number of completed tasks what happened there that's what was giving the troubles I'm going to do Z until we get rid of that import statement oh here here it is okay now everything is back to normal and we can start importing properly import the persist and the create Json storage only the name okay so let's put uh inside create let's add here persist open the brackets close it somewhere here and here provide name tasks and the storage right hold on everything is good maybe I I I just disable like the the arrows here to oh I'm getting insane the easiest way would be to take out this whole set for a second and see what's going on well I don't need this create persist something then an object then that's it oh we need to also close with persist and now inside the first first one here put everything in the set like this and still not correct expected two argument but got one how did you get one because you got two arguments yes I was simply missing some parentheses and if you focus a bit more this is so bad maybe we can import it from zust and middleware which one we persist that's where I'm importing it from name and Storage anyone else see simple example create opening brackets create opening brackets persist opening brackets persist opening brackets a function that receives set get then returns an object a function that re receives set get and returns a um an object then a lot of stuff here that I can maybe comment out or even delete for a second then we close the that one we close this one and we provide we close this two then we provide name and storage then we provide name and storage so where is the problem then okay we put a comma here put a comma here am I do I have another version maybe maybe persist is argument of State Creator persist is not aable to parameter of type State Creator okay okay now the problem is actually this one oh okay so probably I simply had to give persist also a task store but you see it doesn't want oh no how can we have create and persist work together with the same maybe it will work if I add everything back inside our store mhm I wished but anyway if I remove the types seems to work not what we actually wanted and what there includes where includes where do you have here oh wait a second what's going on here const okay can I add back our task store well persist it doesn't want anyway now it's supposed to work but not without types go to to do if I check all of them uh it's not going to work yet because Us in Middle we're unable to update item task given the storage yes because we used a a different one create Json storage what we need is to use VI sync storage from where where did you get the okay so we need to send here V Sync storage to do that we are going to import from a sync storage we're going to import I thinkc storage and now changing something and then reloading the application fali is saying hey VI I want to donate but it's not allowed from India oh I'm so sorry um maybe you can donate directly on their website to the save a children organization yeah um we saw that not it's not available in all the countries where people want to donate um so yeah the persistent works as you can see we can change we can add we can delete and then after we refresh everything should be persisted 17 go yes everything is kept the same [Music] so guys it should be easier than I made it look probably day 17 takes at all and I'm already tired and some brackets some commas uh gave me a headache but in fact it wasn't anything crazy we had already our store all we had to do is wrap it inside the persist function and provided the end how do we want to how do we want to store it here we are using a sync storage but you can use maybe even mmk V here to store it uh faster on the device um but I'm want interested in typing it because so far it didn't allow us to properly type it yeah because if our store is typed as task store maybe the store should be somehow oh I type A persist and now and now it works correctly ly perfect so instead of typing the create type the persist um and it works back as it as it was working before now I uh I want [Music] to to investigate a bit how zo stand we saw how to use it we saw how to use the state how to add functions derived State update the state and so on what I interested in is how it will perform and how it will trigger like renders because that will tell us if if it's better than direct context so for example what do we want to do I'm going inside our let's go ahead in the layout start by saying console log render and here lay layout and I'm going to do a lot of console logs like this index console Rog render screen or page then we're going to go inside components day 16 and no not 16 day 17 and starting with the new task input let's do here render new task input uh task list item here we have two components let's do render write actions and below in the task list item let's do render task list item and for the input as well no for the input we have and that's it we have only two components here i' would like to do actually the same for day 16 and compare everything when it comes to the uh to the rect context render layout here render screen and in the components we have here starting from the top input let's do render input in the list item here we have two components so I'm going to do render write actions and Below render task list item and that's it now let's go ahead and first I'm going to reload and we're going to do some investigation not sure how it how it will turn out so here in the uh console logs we're going to see a log every time a component rerenders the first test test is for previous day for a application that uses re context to manage Global state so if I go to the application let's simply go there right away we see tasks filter is not a function don't uh don't tell me that I'm using the same uh key uh to save it yes we are using the same key tasks let's use task store here tasks store and let's think the easiest would be to Simply remove application or maybe let let let me do a bit differently um I don't know somewhere in day 17 index what I'm going to do is I'm going to do a sync storage do remove item tasks let's remove them like this and for that we need to go to day 17 is it worth learning R native in 2024 I think it's more worth in 2024 than it was ever before um the adoption of react native is really huge like so many applications on the top applications from the App Store are using rack native so I wanted to go to day 17 that is supposed to remove a task I'm going to remove this one and restart to to to start over Okay let's go day 16 testing R context and how how everything re renders as you can see it starts with rendering the layout then render the screen then renders once every items here it render the list item then write actions this is the first time so everything is okay so far then it rendered the input and it starts again to reender the screens and a input again screens and input again uh right action right action right action for all the tabs that we have there so as you can see even when I I simply change the tuab components that do not depend on the tab itself they are actually rendering um and also in the same way if I for example add a new item add new and enter it renders the screen it re renders the task list item the right action of all the previous items the input then it goes over again once once again so you can see that a simple change in the state rerenders a lot of stuff let's compare that with zand and I'm not sure I I I cannot say that it's going to be different maybe I don't know let's see all right starting with the first screen uh the first time it goes from layout all the way till the D input and so on I don't even see any input oh new task input all the way till the screen once again because it loads the item from State it updates them and so on uh but after this if I for example add a new item add it will render right actions of everything that's what I was expecting probably this is actually coming from right actions right actions should shouldn't update of all these items but when we move tabs we don't or do we we actually do I wanted to say but most probably this is a me problem not a zustan problem why new task input renders when we change this one uh because it's a child component and we didn't memorize it so yeah here comes into play Not only like the performance of our Global state but also like our how our components are implemented if they are memoized or not filtered tasks well yeah definitely I'm not going to fix all of these problems because yeah again like this is about like the the component logic of rendering maybe we can do another video on that but anyway this was our Zeus Global State Management uh for some reason the energy really deeps at the end but this was a library that is also the first time uh that I'm trying it and I think it's really uh straightforward it doesn't have a lot of boiler plate if we look at the store um it's it's quite clear and yeah I would consider using it in other project as well all right guys um if there are no question questions let me check where a stream where a comments uh that means that uh we're going to see each other tomorrow because during December we are doing live react native tutorials every single day thank you for being here till the end I hope you enjoyed this one I hope you learned something new you experimented uh you went through the issues and bugs together with me uh but anyway that's the learning process if if you enjoy this kind of tutorials make sure to subscribe to the channel we are very well not very close but we are quite close to reach 100,000 subscribers and yeah that would mean a lot to us thank you very much see you

Channel: notJust․dev

Views: 2,808

Keywords: vadim savin, not just development, notjust.dev, react native live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, React Native, mobile development, DEVember, Global State Management, Zustand, Zustand Tutorial, Zustand in React Native, State Management, Persistent State, React Native Zustand, State Management Library, React Native Project, Application State Management, Efficient State Handling

Id: fvtxgwa5NJA

Length: 86min 36sec (5196 seconds)

Published: Mon Dec 18 2023