Wrapping Up

[00:00:00]
>> At the very beginning, I showed you the last slide, I'm showing it to you again. This is, I think, the heuristic that makes a ton of sense, right? If you can solve the problem with the state, as we saw, those posts in the app were slow because they were nested data structures.

[00:00:18]
They were causing re-renders, right, just simply cuz of the way the data was structured. The fact that you would have to bust out of all memoization just to update the UI, means that it's probably worth having a function on the ingest of that data. To reorganize it in a way that you can minimize changing and replacing as many objects as possible when using immutable data.

[00:00:40]
No library like Immer or whatever is gonna solve it for you if you have these deeply nested data structures. Cuz that's the way that immutability works in JavaScript, is you gotta change it all the way up. So creating the flattest possible data structure that you can will stop rerenders when you use any of the memoization out of the box, right?

[00:00:58]
Doing it otherwise just doesn't make any sense. Also React fundamentals in the way that you shape your component hierarchy can sometimes completely eliminate the need. Sometimes we threw some React.memos in there, and we're like, or they use callbacks with the passing dispatcher. We can rip it out, we still get all the benefits, right?

[00:01:17]
Sometimes using some of just the React-like primitives out of the box will do it for you with no cost of checking two objects. And yet, they should be very clear. At a given, checking two objects is probably not that expensive. If it is your immediate go to, it can pile up on you.

[00:01:37]
I have been bitten by it before personally, if you never get bitten, awesome, right? But you will not ever get bitten by just following the React way, right? And so that should a lot of times be at least the first inclination. And I think we saw it before, it's like, sometimes you will get surprised by what doesn't just not trigger a re-render.

[00:01:58]
That said, if it's triggered a bunch of re-renders, and they're like, nothing, I don't know if it's always the best, right? And so developing that sense of looking at it and being realistic. But also, some of those things do help you maybe suss out other bugs. Like, this thing that I didn't expect to even re-render at all, just normally, was doing it cuz the children were replaced?

[00:02:26]
That seems like if I was in no way expecting that to happen and it happened, what else could be going wrong here, right? And so some of that stuff it's super useful, right? And also a lot of times there are bugs, yeah because there's suddenly other thing, cool, cool, cool, I think makes a ton of sense.

[00:02:44]
That said, memoization, React.memo, useMemo, I use them all the time, all the time, right? They're not to say you shouldn't use them, use them. But also, yeah, think about the first one first, but they are there for you, they exist for a reason. It's not like people put them in like, but never use that, don't be ridiculous.

[00:03:06]
I mean, there are certain things you should never use. But that's not one of them, right? It's like, what does the with keyword in JavaScript even do? I still can't write a switch statement. But, yeah, so memoization, it's definitely there for you, right? Using the Suspense API to progressively load your application, kind of getting stuff in the background ready to go and not sending the entire bundle.

[00:03:29]
Yeah, and there is more coming from that API. This is just not totally ready, it's like React server components are not totally ready. We'll come back and talk about them when they are. But at this moment some of those things like useEffect came and went in a few months.

[00:03:45]
So I am a little more reluctant to talk about things that haven't shipped. And then when you have things where, no, this is computationally expensive and it needs to happen, right? I just need to then still figure out ways to keep my UI performant. You do have primitives in React before you try to wire your own, right?

[00:04:04]
Before you're like, I'm gonna do this set timeout thing, and it's gonna kick off this web worker. And then that's gonna send a broadcast message to all the other tabs, and then there is service worker, whatever. You're not the first person to have this problem, right? Look to kind of the core pieces first.

[00:04:21]
Yeah, questions, and I'm gonna look at the chat too, but.
>> Suspense was with 18, right, not before then? I couldn't remember what it is.
>> I don't remember, I think some parts of Suspense, I can't remember if they were unstable ones I could pull in. And there was a library that Jamie Kyle made, it would by just being called lazy or something along those lines, I can look at that.

[00:04:46]
>> That you mentioned.
>> There was a version of that that was not in React core. It was 2017, 2018 maybe, right? So a version of that concept, right? At that point you're playing a game which does your Webpack's configuration. But some version of that concept has existed for four or five years.

[00:05:15]
Fully being in React, it was coming for so long, I can't fully remember. And React 18 came much later than I expected. Some things came, the time-space continuum during COVID [LAUGH] is a little flaky for me? But yes, maybe 17, yeah? Detransition stuff, I believe, is new, all the concurrency pieces are new for React 18, though.

[00:05:45]
>> Do you have any recommendations for additional reading resources?
>> I will find it, but if you do React WG, there is the working group for the React team, where for a lot of these things, all of the discussions and updates about here's a new feature, here's how it works.

[00:06:02]
And then also, hey, we're not doing this thing now, and here's why. So they might be like, I heard this thing was coming, a lot of times you can see the rationale for why. And for me learning about these things, that was incredibly valued to see the person who wrote the feature kinda do the documentation on it.

[00:06:18]
Discuss some of the trade offs and thoughts around it was absolutely fascinating. And there's a super how that at one point there's some thread in there, which is like, people put terms that confuse you, and then somebody will try to explain it. And everyone up was like, draw a graph of how concurrency is kind of like a game of telephone, right?

[00:06:38]
And some of just actually from the actual core team itself in a public forum, as they're discussing the implementation details. And the thought and consideration that went into these, is absolutely fascinating. And so that would be the first and most immediate thing. I was like, you should just Google it, as if I did not had a computer, hold on.

[00:07:05]
If only I could just type that instead of, I'll drop it in the chat too. Big fan of this, totally worth, there's, yeah, the Discussion tab, right. And then you go into Announcements, that's the one I like, and Deep Dive is good too. Yeah, some of them are a year or so old, but still, they explain, look, new in 18, selective hydration, there's useDeferredValue.

[00:07:34]
You can see explain it, and then also check out the length of the comments in the thread, that's where the good stuff is. The announcement, sure, sure, sure, but the discussion and the questions and the answers explaining everything, for me was incredible to get it from the team that built it.

[00:07:53]
>> How long have they been doing this, since the beginning of React?
>> I was only aware of it for React 18. So I can't say that it wasn't happening the whole time, but I've only been fully aware of it for the kind of lead up over the last year, or year and a half or so.

[00:08:10]
Thank you all so much.
>> [APPLAUSE]