Separating Context & State Exercise

[00:00:00]
>> Your job for about five minutes is to kind of ghost the lunking. There are a few of these little ones in here because as of that grew in complexity, there are a few like, when I found a bunch of them, I was like, great, yeah, totally. But there are a few of them and see what interesting ones that we can find and lead us to work cuz I think it's very simple app's fine, it's cool, cool.

[00:00:22]
As it starts to grow, and again, we wanna use the tools. What are some of the optimizations? And some of them, we can talk about some of them we can do, right? Cuz some of them just like, as soon as we understand the philosophical thing, I think we've got the major point, but I want you to spend a few minutes, five minutes, go looking for them, right?

[00:00:38]
And let's talk about some of the ones that come up. I'm gonna look at the chat in the room and we can kind of figure out which ones what some are thoughts and theories around them and what we would do about them. All right, so there are three or four, some of them planted.

[00:00:56]
I will talk about the accidental one. I will talk about the main one that leads me to my next point, but I'll do that, especially when it leads me to the next point. Feels appropriate to do towards the end. Did anyone else find any interesting ones as they went in triage?

[00:01:10]
>> I mean standard ones. I've added three memos regarding comments or play around with them. But so I'm around that common common and post it solves a bunch of renders.
>> Yeah, I want to talk particularly about the post comments, and a little bit as well. But yeah, those as well.

[00:01:27]
And I think in the drop down with the users was pulling the users it's nested in there ,like that one probably can get its own state and be completely isolated from everything else, right? With just a callback, like we saw before we just say, yo, when this changes, let me know but other than that I don't.

[00:01:44]
This thing is it's got its own context in there, right? To point out so, we know that we have posted we have users, right? And so to Alex's point, in the post, right, we have, instead of add comment, we grabbed the entire list of users, right? And so, someone left a console log in their code, to figure out what the selected user was theoretically, that could be encapsulated on its own and not necessarily need to involve stuff in here as well.

[00:02:20]
That's a big one. Do we have any other interesting ones, I'll tell you the one that actually I didn't expect and had to squint, right? So I kind of alluded to before we started this I'm like, I shouldn't get into this part yet. I should let you explore first, but any other interesting ones, throughout.

[00:02:42]
Okay, yeah, well, we'll call it the obvious one which is the core set of data structures is problematic, right? And where I wanna lead with this is, we talked about component hierarchy, we need to talk about the state hierarchy as well, right? And there's just some things and all the memos and contexts in the world aren't gonna save you from.

[00:03:04]
And we'll kind of do the high level cuz a lot of it is the conceptual understanding, the actual tedious part of doing the work is moving stuff from one place to the other. Which is somebody who originally planned to do that in front of you did it with a test audience and it was like watching paint dry.

[00:03:20]
So we will talk about it a little bit. But I wanna talk about the one that slightly surprised me and I think I fixed in this branch. So we're gonna see how angry the development server gets if I keep switching get branches with different code over and over again on it and see how it likes that, but we'll find out.

[00:03:40]
So if we look. If I go ahead and I'll clear this out I'll record was moving to user and maybe it was adding, I forgot. We got a bunch in here though. Let's see which one, I just recreated it to. I will show you in a moment, if I can't figure out exactly how I recreated it or if I'm on the branch that has effects we'll find out.

[00:04:17]
Don't embarrass me right now. So what I got was, make sure I'm on the right. Don't save anything, go back to the way everything was.
>> There was one weird one with children.
>> Yeah, that's the one I'm looking for. Do you remember how we got that one?

[00:04:43]
>> I'm on a live coding branch and I've added memos to, To users, not the user itself.
>> Yeah, yeah, that's exactly the one that I'm looking for. Now, I can't recreate it but I can show you what the issue was. So yeah, Alex, can at least back me up that as well.

[00:05:04]
Which is we're like, go children that's great we should do that, right? And this is again why we test these things because what is super interesting is thinking about, so it's like, it takes the child component and we map in the button, I believe, yeah. Hold on, is this the one that's fixed?

[00:05:25]
Is that why it's not working?
>> Yeah, [INAUDIBLE] because I have a different version.
>> All I get jumping around.
>> It's in the user, it's supposed to be in user JSX.
>> Yeah, this might actually work on one hand. Okay, yeah, we can actually see the diff but let's let's go recreate the problems, I can verify as you all believe me.

[00:05:45]
Turns out, switching git branches repeatedly back and forth to try to get ready make a point doesn't always serve you. So let's go check it out.
>> Tony I believe.
>> Okay.
>> Well you're a mobile user.
>> Yeah they all changed individually, thinking about when you go about an item, an individual item didn't change when we removed another individual item, right?

[00:06:20]
All the rest of them were like, I'm the same thing in memory, it's cool, right? And yet, we get this issue right here, props changed children, right? And we're like, yo, I thought the whole thing when we're gonna pull content up and we're gonna have the children, is that it's all gonna work, right?

[00:06:42]
And yes, but again, rules apply and things exist for reasons, right? So the reason why that works is because when something happens in the lower component when we saw it with the stupid game, right? The problematic component was slotted in in between parts of the game, but it lived up in application, right?

[00:07:17]
And so cool, it was the same component React's like, I know you, you're not even on my path, nothing, right? Nothing has changed, it never trigger the change the application to start at that subtree. Never even went up and looked. The interesting part is here, these children are delineated by the array of users, right?

[00:07:44]
And so before that was just a component that existed that I put in here. When we remove a user, what are we doing to the array of users?
>> It's a new every time.
>> We're throwing out the array of users, which means we threw out this array of children and replaced it.

[00:07:58]
So any performance optimization that we thought we were getting to make a point didn't work because yes, they are children, but that is a set of children that are based on an array that is changing. Which causes them to get thrown out, right? And so, it's why sometimes, just following, it's like even for all the ones that I hid, that's not one that I hid.

[00:08:25]
All right that was one that was like ,that's weird as I was like, you hide the Easter eggs and you check on them before the kid wakes up, right? I'm like, that's a that's a super interesting one because I was just, again, I was just going about my business whipping up an example app.

[00:08:42]
Tried to make a few different points and didn't expect that one, right? And then I had to squint a few days ago and look at it and be like, yeah, that's interesting, right? Because it seemed innocuous, it seemed like it was just the thing, that's what I wasn't even thinking about.

[00:09:00]
I'm gonna pull this up cuz it's more performing, I was just like, this seems easier right on. But understanding that, yeah, it's really a game about how JavaScript cheats objects in memory and some of the things with immutable state and what that means. The fact that we keep everything mutable is not a first class citizen in JavaScript, there aren't immutable data structures.

[00:09:22]
We do these things now almost out of habit where we spread operators and stuff like that. But sometimes, you will be surprised even as you just think you're just doing the thing that this, yeah, this is using the children. But because the act of doing this does cause a brand new in that higher level.

[00:09:40]
You could also see this then if I did that to stop a cascade down a bunch of other components I've accidentally retriggered the entire cascade, right? There's, again, this app isn't big enough to do all of that. But those subtle little things, if you're not kind of getting in the habit of taking a look every once in a while and as you're implementing stuff.

[00:10:00]
You should not over rotate on performance all the time at the absence of getting anything done, right? But as you're coding, you should develop the habit of the same way you go, what happens if I put an emoji in this input field, right? On the unhappy path of being like, does this perform?

[00:10:18]
This is doing what I expected to do because that cause a rerender, could have got the bug, right? What if I never expected those components to mount and unmount? What if they did something theoretically like, they had to use a fact that was hooked up to a web socket or something like that.

[00:10:35]
All sorts of different things that weren't totally expecting, these same principles about how React work. Yes, totally more performing apps, absolutely, here for it. But at the same time, they are also like, okay, this is how the underlying fundamentals actually work and this is what they're doing for us.

[00:10:54]
Hopefully, if tuples and the immutable record objects come out, we should get better primitives for this. Yes, there was still be, again, we are left with the hard, squishy parts of programming. And so things constantly keep getting better, especially in the JavaScript ecosystem, but building the muscle memory and habit of just occasionally checking in on these things.

[00:11:19]
And seeing it, I think does create really useful and allows him to insights to write, again, in a larger app over time. This might not have even been a performance issue as much as it might have had weird unexpected side effects, right? So I think that these things go hand in hand and the act of doing this also gives you a deeper depth into what React is doing and why.

[00:11:44]
Didn't even occur to me until I was here with this thing a week ago. And so that's super interesting. The other one that we saw, there's a lot going on, most of the meat lives in the post comment thing right? The data which both is not great and also not totally shocking from other things that I've seen is somewhat common.

[00:12:11]
Which is a collection is an array right on. It has the user kind of baked in, which is weird because I have a different list of users, right? So what happens if I do need to change the user's name? Now I have two places to do it, right?

[00:12:29]
It's tricky because sometimes that is a good choice. And sometimes it's not but it's been thinking of these things. But the interesting part is the act of removing a comment also like rerendered an entire post, right? And there's no number of memos in the world that are gonna save me from that one, right?

[00:12:48]
And this is one of those things which is, we have a tendency because our UIs are these tree-like structures. That our data structure should be a tree-like structure, right? But if you've ever, especially, in a Redux like thing or reducer like thing where you're like, okay, I need to change something.

[00:13:09]
Three things deep in a data structure is like spread operator, spread operator spread operator, right, to get to that bottom thing and you have to rebuild everything all the way up. Yeah this is working with immutable data structures, but if your memory lane on something having the same reference in memory, then what are you doing to that memo, right?

[00:13:30]
You are actively recreating, if you wanted to change the user name on this comment, cool, you immutably spread out and replace that entire object. And you can see these actually have comments built in too, right? This goes, it gets a little insane on purpose. Then you'd have to, they're the comments array, that's, yeah, separate in there.

[00:13:55]
You get the user, you'd have to then rebuild the comments, you'd have to rebuild the post. So you end up in your data structure, React aside, the simple act of changing your immutable data structure is triggering all these re-renders regardless of what you do, right? And so, I think the two things I definitely just wanna, and one I've said repeatedly, but why not?

[00:14:23]
Is that the component hierarchy can sometimes matter more than the tools that are meant for helping with performance, but also the structure of your state, right? Actually in the beginning of a project, right, sitting down and think about regardless of what you get from the API, think about what is the structure of the state that I need for this application.

[00:14:43]
And what do I need to do early on. Cuz sometimes once it's wired in there, the weight of the refactor becomes untenable, right? And so, again, sometimes we don't get to make these decisions over there. It's usually a new future somewhere we can decide to do this of thinking about how are we gonna orchestrate this?

[00:15:01]
And yes, as a front end engineer who's been doing this for a while, I have the deepest empathy for we all don't get the APIs that we want, right? We fight the battle with the APIs that we have, not with the APIs that we want. I have had to do dark things like stitch together seven different APIs.

[00:15:18]
I once said, somebody asked me, what does a front end architect do? My joke was how you like to break stuff into tiny little microservices that don't know anything about each other? He's like, yeah. I'm like, my job is to hide that from our customers and make sure they never know that you did that.

[00:15:33]
Right, but there are things to think about. And so one of the patterns that I really like that is more of a kind of state management data structure pattern, but I think has immeasurable benefits on your React application. Is having a layer that even if you have a back end for front end Great.

[00:15:48]
Good luck now being on call for a service.