State Management in React Native
Subtitles
Show
let's go back hello everyone Thanks for tuning in to the react native Show podcast before we start the episode about State Management let me quickly plug our newest free Ultimate Guide to react native optimization a comprehensive source of knowledge when it comes to improving the performance of your react native application we talk about the State Management here on this podcast soon and you can read how to make your State Management fast in our guide so make sure to check the guide after you listen to the show and yeah let's go let's go on with the show hi hello and welcome to the next episode of our the react native Show podcast where we discuss the latest and greatest of react and react native uh and we chat with awesome guests like my today's guest hola Des Moines a software thank you uh hola is a software engineer here at callstack and uh an amazing writer who just wrote a book about State Management which gives me an awesome SQ excuse to talk about State Management in react and react native on this podcast so hola can you tell us some more about your book what is it called yes uh so it's funny to hear like that I just wrote a book because it was such a long process that it it took a year but yeah I I did manage to finish it and the title is simplifying State Management in react native and there's like a subtitle that's very very long and um the subtitle is Master State Management from Hooks and context through yeah yeah through sorry Redux small box XJ dotai and react query yeah yeah so I guess you are describing a lot of different right libraries there exactly exactly the goal of the book is to show the whole landscape of different State Management libraries that are there for us to use funny this is the exact the same thing
that I wanted you to explain to us today so that uh that turned out great maybe firstly let's talk about statement the native State Management in react native uh the default one uh why do we even need state in react native yes so uh I I would guess most of us react native devs um where we are JavaScript developers basically right so JavaScript uh we think about web development websites uh and a lot of us started actually with react.
js and then moved on to react native in any case this is still JavaScript so um when first websites were created they were just they were mostly created on the back end and the back end would serve stuff to the front end and front-end developers would just show like a bunch of you know squares that we would always have to Center and we never knew how to um but um what what developed was that like the front-end Solutions are more and more complex and angular was born and react was born so we're doing more and more stuff on the front end and not we're not relying on the back end anymore we just get the data from the back end and we do all the magic on the front end also we have displaying the the static sites anymore we are creating web apps web apps exactly exactly so what the what the front-end developers realized is that when you have this web app it's difficult to manage all of the little things that change across your app you may have like a side menu or settings that are you know used across the entire app and you have to like drill down to find them so um so so the developers knew there has to be like a better way to manage this and that's when we um we got our first State Management Library that's external to react and it's Redux and we'll talk about that
js and then moved on to react native in any case this is still JavaScript so um when first websites were created they were just they were mostly created on the back end and the back end would serve stuff to the front end and front-end developers would just show like a bunch of you know squares that we would always have to Center and we never knew how to um but um what what developed was that like the front-end Solutions are more and more complex and angular was born and react was born so we're doing more and more stuff on the front end and not we're not relying on the back end anymore we just get the data from the back end and we do all the magic on the front end also we have displaying the the static sites anymore we are creating web apps web apps exactly exactly so what the what the front-end developers realized is that when you have this web app it's difficult to manage all of the little things that change across your app you may have like a side menu or settings that are you know used across the entire app and you have to like drill down to find them so um so so the developers knew there has to be like a better way to manage this and that's when we um we got our first State Management Library that's external to react and it's Redux and we'll talk about that
more later of course uh but that was like the first um the first moment that that we had like a better solution to manage the state of all sorts of different things of models themes whatever the user has in the web app and all of that kind of uh works the same in react native apps since it's also JavaScript so in just regular react we have the set State the use State you state hook now and set State previously in in classes so I guess that's the default one what are the limitations of the default State Management in react well the the regiment uh is well the biggest problem is that you have to you you say your state in your parent component and let's say like the the extreme example is that your parent component uh well the the thing that you want to set in your state is a theme for your app so you have to set it at the very top in like your parent parent component right and then you go through uh tens maybe even hundreds of components to get down to like some button that you have somewhere in some screen that has to be either blue or red or whatever depending on the theme so you have to pass this prop and never ever make a typo and never ever forget it uh and and then what if you want to change it through a button then you also have to pass the function that changes the state so it's a it's a whole it's a lot of shenanigans okay yeah so we needed a better solution and you said the first one was Redux sort of familiar with this the history of react um first we had set state only said State and we mostly use class components and then Redux was created and only after readers was created uh hooks were introduced so a lot of people kind of turned away from Redux and started using hooks
um because you state and news effect are more comfortable to use with functional components than the old set state with class components yeah I I wonder when in this timeline that you just set up for us when the context was introduced because context actually answers the question about teaming right you can have a context at the top of your app uh and uh context provider at the top of your app and context uh or what is it called um a consumer I think consumer uh when you want to consume the the steam variable right so and Redux actually uses context under the hood to uh to work its magic let's say yeah uh so context was introduced like context for us regular developers we was introduced after hooks or like along with hooks maybe or just after hooks uh it it still feels like uh sort of a new solution that people are getting used to it's like At first everybody was in love with it just accused effect and everybody would just put use effects everywhere in their apps and then they put context everywhere in their apps and I saw this funny tweet that if if your app with uh with your context providers if it looks like a bunch of uh geese flying East you know with the whole yeah that you have a problem you know this is not cool yeah so um so context is uh is an interesting solution but it's not uh a solution for everything yeah definitely okay so um I want to talk about your book now and let's structure this podcast as you structured your book so I want to um maybe start um discussing the philosophies of State Management there are hundreds probably of different libraries but we can gather even hundreds more since the book got published yes uh we have a new one every day uh seriously so we can probably group them
in some categories in some groups so what are the categories and how we can um yeah categorize the the State Management Solutions uh um a way to categorize them that I like a lot is by three fancy words flux proxy and Adam so the flux philosophy is what Redux uses it's um it's a so the philosophy you know it's not we're not talking about code we're talking high level just ideologies uh so flux is um something that was invented uh at Facebook it's a way to program that unidirectional um and it's it's a unidirectional data flow um and it's very important to not uh to to fight to be immutable like the state has to be immutable that's like a important part of it um the second type of State managed libraries is proxy so a proxy what it means is that it kind of uh the State Management Library kind of magically automatically wraps your components and mobx is one of uh is is a library like that and then we have Adam state which is uh the example of that is jotai which uses uh items that are very similar to use State hooks it's just like very tiny pieces of state so this is like high level philosophy stuff and now people also yeah if I can if I can interject here I think most of the Articles of most of the podcast that I've heard watched on YouTube uh actually deal with this flax versus proxy Redux versus mobex uh kind of division and those are the two main Players let's say on the State Management scene the atom is quite A New Concept right yeah Adam is new since um because it has it's like a year old maybe a year and a half and there's also there's also X state which kind of escapes all uh categorization and then we also have react query which
invites us to sort of think about State Management in a completely different way to consider service state away from App State and there's like a whole other game but we should think about it and we should consider it when we create apps yeah yeah yeah definitely so um having that categories in mind what was the research process of your book how did you um approach the the specific libraries what kind of um data were you looking forward to to describe them yes so uh what I like to do is I like to work on like on real life organisms I don't like to just stay in the theoretical field so I decided that I I created a simple app um it was at first tempting to do uh to do apps since that was like all the react tutorials we're doing to do apps but for react native that's that's so too small so it doesn't it's not enough to to do anything really I needed something where I would have navigation and different screens and I would have to share data between screens right so I decided to create a small clone of a social media app so it's I have this little app that I found like some free designs on dribble that I was able to use and you just have like your feed screen your liked images screen and like your conversations something like that uh so I said I I set up that app um using just react uh at first just react so Hooks and context and facing all of the issues that that are there with using just Hooks and contacts yeah yeah so the app is the field feed the wall that I have some photos on that I can like that again hurt them they have like a few tabs you have you liked images tab and like your settings tab and conversations and if I like uh post a picture or something it's appears in my like tab exactly yeah
that's that's exactly the the challenge to have you have the feed of somebody else's images you open the image in the model you like it and then it should appear in your liked images screen which is in no way connected one to the other so that's why we need a state management library to kind of manage all of that for us and maybe say some more about the state connections there so if I like this picture it should appear on the second tab but it also should have some indicator probably on the feed tab is there something else is there some other connections that we should know about no no no that's it I mean on the on the feed tab uh you you open a model and in the model you you click you you like you press a heart that indicates that image is liked or it's not like or when you open the model if the image if the heart is filled up you know that the image has been like effect so the model um I I use react navigation in the app so I have you know tabs through react navigation and and the model is um well it's a model it lives inside of the feed tab so you know yeah the feed tab doesn't even have a common uh parent with the liked images tab as much as you know just like well the root you know just like it is in react navigation sure thanks for explaining yeah and uh so so what I'm doing uh once the app is set up what I'm changing with every single Library I I would take that functionality and rewrite it in the given uh in a given with a given State Management library to see how difficult it is how much work it is and how how different it is to think using that library because and that is alert every like the the biggest difference is that every state management Library forces you to think in a different way about your state that's like the greatest difference I really appreciate that this is a very controlled
environment that you have your uh control group which is a set State and context and you have this all of these different libraries but it's all set up in one repository uh and the underlying root structure navigation structure is the same for all of them yes yes it's the same app like uh so I have the the basic app and then for every state management Library I just I took the app with just Hooks and contacts and I replaced hooks in context with a given State Management Library okay so what else what is the other the next step of your process uh after creating the app and plugging in the State uh Library management they're all doing a lot of research with my next step usually just the reading documentation uh and uh I was also reaching out to the creators of those State Management libraries I was very lucky that uh most of them replied and like replied to a bunch of questions I had about about their their libraries um but I hope we can like go one by one and then I'll go more oh yeah definitely I I I'd love to do that so uh shall we start yeah okay let's start with uh I would say it's the oldest it's the most hated but it is also the Bulletproof the the corporate chosen one uh can you guess what it is yeah it's Redux yeah people love to hate Redux yeah uh so Redux was created by Dan abramov at Facebook um and as I said a few moments before it's based on this Flex philosophy of unidirectional data flow and I highly recommend watching the Egghead course by Dan abramov on Redux because what he does is that he he sort of uh he implements Redux from scratch which is just uh very informative to watch uh and it's a free course so everybody
go ahead and do that and let's link it in the in the show notes sure and so what happened with Redux is that yeah it's it's people love to hate it because it's pretty old and it didn't in my personal opinion it didn't age very well uh because when you set up pre-dex you have to have a huge baller plate and when you have a big app it feels that every time you need to change anything in your app you have to change like a thousand different things so what happened is that um there was a another Library created like a um well it's called redex toolkit okay so the next toolkit was created to help it's a utility uh utility of of Redux yes exactly um so this utility makes uh working with Redux much easier uh and I also I recommend it and I uh it's maintained by Mark Erickson on Twitter his handle is Ace Mark and I spoke with him a little bit about um why why he works with Redux took it he told me that he just he just liked using it you know and then he would answer a bunch of questions and then he became very active in the community and now he's the main maintainer of Redux token and what's uh super impressive with um Mark Erickson is that he's like he he's in a bunch of different places answering questions about redex took it he's on stack Overflow he's on Discord he's on Twitter and he's very open to answering all sorts of questions um so that's the creators uh now going back to the library itself when you start with pure Redux and you listen to that Egghead course by Dan abramov he talks a lot about how state is immutable and that you should never mutate state right and you know if you use pure Redux and you write your reducer uh so as far as nomenclature goes you have reducers you have actions you have the store the
store is like the state of your app and it's and it's this entity that lives kind of outside uh of your app and all sorts of magic happens there and then if you want to change something in that stay in that store you have to use an action with the dispatch in action and then there's reducers also the state is like a global thing it's only one state even though there are some abstractions on top of it that you can treat some parts of a separate parts the state is one there's one one state in in Redux yes and if you want to change it you dispatch an action the red reducer listens I guess for that action and then what and then the state is changed and it's accessible to your entire app then you've stayed as accessible to your entire app but I wanted to touch a little bit upon the immutable immutable stuff because as I said if you if you use pure Redux you you can add mutate State because you know that the world will blow up if you if if you mutate state in your reducer pretty much so if you use Redux toolkit Redux toolkit uses a library called immer uh that kind of under the hood so even if you as the end user you may think that you're mutating state but Redux toolkit uses immer as well as a middleman so you you even you think that you're mutating state but then immer does its job to make sure the state is not mutated and then goes to this to to the implementation of Redux under the hood and the state stays immutable so um so that's interesting about the whole mutable immutable thing because sometimes it's it's hidden from us the developers who use the libraries yeah yeah I remember when I used the I I I guess the the two different approaches is that in the olden days you had to spread your array into a new array and right now you
can just push to existing array and email will just create a new array under the hood exactly exactly so the question is does it maybe like Emma is helping us but it's also maybe creating bad um bad uh what's the word like we are getting used to doing bad things yeah sort of you know if somebody works only with Redux toolkit they think they can just mutate State because that's well but the Redux toolkit is that the factor way of using Redux now it's the uh no I I forgot the word it's the go-to yeah it's the go-to way it's the recommended way of using research so I guess that's fine as long as you know that the state is actually not murated it is uh immutable yeah yeah yeah that's a bunch of very smart words we just said there like I I feel like we could have a whole episode about Redux and it could have been three hours long and everyone would understand half of it even if we would use smart words because Redux is so um is so huge in in JavaScript in react World like I feel like every Big app that wasn't written last year that I worked on uses Redux right yes yes totally Redux is synonymous with react pretty much right now if you look at uh if you look at job opportunities like uh job offers there's if if they want react they want Redux as well like 90 of the time uh and it is it is like battle tested and but the the sad thing is that we are so used to it being that it's better tested and it works really great that people are afraid to look outside of Redux and try to find something else uh so like that's a fun fact that wukash and I we work uh currently together on a very big app that uses Redux and it's seriously it's mostly so we have Redux took it as dependency but we don't take advantage of it enough in the app and so most of
the app is just pre-redex and it's making us sad sometimes like we're trying to do slices and stuff like that but it's uh you know we have long ways to go for it to to be comfortable to use I think actually I am happy to work on this project because you are in it and you are a nice State Management so yes the project I am very happy to worry about that project as well but yeah I would be happier if we had more Redux toolkit and less Redux so I want to finish this redact discussion and you said one thing at the end of there uh that uh Redux is so ubiquitous that people are afraid yeah thank you are afraid to look outside of Redux to look for something else there what else is there yes so uh so we're off to the next section right um we we talked about this pure react reaction context and hooks we we looked at the staple the Redux uh library that everybody seems to be using and now let's Venture a little bit outside of the box uh the next library that I looked at in my book was mobax uh mobex was is also like the oldest the second oldest after reading which is still inside the box to be honest that's the the second the the second most used probably yes yes yes exactly my box was sort of like an answer to the first uh problems where people said oh we don't really love Redux so so they modbox was created it was created by Michelle best trade oh my God I hope I pronounced his name right so he's also the creative Emir and he also has a course on Egghead about mobex and it's also a very good course and it's free and I recommend it in the show notes of course uh so the thing is uh with uh the biggest difference between Redux and mobex uh how mobox wants to
differentiate itself is that um mobx is a reactive Library it's it uses reactive programming so let's start with this whole philosophy again um so in mobx you have as I said it's categorized as a proxy State Management library because it kind of wraps your components and it tells them uh to observe stuff or be observed and then the changes happen asynchronously and they are observed and stuff is changed so you know it's kind of like this the that's the idea the high level idea uh behind mobex on their in their documentation they say that they use functional reactive programming so um I tried to understand what that meant so professional programming you know it's the opposite of imperative programming um no like reactive programming is um the opposite of imperative programming so I have a good example for that actually yeah so um in imperative programming you can set that variable a equals B plus c and if you change uh if you change B and C A stays later on in the program a stays the same because B and C were changed later on so in reactive programming uh when you change B and C later on a will be changed as well because it reacts to the change because it's it's computed the the more bags I I love mobex I need to be honest about this like this is my favorite State Management library and I like I build I even build some helpers for myself years ago to for it to be more stable let's say to behave more like uh Redux in a sense that you cannot do everything everywhere you have to follow some rules but I wanted to what I like about mobex is the computer things like you said if I have a computed value that depends on three different value values if even one of
them changed changes my computed value is changed as well and something observes this value and re-renders so I don't have to care about setting five different state pieces because some action happened I just changed this action and my style state is derived from from this small change which I really like a lot and which saves me a lot of time while developing but and they create the afterwards yeah it's hard to track what yeah it becomes sort of a web of uh dependencies so the the creators of mailbox interdocumentation they talk a lot about deriving stuff and they like they encourage the users to derive everything that is possible to be derived because that that ensures that your app your your app will stay up to date right because all this stuff is driving you don't have to think about what what depends on what um so um so that that's how Redux is different from modbox uh and I can tell you how modbox is similar to Redux is that Redux has Redux toolkit and mobx has Mobic state tree yes so as much as mobex is unopinionated and you can use it with any UI library that you want mavic state tree is a little bit more opinionated and it has a lot of helper functions and utilities and honestly the utility I love the utilities in Mobic state tree it's like they it's it's almost as if they thought about everything you you can you can just find everything you may need to drive all sorts of data and construct your your state tree how you want to and um Mobic state tree is maintained by German Holmgren who is the uh CTO or CEO of infinite red oh my God I can remember now but I think he's a CTO yeah CTO CTO yeah um so I spoke with talks about Mobic state tree constantly and also Mobic slatery is a default weight of State
Management in ignite which is a boilerplate for react native yeah exactly and Mobic state tree was also what I used I didn't use pure mobics I use Mobile x83 in my app uh because after reading a little bit about it I thought that just using mobex alone would be a little bit more painful than Mobic state tree and mock state tree was a breeze it was it was awesome because you set up you set up your State uh like in your tree with all the actions and all the stuff and then you tell the component to observe it and you're done and um it was it was really it was really nice to to use uh I don't blame you for for loving it yeah I I do love mobex but it's been a while since I used it last time because like you said we work on a huge project which uses really Redux so I'm in the Redux territory uh right now but I I want to ask about the terminology in the Redux word you said we have reducers uh State actions what are the counterparts in the mobx world oh it's difficult to talk counterparts since it's it's set up very differently in in Mobic state tree so you have you have your one like your one file let's say in in Redux you have to set up all your stuff your actions separately your reduces separately and your store somewhere else so in public state where you you create your one file that would be sort of like a slice in Redux maybe a star philosophically a sort of yeah and uh so you set up your uh your object and the actions on the object are kind of set up all together in the tree um and I can't remember if there are if there are any specific well there's the Observer yeah yeah that was that what I was uh aiming at that you have to run your components in observers to listen for the state changes basically so that
yeah that that is one word that is specific for which is which is like a counterpart of connect in Redux or yes hooks somehow right yes totally totally that would be the the counterpart yeah of connect I would say so yeah and uh Mobic state tree uh is uh uses typescript as a first class citizen so I started out really writing my app in JS because I thought that maybe creating it in typescript would add another layer of difficulty to the readers so I wanted to avoid that and I I just I would just write everything in JavaScript and then I got to mobex and then I was so sad because it's so much better in typescript everything is typed and it's safe and it feels like you just you can't break your app because you have to you have to add types and um you know there was a I thought was too bad that I used JavaScript at that point so is mobx Branch the only branch in typescript in your in your project no I still use JavaScript I wanted to like I wanted to keep that control environment but I did wrote In the book that all the examples from Mobic state tree are in typescript and that I recommend to look into it yeah for the readers okay thanks a lot that I think that wraps up our mobex discussion mobex is the best State library and you should use it with Mobic State 3.
let's move on right now I want to look at something really outside the box and you said that in the very beginning that some libraries follow flux so libraries follow proxy uh some libraries are Autumn based and there is one that that yeah which one is it then there's X state so x-state is a library that was created by David corshin and also I hope I pronounced his name I write his on Twitter his handle is David K piano and is also very active uh on Twitter
let's move on right now I want to look at something really outside the box and you said that in the very beginning that some libraries follow flux so libraries follow proxy uh some libraries are Autumn based and there is one that that yeah which one is it then there's X state so x-state is a library that was created by David corshin and also I hope I pronounced his name I write his on Twitter his handle is David K piano and is also very active uh on Twitter
um so um and one of the nicest things about X8 is that it has a visualizer so we have this website uh where you um it's free to use you just dump your state machine we'll get to that in a second and you see you see a visual visualization of all the stuff that can happen in your app if you do this what action will happen how the state will change and where where what is the next state so that's super useful and I also had a chance to exchange a couple of messages with David and he said that actually working on the visualizer is the most difficult part and that's what takes most of his time uh not the library itself um yeah so going back to the library itself it's rooted very strongly in mathematics um and exactly in the concept of State machines and the concept itself is that anything can be in only one state at any given time when you when we go to um web development or app development you have a button and it's either clicked in our checkbox it's either checked or it's not checked it's always in one of those two states so you start out with this um with this sort of mental model that uh all of this stuff in your app has to be in some sort of state and you model your state machine on the basis of that you kind of write you have to you always have to have your default State and then you you tell your machine that if this happens this element should go into this state you know so um so that's that's all very much based in high level mathematics there's a in the XC documentation which is very well written there's a bunch of links to articles about all those mathematical Concepts
and well it has to be well written because the concept itself it's so outside of the like your normal World normal thinking about programming I remember some of it from University uh did you like it like the concept in abstract seems simple but when I look at our application and the whole array of states that should be in different states right and how they interact with each other I cannot rub my head around connecting this to anything else that Redux like this is a completely different mental model and uh it is yeah so how did it Go including this into your small let's say small scale uh yeah application the scale the scale is very small so um X8 is this is just a personal preference I love that State Management Library that's actually my favorite and and whenever I use it I feel like if I start out with just a Bare Bones react app and then I add x-state I just can remove like all of the use effects and all of the crap because x-state manages all of it uh and so so that's like um it's very succinct um you have your all your States in one place and you have your machine and then you kind of then you pass it through context and you use it in your app and it's um very logically linked like in this state machine you have everything Linked In the state machine uh they also it's uh the X8 also makes it very easy to use promises because promises are State machines when you think about it the mental model right you you go in you have your your loading then you have either success or failure so you they they just they they fit in like a puzzle piece into your state machine you can do all your fetching and it doesn't feel like with Redux fetching feels and and saving data feels like a work around
yeah a little bit unnatural with with x-state it you feel right at home it's fine you have your promise you have your data it's loaded it's not loaded it changes it's very comfortable to use uh as far as complex applications are concerned there's this concept of State explosion and it's a it's also a very uh there's a very nice article in the XC documentation that we can also linked in in this podcast because you start out thinking about this uh this mental model this uh state that you have a check box and it's so easy and simple but then you have five checkbox checkboxes and maybe an input field and the input field has depends on check boxes and maybe on the tags that you put in and it can be valid or invalid and it's sort of kind of it blows up that's what I said before that one checkbox is easy enough but then everything depends on each other and it it becomes a mess can you please and it's called the state explosion and there are Utilities in yeah and there are Utilities in uh XD that help you get your head wrapped around that and and get your code working and and being readable which is the most uh I was going to ask you about something but first let me uh let me ask you about something else and then please remind me to ask you a proper question but the less proper question is this is a quite new library as well right this is also around two years old so we can so the proper question is can you please dump it down dump down the use of this library for me what is the connections to react where are the different where do different pieces of X State live what do I have in my component how do I change the state stuff like that all of the state changes uh happen in your state machine so you write your
state machine it's just one file where you where you set up all the states that uh your thing your piece of State can be in if it can be checked and checked valid invalid um whatever you you write your state machine you export it and then as far as react is concerned you pass it through context and then you use it across your app and next state make sure that your app doesn't re-render a thousand times in my react component I have access to this one checkbox and I have access to some function that changes this checkbox what is the function well in your component you you add your like use machine hook because you know hooks are fancy and everybody uh so you uh yeah you have you have you you can have access to anything you want to export from this from the state machine because maybe you can like the ideally you would have all of your inner workings and state changes in the state machine and not in the component right so ideally but then sometimes you need to like pass a function that if you click this button this should change so yeah this is all exported from the machine and um we'll use the two hooks sure okay uh I will definitely look into the documentation of this like I said um it feels just weird uh but I take that you love it and from your recommendation I'm gonna try it as well in my next weather up project or something like that yeah I'm a small scale yeah it's like a very very super personal opinion it's like I I cannot tell you why I like react and other people like angular it's just they're mental models that that what who does like angler who like people used to like angular moving on from my bad joke about angular uh we were talking about uh X State now and let's move on to the last on our
philosophies list the atom philosophy and the representant from atom philosophy is Joe Tai take it away yes so Joe Tai is is the baby of the bunch is the youngest library but it was actually created because there's another Library created by Facebook called recoil but recoil is uh they have a GitHub repository but it's marked very clearly that it's an experimental library and it's been an experimental library for a year a year and a half and the creators of uh dotai were tired of waiting for recall and they created their own implementation um and they call it um they call it jotai which means something in Japanese probably because uh the creator of uh jotai daishikato he is Japanese he's part of I'm gonna translate it in the background or something yeah and please talk sure so daishikato is part of this group called poimandres is a group of it's a um it's a group of people who love all sorts of react stuff and they work for free on uh on making all the react World better pretty much they have a Discord Group which is open and anybody can join and they also have a Twitter account and they also created a bunch of other State Management libraries they created Zoo stand which is like a modern Redux implementation they create a valtio which is a modern mobx implementation and they created Joe Tai which is this Adam implementation the mental model behind Joe Tai is that we don't have this blob of state but we have very Atomic small pieces of state that are not necessarily linked together so I tried out this library in my small app and I cannot vouch for how it would work in a bigger app I have no idea in a small app it worked very nicely like it sort of felt like magic
um and you just use hooks hooks in context pretty much but the you know the specialized folks that use item uh they have async items for fetching and the documentation is very short like it will take you a half hour to read the entire documentation um and you can the library is very open to adding uh different things to it that you can use it it cooperates very well with other um libraries that you may have in your app and and yeah that's pretty much it and I also spoke with daishikaru a little bit on Twitter and he's also very active on Discord in deploymentors group and on Twitter and he just started giving out talks like this the last year I think was the first time he appeared in person uh at a conference to talk about dotai so okay that's nice uh I checked and jota Amy means State there you go um also means stayed in some language yeah uh zosta I also heard about um what would you say is the biggest selling point of jodai uh over more battle tested libraries the biggest selling point is to for people to stop going automatically to Redux because if you're writing an app that is not huge but just I mean ninety percent of apps that we use are not huge let's be honest it's like a couple of screens and yeah it doesn't need a robust State Management Library um that needs a huge bowler plate um so the biggest selling point is to think twice and maybe all you need are just a couple of items yeah and they'll be enough for your Global state and also like this is a different paradigm from the X state is is other league but yeah the the Paradigm is different so I guess it's nice to
check view options during your career right and figure out what you like best and maybe pick and choose maybe you can mix them together and maybe you can think of something yourself in your day-to-day development has nothing to do with State Management but maybe you can introduce some of other philosophies in in your code architecture exactly exactly exactly okay uh we were talking about state which is jota in Japanese and now let's move on to reacquery which is yes I think the last one in your book yes is that correct yes okay yes exactly because that's the the outlier it's not the youngest library but it's the outlier because it invites the developer to think even more outside the box right because we were just talking about how to manage state in your app uh so this means every every app virtually every app fetches some data and then has to do something with that data on the screen to display to the to the user so uh what react query did when they came on the scene is that they said hey maybe you know this is server State and maybe you shouldn't play around with it in your app in in the state of your app I just respect that is this is server State and all you have to do is make sure that it's fresh and that's it uh so if if your user changes the theme of the app and the theme that they are using is preserved on the server because every time the user logs in you know they request the stuff from the server and the server says oh hi your name is this and you like to use the Dark theme we don't have to you we don't have to keep that in the state of the app we can just use the server State and just make sure it's fresh so that's that's the that's the philosophy behind react query which is actually rebranded it's tan stack query
right now because it was first created to cater to react but then they expanded it was created by Tanner Lindsley and the he has a bunch of other libraries and he decided to Rebrand so that people know that 10 stack query can be used uh with different different libraries different UI libraries um and the the biggest resource the best resource for learning about tan stack query is a Blog by TK dodo that's his handle on the blog and on Twitter uh his name's real name is Dominique I'm not I'm not even sure about his last name but uh so he's he has a Blog about uh tan stack query and this is the best resource to learn about this Library okay uh one thing that I want to comment on uh from your description of downstack query react query previously react query is the much better name right I can't get used to tell the query either yeah give us that uh so just so I understand and so our listeners viewers understand previously in react and more box and other and every other State Management Library what you have is you have your asynchronous action to your server server gives you some data and then you push it to your store you just save it to your store and react query is actually a caching mechanism that just uh ask your server for some data and like it lives in your application but somehow yeah somehow not so I'm not exactly exactly uh so you described it very well uh the the biggest that you did describe very well the biggest difference that with those State Management libraries we we Fetch and we keep this state and the the service that we put it in the App State and we try to make sure that it's synced that it's the same maybe you know we run some fetches to the server from time to time uh or not and with react query you you
just you fetch the data and it it lives in a cache layer which is um which is accessible to hooks again you you set up your contacts your query context at the root of your app and then you across your app you use a hook and I remember wukash we spoke about adding a react query to the project we are working on and I remember that we had this conversation where we were in a group and people were asking okay but how do you get react query data into Redux because like that's the first thought that's like the first right but you don't exactly this lives completely separately it's just a layer it's a caching layer uh pretty much and you don't you can so you you have like for example you have like uh functions to mutate data but you the mutate the data mutation functions are actually post functions to a server right you post data at the server and that's the mutate function pretty much but then there's a whole bunch of magic that happens so that before the server responds you can display some stuff um so so caching is the basic building block of your query and then there's a whole bunch of magic with uh pre uh pre-loading optimistic updates infinite queries um it's today it's a very well developed library that answers real problems in real apps yeah yeah yeah I I like it a lot uh I have not used it but uh you introduced it to me and since then I really uh I really get a feel of how it can improve uh my life as a developer and my applications uh and that was real query is the last uh State Management in your application in sorry in your book okay in your fabulous book uh what are the other uh honorable mentions that you want to briefly maybe talk about what other state libraries are there that you maybe not didn't have time to include in
a book yes so as I mentioned there are a couple of libraries created by the poem Andres group there's Zoo Stanton and valtio um and since I finished writing my book there's also Legend State and I feel like we we joked at the beginning that there is a new State Library every day but I love that I I mean if you think about it a few years ago it was just Redux and maybe more backs like Redux was like the go-to and the and if if you're feeling funky you use more bikes but since then for hipsters for hipster exactly and but but since then we have the this plethora of solutions and that is great because every app is different and every team is different and all these libraries solve pretty much the same problem but in very different ways so I'm happy to see that developers can read a documentation and no decide that okay I like this I don't like that and this speaks to me better and you know I even if even arguments like the documentation if you like how the accumulation is structured you will go back to the documentation you will use your library in the best possible way right if you hate the docs then you're not going to be able you're just going to fight the fight your app all day long and that's too bad yeah and like the same goes with the community if the library has a huge Community like you said guy from uh Redux toolkit he answers questions on like a few different platforms about this and I what I've heard is that's how he got involved in the like main uh react Redux team because he was so active in Reading so so yeah um maybe I can do a little sales pitch here to all of our clients maybe if you have a state solution that you don't like or maybe is not performant enough uh reach out we have Ola who is an
world-class expert uh author of a book about State Management we have uh other uh very very proficient development developers in migrating from one state library to the other introducing react query stuff like that reach out uh hola uh thank you so much we were discussing a lot of different State Library libraries uh let's talk about your book for a minute so uh if you could give me an advice how would I a guy who didn't write a book in his life how how did you approach right writing your book what was your process uh so I I was very I was very lucky to be approached by the publisher pact and I'm very very I was very humbled by it um before they approached me I did a couple of talks at conferences so I guess that's how I got discovered you may say and then um I got approached by this publisher and we had a couple of meetings online about what I could write about how much time it may take and stuff like that and then throughout throughout writing the book they were very nice in uh poking me and saying hey we need that next chapter like yesterday so networking and they were always they were always super nice and I was always late so I'm very thankful to them and and uh yeah I had to do a lot a lot of research that everybody can do but it does take a lot of time I have this quote that's actually also on my uh Twitter uh background that opportunity is often missed by people because it's dressed in overalls so this means that you get a lot of opportunities in life but once you get the opportunity you have to work hard to get something out of it yeah and I feel that writing this book was was totally like that opportunity was just like the beginning and then there's a lot of hard work that that goes into that and how
long it took you to do it it took me a year to like starting well maybe 11 months yeah yeah when you when you first told me about it it was February last year uh yeah yeah but then but in February so I I started writing in February but I started talking with pact in like November before that so okay okay um can you tell us again what is the book called and where people can find it where I can find it yes so the book is called simplifying State Management in react native and there's the very long subtitle is Master's date management from Hooks and context through Redux mobx X8 dodai and react query you can find it on Amazon and Barnes and Noble you can buy it for Kindle or starting January 13 2023 you will be able to buy the paperback version and I have a personal question for you since you're also a great expert I want to ask you if you would be willing to write uh write an opinion on the book and you will receive a free book if you agree so please agree I will do anything for for a free book of yours but only if it's signed uh I will definitely read the book and I will uh definitely write a video about it uh also complementary to the book is the repository that we talked about throughout this episode of our podcast uh is it on your GitHub where is it it's on a it's on the Publisher's GitHub but I think it's public so we're gonna put a link in the description um and yeah and my like my long-term dream is to build out a website like component party I don't know if you know the website uh componentparty.
dev uh that's a website where you can check different UI libraries you like you put in what what you want to use like um I don't know um button or whatever and you can check
dev uh that's a website where you can check different UI libraries you like you put in what what you want to use like um I don't know um button or whatever and you can check
how that would be implemented in svelte and uh view in react so like my long-term dream is to build a website like that for State Management libraries oh okay it's nice and hopefully I'll be working on that in the next few months over the next year yeah okay ah hola I can't thank you enough uh thank you so much you are a great colleague of mine uh I learned a lot from you every day on the project that we work on together and I'm so so glad that you came onto this podcast and we could talk about State Management thank you so much and thank you so much I I learned from you every day as well and I'm very humbled to be here and very thankful and thank you thank you to all of our listeners thank you for listening and for watching and to see you in the next episode of the react native Show podcast thank you foreign
Timestamps
Show
Guests
Aleksandra Desmurs-Linczewska
Software Engineer
@
Callstack
let's go back hello everyone Thanks for tuning in to the react native Show podcast before we start the episode about State Management let me quickly plug our newest free Ultimate Guide to react native optimization a comprehensive source of knowledge when it comes to improving the performance of your react native application we talk about the State Management here on this podcast soon and you can read how to make your State Management fast in our guide so make sure to check the guide after you listen to the show and yeah let's go let's go on with the show hi hello and welcome to the next episode of our the react native Show podcast where we discuss the latest and greatest of react and react native uh and we chat with awesome guests like my today's guest hola Des Moines a software thank you uh hola is a software engineer here at callstack and uh an amazing writer who just wrote a book about State Management which gives me an awesome SQ excuse to talk about State Management in react and react native on this podcast so hola can you tell us some more about your book what is it called yes uh so it's funny to hear like that I just wrote a book because it was such a long process that it it took a year but yeah I I did manage to finish it and the title is simplifying State Management in react native and there's like a subtitle that's very very long and um the subtitle is Master State Management from Hooks and context through yeah yeah through sorry Redux small box XJ dotai and react query yeah yeah so I guess you are describing a lot of different right libraries there exactly exactly the goal of the book is to show the whole landscape of different State Management libraries that are there for us to use funny this is the exact the same thing
that I wanted you to explain to us today so that uh that turned out great maybe firstly let's talk about statement the native State Management in react native uh the default one uh why do we even need state in react native yes so uh I I would guess most of us react native devs um where we are JavaScript developers basically right so JavaScript uh we think about web development websites uh and a lot of us started actually with react.
js and then moved on to react native in any case this is still JavaScript so um when first websites were created they were just they were mostly created on the back end and the back end would serve stuff to the front end and front-end developers would just show like a bunch of you know squares that we would always have to Center and we never knew how to um but um what what developed was that like the front-end Solutions are more and more complex and angular was born and react was born so we're doing more and more stuff on the front end and not we're not relying on the back end anymore we just get the data from the back end and we do all the magic on the front end also we have displaying the the static sites anymore we are creating web apps web apps exactly exactly so what the what the front-end developers realized is that when you have this web app it's difficult to manage all of the little things that change across your app you may have like a side menu or settings that are you know used across the entire app and you have to like drill down to find them so um so so the developers knew there has to be like a better way to manage this and that's when we um we got our first State Management Library that's external to react and it's Redux and we'll talk about that
js and then moved on to react native in any case this is still JavaScript so um when first websites were created they were just they were mostly created on the back end and the back end would serve stuff to the front end and front-end developers would just show like a bunch of you know squares that we would always have to Center and we never knew how to um but um what what developed was that like the front-end Solutions are more and more complex and angular was born and react was born so we're doing more and more stuff on the front end and not we're not relying on the back end anymore we just get the data from the back end and we do all the magic on the front end also we have displaying the the static sites anymore we are creating web apps web apps exactly exactly so what the what the front-end developers realized is that when you have this web app it's difficult to manage all of the little things that change across your app you may have like a side menu or settings that are you know used across the entire app and you have to like drill down to find them so um so so the developers knew there has to be like a better way to manage this and that's when we um we got our first State Management Library that's external to react and it's Redux and we'll talk about that
more later of course uh but that was like the first um the first moment that that we had like a better solution to manage the state of all sorts of different things of models themes whatever the user has in the web app and all of that kind of uh works the same in react native apps since it's also JavaScript so in just regular react we have the set State the use State you state hook now and set State previously in in classes so I guess that's the default one what are the limitations of the default State Management in react well the the regiment uh is well the biggest problem is that you have to you you say your state in your parent component and let's say like the the extreme example is that your parent component uh well the the thing that you want to set in your state is a theme for your app so you have to set it at the very top in like your parent parent component right and then you go through uh tens maybe even hundreds of components to get down to like some button that you have somewhere in some screen that has to be either blue or red or whatever depending on the theme so you have to pass this prop and never ever make a typo and never ever forget it uh and and then what if you want to change it through a button then you also have to pass the function that changes the state so it's a it's a whole it's a lot of shenanigans okay yeah so we needed a better solution and you said the first one was Redux sort of familiar with this the history of react um first we had set state only said State and we mostly use class components and then Redux was created and only after readers was created uh hooks were introduced so a lot of people kind of turned away from Redux and started using hooks
um because you state and news effect are more comfortable to use with functional components than the old set state with class components yeah I I wonder when in this timeline that you just set up for us when the context was introduced because context actually answers the question about teaming right you can have a context at the top of your app uh and uh context provider at the top of your app and context uh or what is it called um a consumer I think consumer uh when you want to consume the the steam variable right so and Redux actually uses context under the hood to uh to work its magic let's say yeah uh so context was introduced like context for us regular developers we was introduced after hooks or like along with hooks maybe or just after hooks uh it it still feels like uh sort of a new solution that people are getting used to it's like At first everybody was in love with it just accused effect and everybody would just put use effects everywhere in their apps and then they put context everywhere in their apps and I saw this funny tweet that if if your app with uh with your context providers if it looks like a bunch of uh geese flying East you know with the whole yeah that you have a problem you know this is not cool yeah so um so context is uh is an interesting solution but it's not uh a solution for everything yeah definitely okay so um I want to talk about your book now and let's structure this podcast as you structured your book so I want to um maybe start um discussing the philosophies of State Management there are hundreds probably of different libraries but we can gather even hundreds more since the book got published yes uh we have a new one every day uh seriously so we can probably group them
in some categories in some groups so what are the categories and how we can um yeah categorize the the State Management Solutions uh um a way to categorize them that I like a lot is by three fancy words flux proxy and Adam so the flux philosophy is what Redux uses it's um it's a so the philosophy you know it's not we're not talking about code we're talking high level just ideologies uh so flux is um something that was invented uh at Facebook it's a way to program that unidirectional um and it's it's a unidirectional data flow um and it's very important to not uh to to fight to be immutable like the state has to be immutable that's like a important part of it um the second type of State managed libraries is proxy so a proxy what it means is that it kind of uh the State Management Library kind of magically automatically wraps your components and mobx is one of uh is is a library like that and then we have Adam state which is uh the example of that is jotai which uses uh items that are very similar to use State hooks it's just like very tiny pieces of state so this is like high level philosophy stuff and now people also yeah if I can if I can interject here I think most of the Articles of most of the podcast that I've heard watched on YouTube uh actually deal with this flax versus proxy Redux versus mobex uh kind of division and those are the two main Players let's say on the State Management scene the atom is quite A New Concept right yeah Adam is new since um because it has it's like a year old maybe a year and a half and there's also there's also X state which kind of escapes all uh categorization and then we also have react query which
invites us to sort of think about State Management in a completely different way to consider service state away from App State and there's like a whole other game but we should think about it and we should consider it when we create apps yeah yeah yeah definitely so um having that categories in mind what was the research process of your book how did you um approach the the specific libraries what kind of um data were you looking forward to to describe them yes so uh what I like to do is I like to work on like on real life organisms I don't like to just stay in the theoretical field so I decided that I I created a simple app um it was at first tempting to do uh to do apps since that was like all the react tutorials we're doing to do apps but for react native that's that's so too small so it doesn't it's not enough to to do anything really I needed something where I would have navigation and different screens and I would have to share data between screens right so I decided to create a small clone of a social media app so it's I have this little app that I found like some free designs on dribble that I was able to use and you just have like your feed screen your liked images screen and like your conversations something like that uh so I said I I set up that app um using just react uh at first just react so Hooks and context and facing all of the issues that that are there with using just Hooks and contacts yeah yeah so the app is the field feed the wall that I have some photos on that I can like that again hurt them they have like a few tabs you have you liked images tab and like your settings tab and conversations and if I like uh post a picture or something it's appears in my like tab exactly yeah
that's that's exactly the the challenge to have you have the feed of somebody else's images you open the image in the model you like it and then it should appear in your liked images screen which is in no way connected one to the other so that's why we need a state management library to kind of manage all of that for us and maybe say some more about the state connections there so if I like this picture it should appear on the second tab but it also should have some indicator probably on the feed tab is there something else is there some other connections that we should know about no no no that's it I mean on the on the feed tab uh you you open a model and in the model you you click you you like you press a heart that indicates that image is liked or it's not like or when you open the model if the image if the heart is filled up you know that the image has been like effect so the model um I I use react navigation in the app so I have you know tabs through react navigation and and the model is um well it's a model it lives inside of the feed tab so you know yeah the feed tab doesn't even have a common uh parent with the liked images tab as much as you know just like well the root you know just like it is in react navigation sure thanks for explaining yeah and uh so so what I'm doing uh once the app is set up what I'm changing with every single Library I I would take that functionality and rewrite it in the given uh in a given with a given State Management library to see how difficult it is how much work it is and how how different it is to think using that library because and that is alert every like the the biggest difference is that every state management Library forces you to think in a different way about your state that's like the greatest difference I really appreciate that this is a very controlled
environment that you have your uh control group which is a set State and context and you have this all of these different libraries but it's all set up in one repository uh and the underlying root structure navigation structure is the same for all of them yes yes it's the same app like uh so I have the the basic app and then for every state management Library I just I took the app with just Hooks and contacts and I replaced hooks in context with a given State Management Library okay so what else what is the other the next step of your process uh after creating the app and plugging in the State uh Library management they're all doing a lot of research with my next step usually just the reading documentation uh and uh I was also reaching out to the creators of those State Management libraries I was very lucky that uh most of them replied and like replied to a bunch of questions I had about about their their libraries um but I hope we can like go one by one and then I'll go more oh yeah definitely I I I'd love to do that so uh shall we start yeah okay let's start with uh I would say it's the oldest it's the most hated but it is also the Bulletproof the the corporate chosen one uh can you guess what it is yeah it's Redux yeah people love to hate Redux yeah uh so Redux was created by Dan abramov at Facebook um and as I said a few moments before it's based on this Flex philosophy of unidirectional data flow and I highly recommend watching the Egghead course by Dan abramov on Redux because what he does is that he he sort of uh he implements Redux from scratch which is just uh very informative to watch uh and it's a free course so everybody
go ahead and do that and let's link it in the in the show notes sure and so what happened with Redux is that yeah it's it's people love to hate it because it's pretty old and it didn't in my personal opinion it didn't age very well uh because when you set up pre-dex you have to have a huge baller plate and when you have a big app it feels that every time you need to change anything in your app you have to change like a thousand different things so what happened is that um there was a another Library created like a um well it's called redex toolkit okay so the next toolkit was created to help it's a utility uh utility of of Redux yes exactly um so this utility makes uh working with Redux much easier uh and I also I recommend it and I uh it's maintained by Mark Erickson on Twitter his handle is Ace Mark and I spoke with him a little bit about um why why he works with Redux took it he told me that he just he just liked using it you know and then he would answer a bunch of questions and then he became very active in the community and now he's the main maintainer of Redux token and what's uh super impressive with um Mark Erickson is that he's like he he's in a bunch of different places answering questions about redex took it he's on stack Overflow he's on Discord he's on Twitter and he's very open to answering all sorts of questions um so that's the creators uh now going back to the library itself when you start with pure Redux and you listen to that Egghead course by Dan abramov he talks a lot about how state is immutable and that you should never mutate state right and you know if you use pure Redux and you write your reducer uh so as far as nomenclature goes you have reducers you have actions you have the store the
store is like the state of your app and it's and it's this entity that lives kind of outside uh of your app and all sorts of magic happens there and then if you want to change something in that stay in that store you have to use an action with the dispatch in action and then there's reducers also the state is like a global thing it's only one state even though there are some abstractions on top of it that you can treat some parts of a separate parts the state is one there's one one state in in Redux yes and if you want to change it you dispatch an action the red reducer listens I guess for that action and then what and then the state is changed and it's accessible to your entire app then you've stayed as accessible to your entire app but I wanted to touch a little bit upon the immutable immutable stuff because as I said if you if you use pure Redux you you can add mutate State because you know that the world will blow up if you if if you mutate state in your reducer pretty much so if you use Redux toolkit Redux toolkit uses a library called immer uh that kind of under the hood so even if you as the end user you may think that you're mutating state but Redux toolkit uses immer as well as a middleman so you you even you think that you're mutating state but then immer does its job to make sure the state is not mutated and then goes to this to to the implementation of Redux under the hood and the state stays immutable so um so that's interesting about the whole mutable immutable thing because sometimes it's it's hidden from us the developers who use the libraries yeah yeah I remember when I used the I I I guess the the two different approaches is that in the olden days you had to spread your array into a new array and right now you
can just push to existing array and email will just create a new array under the hood exactly exactly so the question is does it maybe like Emma is helping us but it's also maybe creating bad um bad uh what's the word like we are getting used to doing bad things yeah sort of you know if somebody works only with Redux toolkit they think they can just mutate State because that's well but the Redux toolkit is that the factor way of using Redux now it's the uh no I I forgot the word it's the go-to yeah it's the go-to way it's the recommended way of using research so I guess that's fine as long as you know that the state is actually not murated it is uh immutable yeah yeah yeah that's a bunch of very smart words we just said there like I I feel like we could have a whole episode about Redux and it could have been three hours long and everyone would understand half of it even if we would use smart words because Redux is so um is so huge in in JavaScript in react World like I feel like every Big app that wasn't written last year that I worked on uses Redux right yes yes totally Redux is synonymous with react pretty much right now if you look at uh if you look at job opportunities like uh job offers there's if if they want react they want Redux as well like 90 of the time uh and it is it is like battle tested and but the the sad thing is that we are so used to it being that it's better tested and it works really great that people are afraid to look outside of Redux and try to find something else uh so like that's a fun fact that wukash and I we work uh currently together on a very big app that uses Redux and it's seriously it's mostly so we have Redux took it as dependency but we don't take advantage of it enough in the app and so most of
the app is just pre-redex and it's making us sad sometimes like we're trying to do slices and stuff like that but it's uh you know we have long ways to go for it to to be comfortable to use I think actually I am happy to work on this project because you are in it and you are a nice State Management so yes the project I am very happy to worry about that project as well but yeah I would be happier if we had more Redux toolkit and less Redux so I want to finish this redact discussion and you said one thing at the end of there uh that uh Redux is so ubiquitous that people are afraid yeah thank you are afraid to look outside of Redux to look for something else there what else is there yes so uh so we're off to the next section right um we we talked about this pure react reaction context and hooks we we looked at the staple the Redux uh library that everybody seems to be using and now let's Venture a little bit outside of the box uh the next library that I looked at in my book was mobax uh mobex was is also like the oldest the second oldest after reading which is still inside the box to be honest that's the the second the the second most used probably yes yes yes exactly my box was sort of like an answer to the first uh problems where people said oh we don't really love Redux so so they modbox was created it was created by Michelle best trade oh my God I hope I pronounced his name right so he's also the creative Emir and he also has a course on Egghead about mobex and it's also a very good course and it's free and I recommend it in the show notes of course uh so the thing is uh with uh the biggest difference between Redux and mobex uh how mobox wants to
differentiate itself is that um mobx is a reactive Library it's it uses reactive programming so let's start with this whole philosophy again um so in mobx you have as I said it's categorized as a proxy State Management library because it kind of wraps your components and it tells them uh to observe stuff or be observed and then the changes happen asynchronously and they are observed and stuff is changed so you know it's kind of like this the that's the idea the high level idea uh behind mobex on their in their documentation they say that they use functional reactive programming so um I tried to understand what that meant so professional programming you know it's the opposite of imperative programming um no like reactive programming is um the opposite of imperative programming so I have a good example for that actually yeah so um in imperative programming you can set that variable a equals B plus c and if you change uh if you change B and C A stays later on in the program a stays the same because B and C were changed later on so in reactive programming uh when you change B and C later on a will be changed as well because it reacts to the change because it's it's computed the the more bags I I love mobex I need to be honest about this like this is my favorite State Management library and I like I build I even build some helpers for myself years ago to for it to be more stable let's say to behave more like uh Redux in a sense that you cannot do everything everywhere you have to follow some rules but I wanted to what I like about mobex is the computer things like you said if I have a computed value that depends on three different value values if even one of
them changed changes my computed value is changed as well and something observes this value and re-renders so I don't have to care about setting five different state pieces because some action happened I just changed this action and my style state is derived from from this small change which I really like a lot and which saves me a lot of time while developing but and they create the afterwards yeah it's hard to track what yeah it becomes sort of a web of uh dependencies so the the creators of mailbox interdocumentation they talk a lot about deriving stuff and they like they encourage the users to derive everything that is possible to be derived because that that ensures that your app your your app will stay up to date right because all this stuff is driving you don't have to think about what what depends on what um so um so that that's how Redux is different from modbox uh and I can tell you how modbox is similar to Redux is that Redux has Redux toolkit and mobx has Mobic state tree yes so as much as mobex is unopinionated and you can use it with any UI library that you want mavic state tree is a little bit more opinionated and it has a lot of helper functions and utilities and honestly the utility I love the utilities in Mobic state tree it's like they it's it's almost as if they thought about everything you you can you can just find everything you may need to drive all sorts of data and construct your your state tree how you want to and um Mobic state tree is maintained by German Holmgren who is the uh CTO or CEO of infinite red oh my God I can remember now but I think he's a CTO yeah CTO CTO yeah um so I spoke with talks about Mobic state tree constantly and also Mobic slatery is a default weight of State
Management in ignite which is a boilerplate for react native yeah exactly and Mobic state tree was also what I used I didn't use pure mobics I use Mobile x83 in my app uh because after reading a little bit about it I thought that just using mobex alone would be a little bit more painful than Mobic state tree and mock state tree was a breeze it was it was awesome because you set up you set up your State uh like in your tree with all the actions and all the stuff and then you tell the component to observe it and you're done and um it was it was really it was really nice to to use uh I don't blame you for for loving it yeah I I do love mobex but it's been a while since I used it last time because like you said we work on a huge project which uses really Redux so I'm in the Redux territory uh right now but I I want to ask about the terminology in the Redux word you said we have reducers uh State actions what are the counterparts in the mobx world oh it's difficult to talk counterparts since it's it's set up very differently in in Mobic state tree so you have you have your one like your one file let's say in in Redux you have to set up all your stuff your actions separately your reduces separately and your store somewhere else so in public state where you you create your one file that would be sort of like a slice in Redux maybe a star philosophically a sort of yeah and uh so you set up your uh your object and the actions on the object are kind of set up all together in the tree um and I can't remember if there are if there are any specific well there's the Observer yeah yeah that was that what I was uh aiming at that you have to run your components in observers to listen for the state changes basically so that
yeah that that is one word that is specific for which is which is like a counterpart of connect in Redux or yes hooks somehow right yes totally totally that would be the the counterpart yeah of connect I would say so yeah and uh Mobic state tree uh is uh uses typescript as a first class citizen so I started out really writing my app in JS because I thought that maybe creating it in typescript would add another layer of difficulty to the readers so I wanted to avoid that and I I just I would just write everything in JavaScript and then I got to mobex and then I was so sad because it's so much better in typescript everything is typed and it's safe and it feels like you just you can't break your app because you have to you have to add types and um you know there was a I thought was too bad that I used JavaScript at that point so is mobx Branch the only branch in typescript in your in your project no I still use JavaScript I wanted to like I wanted to keep that control environment but I did wrote In the book that all the examples from Mobic state tree are in typescript and that I recommend to look into it yeah for the readers okay thanks a lot that I think that wraps up our mobex discussion mobex is the best State library and you should use it with Mobic State 3.
let's move on right now I want to look at something really outside the box and you said that in the very beginning that some libraries follow flux so libraries follow proxy uh some libraries are Autumn based and there is one that that yeah which one is it then there's X state so x-state is a library that was created by David corshin and also I hope I pronounced his name I write his on Twitter his handle is David K piano and is also very active uh on Twitter
let's move on right now I want to look at something really outside the box and you said that in the very beginning that some libraries follow flux so libraries follow proxy uh some libraries are Autumn based and there is one that that yeah which one is it then there's X state so x-state is a library that was created by David corshin and also I hope I pronounced his name I write his on Twitter his handle is David K piano and is also very active uh on Twitter
um so um and one of the nicest things about X8 is that it has a visualizer so we have this website uh where you um it's free to use you just dump your state machine we'll get to that in a second and you see you see a visual visualization of all the stuff that can happen in your app if you do this what action will happen how the state will change and where where what is the next state so that's super useful and I also had a chance to exchange a couple of messages with David and he said that actually working on the visualizer is the most difficult part and that's what takes most of his time uh not the library itself um yeah so going back to the library itself it's rooted very strongly in mathematics um and exactly in the concept of State machines and the concept itself is that anything can be in only one state at any given time when you when we go to um web development or app development you have a button and it's either clicked in our checkbox it's either checked or it's not checked it's always in one of those two states so you start out with this um with this sort of mental model that uh all of this stuff in your app has to be in some sort of state and you model your state machine on the basis of that you kind of write you have to you always have to have your default State and then you you tell your machine that if this happens this element should go into this state you know so um so that's that's all very much based in high level mathematics there's a in the XC documentation which is very well written there's a bunch of links to articles about all those mathematical Concepts
and well it has to be well written because the concept itself it's so outside of the like your normal World normal thinking about programming I remember some of it from University uh did you like it like the concept in abstract seems simple but when I look at our application and the whole array of states that should be in different states right and how they interact with each other I cannot rub my head around connecting this to anything else that Redux like this is a completely different mental model and uh it is yeah so how did it Go including this into your small let's say small scale uh yeah application the scale the scale is very small so um X8 is this is just a personal preference I love that State Management Library that's actually my favorite and and whenever I use it I feel like if I start out with just a Bare Bones react app and then I add x-state I just can remove like all of the use effects and all of the crap because x-state manages all of it uh and so so that's like um it's very succinct um you have your all your States in one place and you have your machine and then you kind of then you pass it through context and you use it in your app and it's um very logically linked like in this state machine you have everything Linked In the state machine uh they also it's uh the X8 also makes it very easy to use promises because promises are State machines when you think about it the mental model right you you go in you have your your loading then you have either success or failure so you they they just they they fit in like a puzzle piece into your state machine you can do all your fetching and it doesn't feel like with Redux fetching feels and and saving data feels like a work around
yeah a little bit unnatural with with x-state it you feel right at home it's fine you have your promise you have your data it's loaded it's not loaded it changes it's very comfortable to use uh as far as complex applications are concerned there's this concept of State explosion and it's a it's also a very uh there's a very nice article in the XC documentation that we can also linked in in this podcast because you start out thinking about this uh this mental model this uh state that you have a check box and it's so easy and simple but then you have five checkbox checkboxes and maybe an input field and the input field has depends on check boxes and maybe on the tags that you put in and it can be valid or invalid and it's sort of kind of it blows up that's what I said before that one checkbox is easy enough but then everything depends on each other and it it becomes a mess can you please and it's called the state explosion and there are Utilities in yeah and there are Utilities in uh XD that help you get your head wrapped around that and and get your code working and and being readable which is the most uh I was going to ask you about something but first let me uh let me ask you about something else and then please remind me to ask you a proper question but the less proper question is this is a quite new library as well right this is also around two years old so we can so the proper question is can you please dump it down dump down the use of this library for me what is the connections to react where are the different where do different pieces of X State live what do I have in my component how do I change the state stuff like that all of the state changes uh happen in your state machine so you write your
state machine it's just one file where you where you set up all the states that uh your thing your piece of State can be in if it can be checked and checked valid invalid um whatever you you write your state machine you export it and then as far as react is concerned you pass it through context and then you use it across your app and next state make sure that your app doesn't re-render a thousand times in my react component I have access to this one checkbox and I have access to some function that changes this checkbox what is the function well in your component you you add your like use machine hook because you know hooks are fancy and everybody uh so you uh yeah you have you have you you can have access to anything you want to export from this from the state machine because maybe you can like the ideally you would have all of your inner workings and state changes in the state machine and not in the component right so ideally but then sometimes you need to like pass a function that if you click this button this should change so yeah this is all exported from the machine and um we'll use the two hooks sure okay uh I will definitely look into the documentation of this like I said um it feels just weird uh but I take that you love it and from your recommendation I'm gonna try it as well in my next weather up project or something like that yeah I'm a small scale yeah it's like a very very super personal opinion it's like I I cannot tell you why I like react and other people like angular it's just they're mental models that that what who does like angler who like people used to like angular moving on from my bad joke about angular uh we were talking about uh X State now and let's move on to the last on our
philosophies list the atom philosophy and the representant from atom philosophy is Joe Tai take it away yes so Joe Tai is is the baby of the bunch is the youngest library but it was actually created because there's another Library created by Facebook called recoil but recoil is uh they have a GitHub repository but it's marked very clearly that it's an experimental library and it's been an experimental library for a year a year and a half and the creators of uh dotai were tired of waiting for recall and they created their own implementation um and they call it um they call it jotai which means something in Japanese probably because uh the creator of uh jotai daishikato he is Japanese he's part of I'm gonna translate it in the background or something yeah and please talk sure so daishikato is part of this group called poimandres is a group of it's a um it's a group of people who love all sorts of react stuff and they work for free on uh on making all the react World better pretty much they have a Discord Group which is open and anybody can join and they also have a Twitter account and they also created a bunch of other State Management libraries they created Zoo stand which is like a modern Redux implementation they create a valtio which is a modern mobx implementation and they created Joe Tai which is this Adam implementation the mental model behind Joe Tai is that we don't have this blob of state but we have very Atomic small pieces of state that are not necessarily linked together so I tried out this library in my small app and I cannot vouch for how it would work in a bigger app I have no idea in a small app it worked very nicely like it sort of felt like magic
um and you just use hooks hooks in context pretty much but the you know the specialized folks that use item uh they have async items for fetching and the documentation is very short like it will take you a half hour to read the entire documentation um and you can the library is very open to adding uh different things to it that you can use it it cooperates very well with other um libraries that you may have in your app and and yeah that's pretty much it and I also spoke with daishikaru a little bit on Twitter and he's also very active on Discord in deploymentors group and on Twitter and he just started giving out talks like this the last year I think was the first time he appeared in person uh at a conference to talk about dotai so okay that's nice uh I checked and jota Amy means State there you go um also means stayed in some language yeah uh zosta I also heard about um what would you say is the biggest selling point of jodai uh over more battle tested libraries the biggest selling point is to for people to stop going automatically to Redux because if you're writing an app that is not huge but just I mean ninety percent of apps that we use are not huge let's be honest it's like a couple of screens and yeah it doesn't need a robust State Management Library um that needs a huge bowler plate um so the biggest selling point is to think twice and maybe all you need are just a couple of items yeah and they'll be enough for your Global state and also like this is a different paradigm from the X state is is other league but yeah the the Paradigm is different so I guess it's nice to
check view options during your career right and figure out what you like best and maybe pick and choose maybe you can mix them together and maybe you can think of something yourself in your day-to-day development has nothing to do with State Management but maybe you can introduce some of other philosophies in in your code architecture exactly exactly exactly okay uh we were talking about state which is jota in Japanese and now let's move on to reacquery which is yes I think the last one in your book yes is that correct yes okay yes exactly because that's the the outlier it's not the youngest library but it's the outlier because it invites the developer to think even more outside the box right because we were just talking about how to manage state in your app uh so this means every every app virtually every app fetches some data and then has to do something with that data on the screen to display to the to the user so uh what react query did when they came on the scene is that they said hey maybe you know this is server State and maybe you shouldn't play around with it in your app in in the state of your app I just respect that is this is server State and all you have to do is make sure that it's fresh and that's it uh so if if your user changes the theme of the app and the theme that they are using is preserved on the server because every time the user logs in you know they request the stuff from the server and the server says oh hi your name is this and you like to use the Dark theme we don't have to you we don't have to keep that in the state of the app we can just use the server State and just make sure it's fresh so that's that's the that's the philosophy behind react query which is actually rebranded it's tan stack query
right now because it was first created to cater to react but then they expanded it was created by Tanner Lindsley and the he has a bunch of other libraries and he decided to Rebrand so that people know that 10 stack query can be used uh with different different libraries different UI libraries um and the the biggest resource the best resource for learning about tan stack query is a Blog by TK dodo that's his handle on the blog and on Twitter uh his name's real name is Dominique I'm not I'm not even sure about his last name but uh so he's he has a Blog about uh tan stack query and this is the best resource to learn about this Library okay uh one thing that I want to comment on uh from your description of downstack query react query previously react query is the much better name right I can't get used to tell the query either yeah give us that uh so just so I understand and so our listeners viewers understand previously in react and more box and other and every other State Management Library what you have is you have your asynchronous action to your server server gives you some data and then you push it to your store you just save it to your store and react query is actually a caching mechanism that just uh ask your server for some data and like it lives in your application but somehow yeah somehow not so I'm not exactly exactly uh so you described it very well uh the the biggest that you did describe very well the biggest difference that with those State Management libraries we we Fetch and we keep this state and the the service that we put it in the App State and we try to make sure that it's synced that it's the same maybe you know we run some fetches to the server from time to time uh or not and with react query you you
just you fetch the data and it it lives in a cache layer which is um which is accessible to hooks again you you set up your contacts your query context at the root of your app and then you across your app you use a hook and I remember wukash we spoke about adding a react query to the project we are working on and I remember that we had this conversation where we were in a group and people were asking okay but how do you get react query data into Redux because like that's the first thought that's like the first right but you don't exactly this lives completely separately it's just a layer it's a caching layer uh pretty much and you don't you can so you you have like for example you have like uh functions to mutate data but you the mutate the data mutation functions are actually post functions to a server right you post data at the server and that's the mutate function pretty much but then there's a whole bunch of magic that happens so that before the server responds you can display some stuff um so so caching is the basic building block of your query and then there's a whole bunch of magic with uh pre uh pre-loading optimistic updates infinite queries um it's today it's a very well developed library that answers real problems in real apps yeah yeah yeah I I like it a lot uh I have not used it but uh you introduced it to me and since then I really uh I really get a feel of how it can improve uh my life as a developer and my applications uh and that was real query is the last uh State Management in your application in sorry in your book okay in your fabulous book uh what are the other uh honorable mentions that you want to briefly maybe talk about what other state libraries are there that you maybe not didn't have time to include in
a book yes so as I mentioned there are a couple of libraries created by the poem Andres group there's Zoo Stanton and valtio um and since I finished writing my book there's also Legend State and I feel like we we joked at the beginning that there is a new State Library every day but I love that I I mean if you think about it a few years ago it was just Redux and maybe more backs like Redux was like the go-to and the and if if you're feeling funky you use more bikes but since then for hipsters for hipster exactly and but but since then we have the this plethora of solutions and that is great because every app is different and every team is different and all these libraries solve pretty much the same problem but in very different ways so I'm happy to see that developers can read a documentation and no decide that okay I like this I don't like that and this speaks to me better and you know I even if even arguments like the documentation if you like how the accumulation is structured you will go back to the documentation you will use your library in the best possible way right if you hate the docs then you're not going to be able you're just going to fight the fight your app all day long and that's too bad yeah and like the same goes with the community if the library has a huge Community like you said guy from uh Redux toolkit he answers questions on like a few different platforms about this and I what I've heard is that's how he got involved in the like main uh react Redux team because he was so active in Reading so so yeah um maybe I can do a little sales pitch here to all of our clients maybe if you have a state solution that you don't like or maybe is not performant enough uh reach out we have Ola who is an
world-class expert uh author of a book about State Management we have uh other uh very very proficient development developers in migrating from one state library to the other introducing react query stuff like that reach out uh hola uh thank you so much we were discussing a lot of different State Library libraries uh let's talk about your book for a minute so uh if you could give me an advice how would I a guy who didn't write a book in his life how how did you approach right writing your book what was your process uh so I I was very I was very lucky to be approached by the publisher pact and I'm very very I was very humbled by it um before they approached me I did a couple of talks at conferences so I guess that's how I got discovered you may say and then um I got approached by this publisher and we had a couple of meetings online about what I could write about how much time it may take and stuff like that and then throughout throughout writing the book they were very nice in uh poking me and saying hey we need that next chapter like yesterday so networking and they were always they were always super nice and I was always late so I'm very thankful to them and and uh yeah I had to do a lot a lot of research that everybody can do but it does take a lot of time I have this quote that's actually also on my uh Twitter uh background that opportunity is often missed by people because it's dressed in overalls so this means that you get a lot of opportunities in life but once you get the opportunity you have to work hard to get something out of it yeah and I feel that writing this book was was totally like that opportunity was just like the beginning and then there's a lot of hard work that that goes into that and how
long it took you to do it it took me a year to like starting well maybe 11 months yeah yeah when you when you first told me about it it was February last year uh yeah yeah but then but in February so I I started writing in February but I started talking with pact in like November before that so okay okay um can you tell us again what is the book called and where people can find it where I can find it yes so the book is called simplifying State Management in react native and there's the very long subtitle is Master's date management from Hooks and context through Redux mobx X8 dodai and react query you can find it on Amazon and Barnes and Noble you can buy it for Kindle or starting January 13 2023 you will be able to buy the paperback version and I have a personal question for you since you're also a great expert I want to ask you if you would be willing to write uh write an opinion on the book and you will receive a free book if you agree so please agree I will do anything for for a free book of yours but only if it's signed uh I will definitely read the book and I will uh definitely write a video about it uh also complementary to the book is the repository that we talked about throughout this episode of our podcast uh is it on your GitHub where is it it's on a it's on the Publisher's GitHub but I think it's public so we're gonna put a link in the description um and yeah and my like my long-term dream is to build out a website like component party I don't know if you know the website uh componentparty.
dev uh that's a website where you can check different UI libraries you like you put in what what you want to use like um I don't know um button or whatever and you can check
dev uh that's a website where you can check different UI libraries you like you put in what what you want to use like um I don't know um button or whatever and you can check
how that would be implemented in svelte and uh view in react so like my long-term dream is to build a website like that for State Management libraries oh okay it's nice and hopefully I'll be working on that in the next few months over the next year yeah okay ah hola I can't thank you enough uh thank you so much you are a great colleague of mine uh I learned a lot from you every day on the project that we work on together and I'm so so glad that you came onto this podcast and we could talk about State Management thank you so much and thank you so much I I learned from you every day as well and I'm very humbled to be here and very thankful and thank you thank you to all of our listeners thank you for listening and for watching and to see you in the next episode of the react native Show podcast thank you foreign
Show Transcript
Łukasz and Ola team up to discuss state management in React Native applications. As there’s no magical formula for handling it, don’t expect straightforward direction or easy answers.
State Management in React Native
- An overview of state management in React & React Native apps
- A deep-dive into state management libraries based on different philosophies, including Redux, MobX, XState, Jotai, and React Query
- An insight into how Ola compared these libraries when writing Simplifying State Management in React Native
- A few words of the book-writing process as seen by Ola
State management libraries
New state management libraries keep appearing, so choosing the one that best suits your project and taste may be challenging. We hope to help you make this decision and get a broader perspective on state management in React Native by having Ola and Łukasz discuss the following aspects of a few libraries:
- The people behind them
- The category they belong, e.g. flux vs. proxy vs. atom, mutable vs. immutable, battle-tested vs. experimental
- How they work and what it means to the developer
Resources for mastering State Management in React Native
Need help with React or React Native projects?
We support teams building scalable apps with React and React Native.
Let’s chat
//
Insights
Learn more about
React Native
Here's everything we published recently on this topic.
//
React Native
We can help you move
it forward!
At Callstack, we work with companies big and small, pushing React Native everyday.
React Native Performance Optimization
Improve React Native apps speed and efficiency through targeted performance enhancements.
Code Sharing
Implement effective code-sharing strategies across all platforms to accelerate shipping and reduce code duplication.
Mobile App Development
Launch on both Android and iOS with single codebase, keeping high-performance and platform-specific UX.
React Native Development
Hire expert React Native engineers to build, scale, or improve your app, from day one to production.
