Context API

[00:00:00]
>> We've made promises about the Contacts API and I feel that it is my civic duty to keep those promises. So to review, I just want to look at my beautiful flame shot one more time. Which is, yeah, I am regenerating those arrays. That is fair. We talked about the trade offs of me trying to do some weird shuttling thing between two arrays.

[00:00:23]
And I'm like, that can't be better. So I'm not doing it. But none of my items are re rendering. Like life feels good. I'm really, I'm okay with the way everything is going here. However, I think that none of us like the fact that we're passing. Whether it's dispatch, or set items, or whatever I've settled on.

[00:00:46]
This time we did dispatch and then I went off script and we did set items just for funsies. They both work the same. I have all the performance gains right now from the set items that I had from the dispatch. I just had to like import more things.

[00:01:01]
We've wanted to import those action creators, I didn't have to as long as I have an action that has the right shape to it. It's totally fine. But we have those, we have these performance gains great. But putting it through item list, item list is not using set items.

[00:01:15]
It's not using dispatch. It's not doing anything with those things, right? And at the same time, it's has to get it has to pass it through, right? And like, that's not really a performance issue in any way, shape or form, right? Because it has the same value every time.

[00:01:32]
It's the list of items of the problem, right? Strings would be comparisons. It's not causing us any issue, except that this is a stupid little toy app. 38 levels deeper and there's tears, right? And so this is where the context API lets us say, here's a special prop that is secretly available to all of the children in this component tree that any one of them can hook into.

[00:01:57]
Anything you set in this context, right? It's basically a prop that you don't see, when you use contacts is reaching into that invisible prop is getting the values you hid there, right? When you used to hide your Halloween candy in the house before your parents threw the extra away and then you knew where it was.

[00:02:13]
It's basically the same idea. And so it's an easy way for us to do this and a lot of times we've talked about it before. To go totally all in on performance optimizations that don't matter for the sake of you and your team's productivity. That's a way to be everyone's favorite teammate, I guess, right?

[00:02:33]
And a way to like not, y eah, it's a set of trade offs. And so let's do it. And let's see what happens to our again one more time. I'm setting expectations. Okay, cool. And now let's for like 1,000th time in my life, let me do the dance.

[00:02:57]
All right, so we do create context. The fact that I have not written an editor's shortcut for this yet is somewhat incredible. Cool. So I've got that and then we do cause items provider. I'm gonna say this now, because I haven't done this 1000 times in about two minutes when I forget to wrap the application component in the items provider.

[00:03:28]
And I wonder why my app doesn't work. Can someone remind me? Thank you. It's almost like this isn't my first [INAUDIBLE] So we do items, providers, context. Not provider. Do y'all ever have to use like render props before hooks were a thing for this? It used to be worse.

[00:03:51]
So as much as I complain, it's better now. In my day, [LAUGH] We didn't have a context API. [LAUGH] In my day, I had to figure out what map states the props was in Redux I still. I only now understand it, cool. I'll give it real value in a second.

[00:04:10]
Awesome, I have now done this enough times that I know that I'll forget you that. Sometimes like you don't necessarily become like a better programmer. You just know all the times you've made the same stupid mistake so many times that now you have scar tissue. Or previous code that you copy and paste from that make you, everyone seem like you're really fast and you don't tell ' a secret.

[00:04:33]
All right, cool. So y'all made me take away my reducer and put in set state. But set state's already in there, but I only did it on one thing. I'm, bringing back my dispatch, right? I'm making the rules here. I can do whatever I want. And did someone ask me for where did the reducer come from?

[00:04:57]
The reducer was part of the pre-baked code. Because nobody, wants to watch me write this. It's not glamorous. It's not fun. It's tedious. I was even lazy enough to take createAction from REDOX toolkit, cuz it's not the point. Also writing and testing all of those functions for the items, was not fun.

[00:05:21]
So, you're welcome. If anyone really wants to see a course I just sit here and do like the really tedious parts over and over and over again, across five sample apps. I'm not going to. Awesome, and so we've got our state and our dispatch. And then we have the reducer here that will pull in.

[00:05:47]
And the initial state, initial items. All right, cool. Let's call this items because it's the only thing in there. And we'll say, we'll give you some items. And we'll give you some dispatch. Great, what are you all supposed to remind me of?
>> Rapid.
>> Rapid. And I exported this time.

[00:06:19]
Some and now is available everywhere. So we have just a few little things here, which is my favorite thing in the world. I already deleted so much code from the fact that I felt really ungratified and then sometimes when I don't do the thing where I refactor to reducer.

[00:06:34]
I delete a whole bunch of code. It feels great. But here we go. Items = useContext. Did I? There's again, I already know what the mistake is gonna be, right? That's what I didn't export. Cool, I gotta say this world where like autocomplete exists as even if they were joking on a break that 50% of the time works every time, that 50%.

[00:07:09]
Go get to delete some code here. Awesome. Yeah, I didn't even wire up anything codes in there. Goodbye. You don't need to pass the C items list anymore because we're gonna skip the whole reason we're using context API's to get rid of all that. Just get rid of some of these other parts that watching me do the same thing 42 places and super worth it.

[00:07:38]
Could we use the context one level lower here? Yeah, we probably need it and all these components, it's not really saving us that much. I will push out the branch you're welcome to experiment and see, I'm just trying to stay somewhat focused here. Go into the item list.

[00:07:56]
We don't need that item anymore. Which means we do not need to pass it through anymore. Cool. And then going down into the individual item. We don't need this anymore. And we'll get the item being passed in and then we can just say That's why we only need this fashion here.

[00:08:39]
We go back to, Was gonna dispatch, Parrish it kept the other one. The rest is, I guess kept the way they were. So this now becomes dispatch again. And dispatch. Okay, I was no type script. I'm pretty sure that I did make mistakes let's make sure it doesn't crash.

[00:09:17]
If I don't click on the thing, right No. So we got a little issue, remove works. I'll look at that in a second or talk about it. That was the one we had to set states, I'm not totally surprised. Yeah, that doesn't need--doesn't take a function anymore. This just takes an ID.

[00:09:52]
I mean, the point you already saw too. I think that'll work now. No, but remove as you can see, well, even at the very least. Maybe we're not totally giving you the right things to do this job, but you can see what the remove. All of my hard earned performance gains are gone, right?

[00:10:09]
You can see everything is re rendering all the time, why? All the thing. In fact, they're all in color again. Why did rerender context changed, right? So there are two and a half reasons why a component re renders. One of them is two and a half three one and a half I don't know.

[00:10:38]
When the state changes and that goes down the entire list, right? But we have some use memos in there to stop that,right? Those use memos are still there. We didn't take out anything we did. We didn't start over. We kept all those in there. So then we get to the other one state changes apparently renders props change.

[00:10:57]
What did I say earlier? What's context? It's a hidden prop. That's different, but no, but you put a used memo on it. You put a used memo on it, so like, even if the props like it shouldn't matter, right?