React State Management (P5D58) - Live Coding with Jesse

Key Takeaways

hey everyone uh welcome to live coding with jesse and today we're going to work with state and react and um let me fix this screen for you if you remember yesterday uh i had some different monitors hooked up to this laptop so uh it shifted around the screen and um so last few minutes i've just been trying to get everything back to normal uh so happy friday it's crazy the week's already over uh i got off to a late start today i had my uh my youngest son ambrose who's three he's been having trouble swallowing and been getting things like stuck in his throat so we went in for some testing this morning at a hospital and he wanted me to go uh so uh i went in with him and uh he did a great job um all the nurses said it he did better than uh than the the uh grown men that were in there before him so i was proud of that little guy so i took him out to mcdonald's afterwards so uh anyway enough about me uh but anyway i just meant to say i got off to a really late start today because of that so i haven't had gotten to do that much with the project so it's pretty much in the same state that it was in yesterday uh so most of my work has just been in transferring data from the old database to the new database which you know all that is kind of behind the scenes and nobody really sees that um let me i want to move the chat window over to my other screen so that i can see it more easily and i don't miss your comments let's see and uh so there was a live stream about the free code camp youtube channel on another youtube channel called engineered truth i think that's what it was engineer truth i'm pretty sure that was the name of the channel but anyway it i should have grabbed the url for you all i don't have it right now uh but it was a pretty cool live stream it was quincy who if if you're not familiar with free code cam quincy is the founder and the head of free code camp uh but quincy uh was talking with another youtuber whose channel is very successful uh and this other youtuber was giving quincy a lot of advice on um how to make the free codecamp youtube channel better uh so it was pretty cool but it so if you have your own channel and you want some advice on on how to grow your channel definitely check that video out i mean a lot of the advice is not specific to free code camping could definitely be applied to a lot of different uh different types of of channels different content but especially if you have a channel about about tech or coding check that out so that was that was really cool and um of course it was cool to see my videos on the screen there uh in the live stream uh when quincy was showing like the youtube dashboard behind the scenes and so anyway that was cool i may be trying to incorporate some new things into my streams uh i'm going to try to maybe name them my streams like a little bit better so there's not going to be any major major changes for me uh but you know maybe just some some really like you know subtle things okay so it looks like yeah all right so we have a decent uh amount of viewers in here right now so i think we're safe to uh to get started so i figured today we'll do two pomodoro sessions uh so those are two 25-minute periods of code and in between those periods of code i'll answer some questions in the live chat so if you have any questions feel free to put in the live chat i won't probably won't get to your question immediately but i will answer it before the stream is over um so i uh i'm sorry i'm distracted by messages coming in so uh just for the new people in here for those of you who are seeing the stream a lot sorry i'm going to go over this again but uh at least once a week i think i'm going to try to go over what we're doing in the stream so the quick version for everyone who's new is this is my daily work i'm a front-end developer for a small university and uh i work partly from home and partly in the office i'm at home today and whatever i need to work on for for my job is what i stream so these streams aren't exactly tutorials although i do my best to explain what i'm doing and i'll answer any questions that you have but i say they're not tutorials because sometimes we don't go in a logical order in terms of starting with beginner level stuff and working our way up i just have to work on what needs to get done so having said that yeah i just want everybody to have the right mindset coming in that you know it's not a tutorial but it is a glimpse into my work as a front-end developer i may not be the average front-end developer i don't i don't really know but it may be helpful for you all to see what kind of work i do and most importantly how often i mess up because i i do mess up quite frequently if you don't believe me ask people in the live chat i'm sure anybody that's been watching for you know more than a few shows has seen me mess up quite a bit uh but we work through that together so feel free to put your opinions in as well uh if you see me in doing something that looks wrong call me out on it all right i i am very very open to constructive criticism uh so uh yeah so don't don't be afraid like i'm not here as the expert really i'm i'm here it's just another web developer and just sharing my stuff and sharing what i do all right let's get started and first i'm going to make this bigger so i'm sure that's difficult for you all to see and that should be big enough let me know uh so i have a preview open on my other screen so if i can read the text then usually it's good for you all to read it and uh so right now let me give you a recap if you're interested in seeing all the code yourself or even downloading the code uh for your own use or for you to work on it uh check out the link in the description for this github repo um all right so we we there's a really good question that just popped up in the live chat and uh it'll be good for me to address this before we start um state management so the question of state management are we doing redux mob x so here's what we're doing we're using component state right so usually when you hear about state management it's followed by with redux or with mob x or with whatever okay but we're going to use component just regular component state um why would we use that well i i don't think we need mob x or redux right so those are excellent things i've used them before i really i should say i've used redux before i haven't used modbx but i'm i'm aware of the differences uh so i like them both and i think they're very useful when needed but i don't think we have the complexity here in our use case that warren's bringing them on so i'm gonna go through okay well what if we don't really have to do that much but we do need to manage state uh we just need to pass state between a few parent and children components right how do we do that so that's what we're going to do today we're going to have the state live in a parent component and then it's gonna get passed down i think two levels uh to a child component right in this case a grandchild component i guess all right and then we're going to change the state that lives up here in the top component when we click on the child component so we're going to have to pass around some things so the state of open or closed gets passed down as props to our child component but then also we're going to need a a click handler that's going to live in the parent component that also gets passed down to the child component all right so this is not something like groundbreaking or really new like no one's ever done this before in fact we've done some similar things in our project before this but uh i'd like to walk through it with you all and i should here we are okay so let's see let's get rid of that i still haven't fixed the warnings on there so apologies for all that uh so here's what we have we have a drop down menu and then inside here we have a secondary level right and right now what happens is so i've opened these up and if i click out of here and i try to go back in they're closed that's not a really great user experience right because if i go to this section like let's say i go into one of these pages in the undergraduate section and i realized either i've read that page and i want to learn more or oh i'm on the wrong page then the user ought to be able to go directly back here and pick up right where they left off but that's not happening right now okay why is that not happening well that's what we're gonna figure out why and figure out how to fix it right and we can see that we've managed to get that to work here so i can open academics i can shut it and open it back up and it's still open right so we have the correct behavior that's happening here but not down here all right so i'd say the the first place that we ought to look then is how are we doing this here already and can we use that same technique uh for this this other part of this menu so for that let's go here and let's see we have drawer item okay yeah so drawer item drawer item is our component that and i forgot to start my clock there we go let's start our pomodoro timer so draw item is you know this this component so these are the drawer items so we can see in drawer item let's see we do have uh this click handler and that is what is expanding those those sub menus all right the the lowest level uh of the menu but we don't have any other click handlers right so at that top level which is here this top list item when we have an on click and expands the item it it calls this expand item and it passes in this case the item id but where is this coming from right so that's the click handler and then number two how do how does it know that that's supposed to be expanded well it's from this is open props so we need to track is open and we need to track expand item up the component tree and see what we're doing so drawer item the parent component for drawer item is drawer so let's see what's going on in drawer uh so let's find out where we have a drawer item and see what we're passing there okay so here's our is open and our expand item so it looks like this props drawer menu is about so it's actually props we're getting it from props here and then we're also getting this from props as well so our state doesn't live in this component either we need to go up another component so let's let's check it out now the parent component of drawer is a component called layout which i don't think i have up right now all right so let's open this up and find layout layout.js we'll close this all right so in layout let's see what we have let's go let's go down here to where we have drawer and you can see we're passing down the toggle drawer or i'm sorry the expand items and then draw items is this yeah so this is what were we were past passing down so you could see we're passing down from layout to drawer so you could see drawer items in this case it's dot about because this particular item is about we're not going to be hard coding the item name so we're definitely gonna have to come up with a different way to do that uh and then the expand item so and then we see that's what finally gets passed down to our draw item component so let's go back up to layout and see where these are coming from so let's find expand item which is a function uh that lives in this component and then let's check out state to look at drawer items in state so expand item accepts item id and then based on that id it changes the state of that particular item from either open or closed or i i believe it's true or false yeah so it's true or false meaning if it's true it's open if it's false it's closed so the menus you know true or open or closed okay so that's where essentially this needs to be either replicated or changed so that it can work in both situations what i'm going to do first is we're going to replicate this we're going to move basically we're going to move this function this sub item expander function right we're going to move that out of this component and into layout and try to make the same thing work uh here now if we find that maybe we could refactor and only use one function for both maybe we'll do that the first thing first things first let's just get it working okay now at this point i do want to ask do you think that it's necessary to have it live all the way at that top component for it to work like we wanted to could we just change things so that it would work um without moving it up so i'm going to start working on this but i do want to know if anybody if anybody really thinks hey there's a better way to do this so i'd rather consider a different way now than um then do all the work and figure out that it's not going to work or we could have done it a better way all right so as if anybody's gonna uh i know there's a delay so if anybody is gonna uh throw in their opinion i'll keep checking the live chat but while i'm doing that let's see first thing we're going to take is this we're actually let's remove this console log i don't think we need the console log anymore okay we're going to move this first and then we're going to move the state okay now if you'll remember we already have drawer items in the state here so we may have to change the name which is not really a big deal so first let's take this take it out of here and let's add it in now we've already renamed it from this other component which it was based on or this other function that was based on so we should be okay so now that is there but what we need to do is pass this down as a prop so in the same way that we've done this with expand item we're going to pass it down as well to draw as expand sub item alright so now expand subitem will be available to the drawer component all right so this function will be able to call this function from the drawer component all right so that's one step we got to take another step after that but first things first let's get this state set up as well so i don't want to mess up what's going on here with drawer items like i said we can always refactor later if we find that you know hey maybe we don't need separate things so i'm gonna say drawer sub items okay now that i think about it that naming doesn't make the most sense but i think it's um um i think it'll work so for drawer sub items yeah we're not going to put anything there yet right because we're not hard coding the values so we're just going to leave that as an empty object and now let's modify what we have here because we're no longer going to be setting the state for drawer items we want to set it for drawer sub items and we have to change what's here as well draw sub items okay so that's now uh when this is called it will take drawer sub items and it will combine whatever was there with the new value for this particular item okay so so far so good i mean logic wise it seems like it makes sense okay okay great oh i know we need to pass down the drawer sub items thought i was forgetting something so let's pass down we'll just copy this so we can change it um for sub items okay so these drawer sub items save that and now let's go down to drawer so remember we now have drawer sub items and expand sub item that we're we're gonna have access to in the in drawer.js all right so it's going to be a little bit different here so let's take this is open uh how am i gonna do this i was hoping to find a way to do this oh yeah here we go so we have four uh drawer items in here which it's it's a little silly we should really just map over these but we never got around to refactoring that so did i not get all of them no all right so i'm sure chinese multiple cursors to do all this in one go instead of uh copy and pasting there we go okay so i'm gonna have a new line here and we're gonna call this expand sub item and we're going to this props so item okay so essentially we're just passing that function down another level we're not doing anything with it we're just passing it on okay and then we need to change one more thing and let's see where it is open this is open and actually how did i pass this on juror sub items okay uh so i'm going to 2 3 [Music] let's see let's take this is open and so is sub open okay once again the naming could probably use a little work here but uh what we're going to pass down is this props sub items let's make sure got everything all right looks like it okay so once again all we're doing here is just passing down everything from layout through drawer to drawer item we've done nothing to change it okay now here's where we need to to do a little bit of more work so we don't need state now in this component because our state now lives in layout but what we do have are a few more props so let's add them here so that we don't have to write this props within our component so we have is sub open and we also have expand sub item let me check my timer all right great 10 minutes i feel i think we're going good on time because i haven't messed anything up yet it feels like i'm doing a good job today okay uh so now we we need to use these in the proper place so what we're going to do let's just grab this so that we can just kind of copy exactly what's going on here so let's go into our sub menu items and within there we're mapping over the items and if a particular item has another menu within it another sub menu all right then we're rendering this particular version of it and we need this on click oops not that one wrong one trying to find the right on click expand sub item there we are okay so we're gonna expand the sub item we don't need this all right so before we were calling this directly now we don't need it we have exp should work yeah so expand sub item and then we're passing it the item text so that uh that's going to be like the item id that we saw in in the function when we moved it into layout and then we need to make sure we're grabbing the right items yeah so we we no longer can get drawer items we need to get drawer sub items is that what we're getting so we caught it i'm pretty sure we did define it well let's get rid of this as well so that doesn't live in states what did we call him again oh you know what we just said is sub open all right i think all right this is the first mess up i think i forgot i forgot something yeah so what we were doing uh let me climb back up here to the top uh so we were getting some data where are we getting the data from the data was coming in before wasn't it oh there we are okay so here's our data so let me make sure we're gonna we have the data that we need okay i think we're fine i think i just um okay yes so let's go is sub open yeah is sub open item touch all right that's what we need sorry i was freaking out for a second because i was like wait a second like how are we getting our data in here and that was fine we didn't everything's all right so instead of drawer items again we need is sub open here we are and just double checking here making sure we have everything and now this should not affect anything down here because this is only uh for items that don't have a submenu okay all right let's save it and best way to figure out if we mess it up is just to check it out so if the page renders that's a good sign and it looks like it does i'm going to give it a hard refresh just to be sure interesting okay so we we got a flash of an error i don't know what that was for also let me check my time all right three minutes in about three minutes i'm gonna go to the live chat and answer some questions okay so that was a good sign i don't know what i mean other than that weird air that flashed up if it does it again then we'll look at it uh otherwise uh i think we'll be all right so let's check out this menu all right so that part still works wonderful we didn't mess with it so that's to be expected let's see if this click works oh that works let's see if it works for two different ones wonderful all right now let's shut the drawer and open it again nice it works see and it works for two of them nice i do want to test this out if i close academics and then open it nice it's still open i want to close this shut it open it nice all right our state is like super persistent now this is the behavior that we wanted excellent excellent okay so uh does anyone know i want to ask a question before i explain why i think this happened why like seeing you all saw when we took the code we didn't really change it other than some names all we did was take the same function in the same state and then move it up to components and now the behavior is different why is the behavior different why before did those sub menus automatically gets shut when we close the side drawer and open it back up and why now are they staying open why is the state persisting now when it didn't before so let me let me know what you all think and my timer's gotta be up by now just about okay i'm just gonna go to the uh short break right now since i'm not really gonna get anything done in a minute i'm scroll up to the top of the chat and i'm gonna go down through and get to as many questions as i can uh and i'll give you all time to answer why you think the state uh didn't persist and now it does persist all right so you see a lot of what are you saying hi uh grandpa fat boy says good evening everyone uh i don't know that i've seen that name in here so welcome welcome it's a special welcome to all the newcomers in here uh let's see let's see uh nikki says sorry i missed yesterday's stream about the infinite scrolling seen how we did it in jsaf intersection of servers awesome oh you know what nikki i didn't i totally forgot about it in jsaf i'm gonna check that out because we um we didn't fully implement it so um yeah i will check that out because that's probably a better way than what i was thinking michael says you should add backup singers to your stream backup singers make everything better alright cool babe you know what my wife's always singing all the time so maybe she'll want to be a backup singer it's uh king king darrow said heresy just messing around i assume that was in response when i said we're just gonna use component state so and uh for those of you who aren't familiar with react that much there you you do see like i mean i've seen it shift back and forth but uh you would you know at one point people were saying like never use component state you always want to use redux right and that was i think like overboard like there's too much to the one way uh i think it's more balanced now i do see people saying uh and have been for a little while saying like no component state is the right way to do it if it's not too complex so anyway uh yeah it's it's perfectly acceptable to use uh supra 28 says what are you using here for theming um material ui let's see hey phoenix is here how's it going oh king darrow says uh there's also a library called unstated which looks good uh says but i like to use mob x personally cool yeah i i've i've been interested in mob x i just haven't really had a project to use it on and to learn it i haven't heard of unstated then i'll have to check that out all right so i see some of the answers about um when i was asking like how should we do this where should the state live uh so it looks like most of you most of you agreed that the state should probably live in in layout noble and savage says hubba hubba liking your new office yeah like literally uh i am just in my basement in a corner of the laundry room i have a recliner and then i just have um a table with some monitors on it i have a laptop on my lap and i hung up like um it's not even a curtain it's a um a tablecloth i hung a tablecloth from the like the rafters and uh just to give me some sort of background so so y'all can't don't see like my family walking around back there so that's my office for now it works the recliner is comfy uh phoenix says i'm about to start with react in a few days i'm overwhelmed by the examples that are available i don't know where to start twitter clone medium clone shopping app website what um you know what i would say if you're looking for projects to start with check out the free code camp projects and just do it in react so look at the very first most basic one you do and try to implement that and react even if react's probably overkill for it but the point is just to learn react and start out slow so i think what's the first one is it the first project is i think the uh tribute page so i mean that's i i've heard of people doing that uh going through free code camp projects and doing them with react so uh i would try that okay so i did not get all the way through all the questions right now oh but actually you know what let me just go through the questions because i mean really we actually got it to work it's just insane let me go through some more of these questions and then i want to see if anybody answered that last question i asked uh and and we're gonna go over that so uh i did get through most of them so there's not that much left okay so john kane recommends um react 16 the complete guide which was ten dollars on udemy so uh check that out i've never checked it out so that's not really an endorsement i'm just uh you know but john john kane thinks it's good uh john john hanson says uh jesse kindly suggested that i give react a try i had barely gone from a simple understanding of jquery to javascript at the time now i have a fairly good grasp go for it awesome john i'm i'm glad to hear that that you're getting a good grasp and uh that's really cool that that you you consider me to be the one that uh was kind of uh got you into that so really cool nikki says following along with the tutorial helped me uh andrew meades and max schwartz mueller's are both great okay cool a lot of good resources thank you carlos says max's course is awesome let's see uh andrew asks what mic i'm using uh actually so when i'm working from home i just use the built-in mic uh for a macbook pro when i'm in my office uh like at at my place of work i have like a usb mic i don't even remember the brand it was inexpensive from amazon i'm probably going to end up getting a mic for home and maybe even a camera like an external camera because i when i have the laptop on my lap it tends to shift around a bit and uh i don't want i don't want to give anybody motion sickness by the the shifting of the camera so i think it'd be better if i had just a small tripod and and a camera that was stationary i bought the tripod already it came in i got a notification from amazon so i think it's sitting outside my door right now um but i i haven't decided what camera to buy and the webcams are a bit more expensive so i want to put some thought into which one i should get okay so carlos says the state persists because they went to the parent it is yeah so going to the parent was why it persists but let's see so i want to see i'll explain why i think it what i think the like exact issue was but i want to see what you all say first uh solely says uh just man says hi just managed to join in now just came back from work uh jesse i missed your past two live vids because you started early oh okay yeah sorry about that um i've been starting at different times if i start early then uh my viewers in india and anywhere in that time zone are those couple time zones you know together uh they are better able to watch otherwise it's too late for them uh so i don't know so for right now i'm kind of switching back and forth uh so do some a little later some earlier um so sorry about that i know it's there's no time i can stream that works for everybody so right now i'm just streaming at like different times and so sometimes you know different people be able to catch it live other times you know you may just have to catch the recording uh so i just i don't really know any other way to to do it to try to be fair about it so that everybody gets a chance to watch the watch it live you know other than varying the time javascript is here says jesse what's up uh nothing much just working how you doing and it's actually it's a really nice day here finally you know it's it's uh it's been pretty cold lately so today is like 70 degrees sunny a little breeze it's really nice i mean i'm in a basement with coding but it's still cool that it's nice frankie says the recliner looks comfortable it's actually it's comfortable but it is it's really old i got this recliner from my grandfather who had used it for a while and decided he was ready to get a new one so then i got this recliner when i was in was i still in high school i think i may have still been in high school i'm 32 years old now so i was a teenager i think when i got this recliner and i had the same setup at my parents house in my bedroom where i had a recliner and multiple monitors i used them back in the day to play video games not coding and i just after i got married i took the recliner with me and just have replicated this setup everywhere that i've lived every time i moved i just take it so uh it's actually like it's pretty ripped up it's still comfortable but i mean it's i'm sure it's not nearly as comfortable it was when it was new um but it's not suitable to be in my living room but it's okay to be in my basement uh javascript says don't mix jquery and react bad idea yeah for sure it makes things difficult if you for some reason have to mix jquery and react check out project one on the playlist for live coding with jesse because we did that and we made it work i'd love to change it so that we don't need jquery um but i go at some point in that series that project one i go through and explain like why you shouldn't do it like this and then i explain if you have to do it anyway here's how we do it and we we make it work and that that site's actually still live and and doing well uh so it can be done it's not the best way to do it uh so so don't don't do it if you can avoid it but sometimes it's you can't really avoid it uh javascript says where do you work i work at franciscan university of steubenville uh it's a small catholic college um in uh like eastern ohio so i don't know how how familiar you all are with uh united states geography but there's a point where the state west virginia so the northernmost part of west virginia meets with eastern ohio and western pennsylvania and right where those meet together oh uh steubenville is like pretty much right there so steubenville is very close to pittsburgh pennsylvania so if you know where pittsburgh is on a map uh just move a little bit west of there and as soon as you cross the border into from west virginia from pennsylvania into west virginia and then into ohio that's where studentvo is but anyway it's a small school i think we only have 2 000 students and i'm a front-end developer there but it's it's nice i i'm it's only about 10 minutes from where i live uh it's it's right next to where i grew up i grew up in west virginia uh right across the ohio river from where i live now and uh so my kids get to be around their cousins and their grandparents all the time my wife's family is actually from steubenville my wife grew up in stephenville so um so i really wanted my kids to grow up around all their family so that's why we end up here so it works well works out well that i can i can work here um be able to provide for my family i know a lot of a lot of people that grew up in this area had to move away because it's not really economically doing well but uh thankful that i was able to stay here let's see i lost my place i'm trying to scroll up and find my um nikki says on the state not persisting before you put state higher did the component get unmounted that would explain it yes i i believe we have a winner there so my thought was so after we implemented this i don't know it was a couple days ago or something um i noticed that behavior and i thought oh that's no good like we can't have that behavior and and i started thinking about it and that's what i thought is oh like what's happening is right like when state lived at this level right at this level like it would save the state here but then once this drawer was hidden like that was it component on mounts state is reset and then when we open it again it starts from all over again so the reason why that didn't happen with these was because the state for these things live way up at layout and layout encompasses all of this the whole page so in layout we have this app bar the footer and the side drawer and layout doesn't unmount layout stays as is and then this content here changes so if we want any state to persist it needs to be in layout right so that's what i thought oh okay if we just move it up to layout if we move the state up to layout then it will persist because it'll never unmount so you can see now like the benefit one of the benefits of using something like redux where the state would actually be stored somewhere else that is completely unaffected by components mounting and unmounting right if if you didn't easily have access to a top level component where you could store that state let's say your component was like eight levels deep you don't want to pass that state all the way down right that's that would be ridiculous then something like redux would be super helpful because the component the child component would immediately have access then to your redux store where your state would would live in this case since we're only talking about two levels it was fine right it makes sense would we have a little bit you know less code in our components if we went with redux a little bit less but then having all that extra redux stuff there doesn't really make sense so if we were doing this kind of thing everywhere all over the place passing it down you know even further yeah then it would make sense and actually um with the latest versions of apollo which is what we're using uh to get our graphql data you can also do similar things like that like to save your state in a store so we probably wouldn't even use redux we would use the apollo version of that all right so does that make sense to everyone so good job nikki and um uh who else someone else said so carlos was on on the right track as well uh and so good job uh for catching on to that i feel like i'm teaching the class when i was when i was asking questions but i just i don't know i wanted to give you all a chance to like say it first instead of me just talking about it uh anyway so that's the reason if anybody needs an ex like a better explanation of that let me know i'll try to do a better job john kane says i recommend the razer keo webcam 100 bucks on amazon okay cool let me you know let me open that up right now so i don't forget what it is on and on another screen all right so i will check that out after the stream i'm glad you mentioned that because i hadn't heard of that before at amazon like all the webcams that come up are like logitech webcams all right i'm skipping through a bit just trying to find some questions all right so several uh several of you are saying where you're from so we have uh india switzerland um awesome virginia so blacksburg virginia very cool so you're only one well i guess two states over for me since i'm not in west virginia anymore oh javascript says you're like half a state away from me awesome um frankie says can you view the mountains from your region in west virginia um where i'm at well i mean where i grew up which is just across the river from where i'm at right now uh it's it's like hills there are big hills right they're not really like mountainous so um i would have to drive a little bit further uh into west virginia to really get into uh with the the appalachian mountains um yeah so it's not it's not that far but uh it's a little bit of a drive so i'm kind of in the foothills of uh of the mountains so there's definitely definitely some steep windy roads around here uh but not exactly mountains but the state west virginia um as a state is really beautiful um and actually like virginia is too like that whole region uh like driving through there is just i mean there's some really cool if you're into like outdoor stuff like um i don't know like white water rafting camping hiking stuff like that i mean you can't be west virginia because like so much of the the state doesn't have a high population so so much of the state is just forests and mountains and and lakes and rivers and stuff it's just like untouched wilderness basically uh so it's really it's kind of cool and it's still pretty close to a lot of major cities and airports and things so you know you get kind of like the best of both worlds that you have the wilderness generally like really low property values low taxes uh but if you really wanted to enjoy like city life it's not that far away anyway i'm not getting paid by the tourism department of any state to say that that's my honest opinion uh gabriel's uh saying hi from sao paulo brazil awesome uh so thanks for watching uh sonny asks what language this is uh javascript oh nikki already answered i should have known somebody would have answered let's see uh renato asks what my opinion is on mobx i from what i've seen of mobx i really like it it honestly seems like a uh slightly less complex version of redux so i'm not saying they're the same thing right so they both solve like the same problem but in in slightly different ways so uh i would say i ended up learning redux first because it was a part of the udacity nanodegree uh if i had just decided to learn on my own i probably would have learned mob x first because it seems like mob x is is a little bit easier to to deal with um so unfortunately i haven't worked with it directly myself so i i don't really want to say too much more about it you know because it i don't know that i could give a really good good explanation or information but if you're interested in in using mobx and you're trying to decide between redux and mobx i would if it were me i'd probably go with mob x i'd try to learn that first although for i mean me right now since i already know redux i might go with redux but if i hadn't learned redux first i'd probably go to mobx hopefully that made sense i felt like i was talking in circles for a second uh nikki says react 16.3 also has the new context api you can use for that oh that's right that's right uh thank you for bringing that up nikki i can't believe i forgot yeah so uh the latest versions of react have another way to handle state which i need to learn more about that and maybe start using that carlos says teach us jesse we want to learn and love your videos that's awesome thanks for saying that frankie says thanks uh zutek sorry if i'm mispronouncing that name i think it's utech says uh hi and greetings from poland all right awesome i have um my my wife my wife's family and my family both have ancestors uh from poland so i've never been there uh but part of my family tree originated uh in poland so that that's cool frankie says i'm the girl who wants to go off grid so i agree totally cool that was what i was talking about like the you know the mountains and stuff yeah it's um it's cool at one time i was really into like the whole like homesteading thing like raise your own you know animals and have a garden and all kind of stuff like that um so right now i actually live outside of like city limits so it's uh like at one time i did raise animals and and do the whole like i wasn't completely off the grid but that was i was like working my way up to it um and then it i don't know it got it got difficult with um trying to work full-time and raise kids have four kids and things so it was just i kind of just let it go and we i still have a uh a garden and every you know stuff like that but i don't raise any animals anymore all right let's see trying to scroll down i my live chat window is messed up no ah i can't my live chat window got messed up and so i can't read anything let me restore it over here please work music yes alright i got it back all right sorry about that let's see uh renato says thanks for the answer says yeah malbec seems much simpler to understand at first yeah that was i mean that was my impression uh yusuf says greetings from indonesia awesome uh frankie says right i completely comprehend uh off grid all right cool um well that's the end of that's i've got to the bottom of the the chat uh the live chat and i know i said at the beginning i was gonna do two pomodoro sessions but amazingly i somehow managed to do what i wanted to do without messing up too badly and finished it in one pomodoro session which that is very very rare uh i i believe i've done for sure over 100 live streams and it i would imagine there are maybe less than 10 live streams where we accomplish everything we wanted to like in a shorter amount of time so today was a great day great way to end the week and uh thank you all so much for watching and uh for all your your advice uh in the live chat and and your help it was it was fun it was really fun stream today so uh i think i'll be back monday yeah what's going on monday i should be able to stream on monday i'll be in the office then not sure what we'll be doing then but uh probably most likely working on this same project i'm just not sure exactly what we'll do uh so and there were a lot of of new people in the stream today so i want to say again welcome thank you so much for watching hopefully you can all come back again for for another stream and uh yeah so i hope everyone has a really really awesome weekend and um so until until monday uh i guess have have a great weekend i'll see y'all later