Multiple Contexts Exercise

[00:00:00]
>> So we got this other app where I did this already, it's all done. I did the thing, I did it. It's there, go take a look. Verify why it doesn't work. [LAUGH] I did the thing, it just doesn't work. Go spend ten minutes, we'll take a break.

[00:00:22]
And go look at why the thing that I just showed you that totally worked, and you saw that it worked in a different app, doesn't work. And then prepare to be sad. [LAUGH] It's the tagline of this workshop, prepare to be sad. [LAUGH] Let's take a tour of the code real quick.

[00:00:45]
This one got a little bit more going on, but not much, it's just got more models. So this one had only items. Yeah, so that's the kinda thing where we start out slow and then we slowly escalate things until it gets worse and worse and worse. So we have that in place.

[00:00:59]
And other than that, it's a CRUD app. Let's look at the UI. We'll look at the code. There is this concept of adding users. You can remove them, great. You can write a post, you can remove it. You can't edit anything, there'll be editing in the next one, I promise.

[00:01:20]
You can delete comments, which is probably the best thing as well. Awesome, and you can add a new comment as anyone cuz there's no security on this app. That's interesting. Cuz I put it at the top because I wanted to see the post at the top, so I turned them all on shifts, not realizing that I put the comments at the bottom as I was moving stuff around.

[00:01:45]
But generally speaking, it all exists, it all works. Let's look at the code. And if we go, we've got a context.js, that seems great. Look at this, it's got a state context. It's got an actions context. It's got posts and users. So also comments are just a sub-property on a post, right?

[00:02:10]
And so a post has a comments array just nested in there. So really, we got posts and users. I just lazily take all the action creators and bind them on to dispatch here using literally one that I stole from Redux, it works. Sometimes you can grab some of the helper utilities from Redux and not actually have to use Redux too, if you want.

[00:02:31]
I'm doing the thing that I talked about before, awesome, right? Other than that, it's a bunch of forms, it is a bunch of stuff like that, everything's great. And so things should be good, right, I should be able to go like, We can add a user, I can remove one.

[00:02:59]
Everything flashed, right, throughout everything, right? Some of that makes sense, right, cuz there is probably the list of users and so on and so forth. What happens if I add a post? The user list flashed, they're not even in any way related, that's weird. Those seem extra things.

[00:03:24]
But I did the thing, right? I did it. It should all be okay, right? What happened? Yeah.
>> Pieces of state, your posts, and users are still being provided to the same context, but in a new object each time.
>> Yeah. You know how to solve this?
>> The third context?

[00:03:51]
>> Yeah, [LAUGH] we just keep doubling down, right? And so this is one of the things to think about when we come down to the, should you always do a thing cuz one time you watched a Frontend Masters course and a very charismatic human told you such and such, right?

[00:04:09]
Yeah, it's triggering rerenders, right? And it's worth considering, well, we're gonna do it, because this is an academic exercise. Except one goes like, I don't think this is gonna be how I make it big with where you could impersonate anyone on a fictitious version of next door where it's all Lorem Ipsum, I don't think this is it for me.

[00:04:31]
So I think we should just learn from this and how to get some hands-on experience. And so, yeah, the goal is basically this pattern keeps working, but it also like, good news, the pattern keeps working, bad news, the pattern keeps working, right? And so dealing with both of those starts to create the issues for us, right?

[00:04:52]
And so yeah, it's like nothing that you wouldn't expect here. And you can go and create one. Change one of these. Get both of those in there. This is where you watch me forget which one I called which and the one point in my set up. So it'll be the posts.

[00:05:43]
I don't trust it. And yeah, you have to ask yourself at a certain point of like, when does this end? And I think it's a valid thing to ask. So we've got that kinda in place, I think I got everything in there. And then I gave myself these hooks.

[00:06:06]
So nice part is you see that I like Visual Studio Code. I did f2 to rename something and that did it across all the files, but did kind of move my problem a little bit, Which giving yourself those abstractions should be somewhat helpful, right? In this case, let's see.

[00:06:40]
Use that map, it's not a function probably cuz they're pulling off an object in all those places. So there's a little bit of that. That was useUsers.
>> I think context name.
>> Where?
>> In the context.js. Users context, line 27.
>> Line 27, I missed one. Great, everything works.

[00:07:10]
Now, I can go ahead hopefully, right? You saw that we didn't flash over here, right? And that is what we're looking for. So yeah, as I said before, there's two major points I wanna make here as I run the profiler just to verify that it's not something where I'm slowly losing my mind.

[00:07:31]
Purposely why I don't clean out these input fields. Great, we see the post flash, and there's clearly more to do here, right? And we're gonna not follow this necessarily all the way cuz I think I will leave some of this as an exercise to the reader, but individual posts are in there, The given keys, so on and so forth.

[00:07:55]
But interestingly, there are some interesting ones of adding a user shouldn't cause each and every one of these, right? And then I think a post is along those lines. There are a few issues to find, and there's I think five or six to find in here. But one of the ones I will point out, cuz some of these I did on purpose, and I will leave them as an exploration, kinda scavenger hunt.

[00:08:28]
But there was an interesting one that I didn't do on purpose. And that's the one I would like to draw your attention to cuz I was just writing code, right, and just doing my thing, which I thought was kind of an interesting one, which is if we look at the users, I pass in, I've got this map and I go ahead and pass everything in.

[00:08:55]
This here, having this as a function I'm calling on the fly, and so there were little things in here that were causing rerenders. And it's interesting to do the tools and kinda look and play around, cuz there are ones that you will find that you didn't intend to hide on purpose, yeah.

[00:09:14]
>> But that particular function is passed to the core, the leaf HTML element, right, so that shouldn't matter.
>> Yeah, I'm trying to think which, I think pushing it down actually made more sense in this case, right? There were a few of them like this, this one has the children in it.

[00:09:32]
I'm trying to remember exactly which one it was, cuz it was one of those I didn't plan.