Anton Kalik: Clean React Global State Management Without Dependencies

This talk covers advanced state management techniques in React without relying on external libraries. The speaker introduces a custom global state management solution using React and TypeScript, emphasizing scalability and simplicity. He demonstrates how to build a simple application with components that update and read data from a centralized store. Key features include the ability to avoid unnecessary re-renders and control component updates based on state changes. Throughout the session, the speaker highlights the significance of using selectors and listeners to synchronize the state effectively. The discussion also touches on server-side rendering considerations and offers practical examples of code implementation.

hello hey just a minute let me introduce you Anton so welcome to the dev days conference and the hall languages and Frameworks my name is ranit and I'm your moderator today and my background is c as a language and net as a framework so when it comes to web applications I've been working with asp.net right and sometimes you hear about asp.net and suddenly you think you know

is it still relevant in the new world and um you know what's interesting is um I have a lot of my friends working um with uh react and with angular and every now and then I I try to work with those platforms but I end up writing backend apis for react and API react and angular so but today uh Anton our speaker is going to talk about

react I'm actually very interested to listen to how he talks about it and how possibly you know I might still be helping from the back end so Anton the stage is yours thank you so much um yeah all right we're going to talk a little bit today about the uh new like already not such new but the the feature of the react of synchronization store and we're

going to create our Global State Management uh without any dependencies so um before we jump to the lineup I will say that uh we uh was using a global State Management react as Redux uh J or whatever it is but uh actually uh we can just uh create the the solution by ourself and uh to avoid any unnecessary dependencies and to make it even scalable and and

uh manageable by ourself so uh to see the lineup we I'm going to uh jump to the introduction a little bit so then I going to uh build the UI with us with with with you guys and uh then we jump to the structure and components and uh then we will create a store itself we will update and adapt the components to that store then we uh

adjust the uh the store implementation with our listeners subscribers and we will take a little bit time for the sa site rendering uh because the store will behave a a little bit differently with the sa site rendering and conclusion so um how we going to build a very simple application and uh uh the application will have uh a header where we going to update our store um

and uh there's going to be a body when we going to be able to update and read the store then we're going to have a shares component where we're going to update and read the store as well write an application we will put as an example the button which will update the store itself and the footer just from where we're going to read the store now I

think everybody have the question why we need that uh structure uh so this is actually just for uh highlight um what component will be updated while we going to update our state in the store and this is important because some components will be uh nested or some components should not be updated while we are reading some information from there the the data uh actually uh was updated

from the store and that's why we need to see this uh this components and that's why I just put that structure like that so I going to create the the simple uh store uh simple application itself it's going I'm going to use the wi uh with the react types script and the structure will be something like that we're going to have a components there is going to

be a folder store from where we going to import our store usage types itself and application uh uh with a name entry point so uh the now let's start with a simple application there's going to be a uh four components what arrive to this application and you can see a very simple console lock uh on the button right in the application it's just indicator uh for now

we will leave it as uh just like this we're going to say that hey we'll update the shares shares from the application and uh and nothing else so all of components we will create in the same way here the application itself let's go to the body you can see here I just put another indicator uh for that body updated uh and uh there is a name and

AG which we going to read from store later on you can see the whole structure here the button which we're going to update the state itself as well uh right on the body as we mentioned before footer just to indicate that footer going to read some status uh from the store but nothing going to happen regarding this the footer we just going to see we're going to

be uh we're going to be sure that footer is not updated here the header header also with indicator and a simple button where we just put the indicator itself and uh uh uh there um another component shares where we're going to read list of shares with a share item this is another component inside the shares so uh you can see here the share item itself we are

keep this in component share item very easy actually we don't need even to handle everything from the storage just going to be a simple memorized component so yeah here's going to be the list we're going to read the sbol and price and we just propagate it right to the share item and that's it shares we're going to read from the store and uh yes our indicators is

going to be a um a console log I'm going to check the symol from the share item and I would I'd like to see this uh item Bill updated or not and nothing else been updated so for example if I do manipulation with a share item I'm expecting that I up they render only share that specific active share item else so what about types here you can

see the share which is going to have the sybol of the string price as a number and there's the store I put the store uh in the store details of the shares just to complete a little bit uh have a more complicated uh story where we have a Shar inside the some objects and so on but literally like this is whatever we can do and uh uh

there's just various of um options so the before we jump to the impementation of global State Management uh we need to ask ourselves like what we expecting from our Global State Management of course it like uh have to be some wor about the scalability uh easy to use easing access to the store update the uh the update the latest updates from the store and so on so

yes of course we need to be able update uh the store but only when we need the data all right then we need to provide uh a previous state when we update the state specifically the same as we do update the state on from react it has to be uh we have to obtain that previous state and order to manipulate with that state and of course select

the latest update from the store so this is the three main points what we we will achieve uh and about the scalability we will talk a little bit later but uh this is the most uh um crucial thing so how we going to Define our store literally it's going to be a simple function create store where we will provide that store uh type and as a generic

you can see here our store this is definition of the store here we go going to use some just a great store it's going to be a function with the argument of our initial State and that function has returned to us the the the store itself from where we're going to read data and update the um and uh that store will provide to us functions where we

will set State and get the latest update using selector how we going to do this we will create uh that function let's create this create store where we will obtain the initial initial store initial State and uh there's the two functions I left them adami for right right right now just to go one by one so set State um before we jump to the St State we

have to be sure that we um we need to um help to keep the UI and application itself application State synchronized by the reaction of the state change and uh triggering necessary updates so literally we need to create something which is um going to notify that hey there's an update and for that reason we need to create a listeners which is going to be a set uh

uh of uh set of functions where going to be argument store H uh and uh those listeners will keep our um uh will notify us about um we have to take the state from store and uh we going to provide to the set state that callback which going to get the store uh the store and uh we will uh assign to the state from the cback the

update and put the the listeners so you can see the listeners so the each listener we update the the uh we do uh the we call listener with update State how it works H I will show later uh for now let's um uh step into the use uh sync external store uh hook which react provide us from version 18 you need to subscribe uh to the external

store and get the current state the use syn external store hook uh works with subscriber and uh snapshot uh and getting snapshot uh so we need to ensure that the UI stays in the sync with the with the store so how we going to use it we're going to update uh our use selector function where we're going to selector which going to consist the store and we

have to provide the selector data uh what we're expecting to uh to return from this uh from this function so and we will return itself the result of the use scene external store uh there's a listener which is going to add to the listener the uh listener the list of the listeners you can see that uh we add to the listeners the the the latest listener and

in terms of sign off we just uh delete that listener and uh yes the function of selector going to get the state and get server snapshot I will explain later how works uh because it's uh related to the server side rendering so with this technique we can we have to be able to subscribe to our store and notify react about changes so now we already uh created

the store we have a we have a initial store over here so we have to be able to use uh our data from that store how we're going to do this we're going to use the selector selector will will uh will return to us in the uh uh selector um getting the argument of the function and that function we return toward the state and from the state

we able to read the name or age or details with shares and and whatever it is so we able to grab this data and re uh render this data and okay let's try to implement this let's go to the body here you can see that I already uh um removed the previous uh dami uh name and age now I'm just using this uh selectors in order to

get this data from the store so here you can see that name and H already we're reading from from the store and render it um and I still keep this uh update Button as it is now let's try to see how exactly we're going to uh update the so here you can see that uh we need to get the set state from our store and uh literally

do we we can do absolutely the same what we do with the set State uh from react so we going to obtain the previous state and uh update the the values on on this uh on on our store so very easy so uh only what we need to care it's about the uh memorization or providing the function with the reference and so on I will show you

later uh how how we can achieve that so a footer the same thing we going to use the selector we going to we're going to take the status and we just render that status because we just getting from the selector uh from the store. data and that's it uh in the header the same uh we just store we take the previous store we provide the the the

latest data from the from the store um I do this um manipulations in order to ensure that we avoiding uh extra unnecessary rerenders and we going to click by button by all of those buttons and we will ensure that uh no header for example if we update something what we render on the body and I click on the header uh header should not update but we have

to update the body where value is being updated so this is the the the important thing so here uh shares component where we going to read our shares from the store you can see that we using selector and uh we are returning there from those details where we have to be able to use read shares and list them in our share item now how we going to

update the share so the same thing but with the use SCB back because we provide that function for update share item to the item uh of shares uh but with the same technique we're going to get the previous store we're going to uh save uh to the details our updated shares and in our case we actually going to uh just increase the price uh plus one and

uh there's nothing no magic at all we're just going to find the the the same symbol where we click and update that price um if we will render our application it have to be look like this very simple you can see various of buttons uh what we do expect over over here when we uh click on our our buttons let's say when I click increase on Apple

share Apple stock it has to increase only that item or if I click on Google I just increase that uh price to the Google but and we not reender anything else we just update specifically that point and nothing else if I click on update name and age from body the body has to update uh that that agent name and rerender body but still keep the same shares

and other things so here we once we arrive to the application we going to see our indicators that header updated body updated uh shares list updated and all of this items been updated because we just arrived and rendered those components so this is initially our console uh indicators now as I said when we click uh on update name and and H from the body the store will

be update only once if the multi uh only once the thing is that I updated those names uh and I clicked on the button next time when I click on the button and I will try to update again and again with the same value we expecting that nothing going to be rendered and the store will not be updated and triggered at all because data the same we

just provide the same name in our case Javier we just put there the same name and but the store already have this values and we we expecting that nothing going to happens no reenders nothing absolutely so multiple clicks will not trigger extra reenders at all so the same principle princip we will will happen if we will update the store from header component at the same so we're

going to click multiple times body uh will be updated but uh multi by clicking multiple times we will keep uh uh nothing going to happen and render will not happen at all so um what about the app component there's the button as you remember where we need to add new share uh uh from from our app component right so what do we expect we expecting that the

the application will add uh the new uh share item here you can see that we set the new uh we set new uh so and uh we update the state and uh and we add the new item to the shares so you can see the new share and we add H the last one to our our store so by that when we click again times uh with

the same data we not going to be able to add anything else because um the data already exist so exist with the same value so by clicking at share button will multiple times will update the store only once causing only the share at least component to the reender so we need to uh keep uh a value clean and we not uh going to render to do X

so by the way about the use C back hook I actually already mentioned that sometimes we need to use it in order just to memorize our uh to to to avoid the extra renders because we provide the function with a new reference so that's why we're using a uscale back and uh you will ask about the server site rendering as well so what what uh we can

do with the server site rendering server site rendering uh it's a little bit differently because we need to get the props uh for example in xgs uh when we using uh uh when we using xjs we need to get the server side props we're going to obtain those props and then we have to be able to syn uh synchronize with our store so for that we need

to create a NE function in this function where we going to read uh from props initial State here you can see that initial state Ed from the function and we able to use the uh this values from props how should look like this in need function um we're going to update we're going to get this in it State we going to create a new variable is initialized

so here you can see this uh uh the this value and uh we update our state and we just flag that is initialized already uh in true so it been analized so when we able to reuse that that store across our application so in the conclusion uh I would say that um by that Technique we flexibility in terms of um we actually can handle uh everything by

ourself we just can I I just showed the example of just one store uh we have to be able to create a like several stores uh with we going like for example I call this just a store you can call this whatever you want for example this store or one entity then going to be another uh logic somewhere so we can actually create by that several stores

and you using selector uh we can achieve this uh scalability we can use this different stores and read the DAT updated data depends of the created store and by by that as well we can we have to be able to control the uh our uh behavior of uh to avoid any extra rerenders and uh avoid any uh extra libraries actually so uh uh once again if we

take a look on the uh take a look on the uh how we set the state we still actually almost the same what uh re react API provide to us we do uh set state in the same way only that we need to uh get the data uh from the selector uh it's we just using the hook and we got uh that data updated so uh yeah

that uh repository you can get the from GitHub take a look on it over there you can just reuse this code over there and uh thank you so much Anton thank you so much for this session it was uh interesting to see how react is progressing and how uh you know you can take care of State Management without external dependencies uh I'm just going to quickly have

a look to see if we have um Q&A which dropped in in Pine um I I would like to add actually that that technique actually was uh highlighted in many topics uh and during the last I would say half a year uh because like before we as a react developers we was using a lot of global State Management Solutions and there was very popular Redux then react

uh uh issued that uh feature with context we start using the context together with reducer which is more or less replicated behavior of reduxx now we have this possibility to use selectors actually uh and now we stepping in more closer when we don't need to use uh the extra libraries and uh we can just create the the store very control it by ourself and flexible one yeah

that sounds I mean that sounds very good because you know one thing that I noticed when I was helping uh teams which had a react uh front end and I was just providing the backend API it was interesting to see how many libraries were involved and just Library management itself was a pretty challenging uh task in the projects and there had to be super careful not to

update uh before a production release and uh you know really plan when and which libraries they wanted to really change in my case uh this very crucial thing uh that uh to avoid any extra rerenders and extra injection on Dat data if for example in my case uh specifically in this topic what I presented right now yeah then you don't need to update at the store if

the data the same you can control it by yourself you can do some whatever you want but u a lot of cases when the data already there you don't need to update and do like extra job for for and for example I mean for us it's important in terms of performance we need to care about hey there's a lot of components they should stay the same because

they not obtain any new information at all yes you can click the event you can fire the event but the the state has to be the same uh or updated only if the data arrived new one so uh this is the most important and I and that's why I'm emphasize that thing sounds really interesting so is there um is there a GitHub repository or something where you

have some of these best practices that you uh have gathered specifically uh on my I mean I already highlighted the the link to giop repository we exactly that solution you can check it out in both yes in both uh situation or server side rendering or just the client side so there's a link presentation uh so but if any other questions would be to me you can reach

me on the uh on right now right now I think a lot of people are just taking in the information it's possible that people listen to it and then maybe even during the conference I think it's possible that they might just put it on the hall or contact you on a private chat exactly yeah exactly yep perfect I'm going to say Anton thank you very much and

uh I think we are done a bit earlier than planned but I think that's completely okay then we have time to just take a breather and move on to the next session yeah yeah thank you so much for having me that was a pleasure to present my topic thank you so much and have a great ciao bye- bye [Music]