This course has been updated! We now recommend you take the React Performance course.
Transcript from the "Wrapping Up" Lesson
[00:00:00]
>> So we talked a little bit about making custom React hooks to handle some common things that we might do. So that is again, not a secret between us. The whole idea of hooks is that you can create these abstractions, we learned how to create our own. And the hope is yeah, we took somewhat generic things.
[00:00:17] And the hope is that you can use it to solve your very unique and special snowflake problems that you have. But for a lot of common things, I would encourage you to see, has this been done already, right? Is there a solution that I can use? And so there's a bunch of these lists.
[00:00:33] There's awesome React hooks and a whole bunch of other ones. This one's kinda cool because you can kind of search and see a whole bunch of them. But okay, there's a useAPI, useAbortableFetch, which is if you needed to cancel or fetch. There's clearly a whole bunch with the same name.
[00:00:50] Now, it's the same problem we have with a lot of third party JavaScript libraries is it is on you to vet them. But again, some that you might think about is there is useScrollSpy. We'll take a look at that real quick. And that gives you the ability, if you watch these sections, as each section goes up, it'll help you figure out which one to highlight as they scroll through a long page.
[00:01:12] If you have one page, let's say you're running a JavaScript conference in Denver, hypothetically called DinosaurJS, whatever doesn't matter. And you had the Speakers and the tickets and the venue thing you could actually have the right nav link as it scrolls past the top of the page. You don't have to write that yourself because somebody else already wrote it.
[00:01:32] There's other ones like usePosition, is just code that I don't really ever wanna write again, and so basically what it does is. You give it a ref for the element you're looking for, and will tell you roughly where it is on the page. This can be useful for lazy loading images, right?
[00:01:53] Another one that you might wanna look at is useClippy And that just helps you with some amount of clipboard management. It is not a friendly paper clip that drops down from the top of the screen goes, so looks like you're trying to submit a form. Looks like you're trying to keep track of some sort of grudges, have you thought about therapy, right?
[00:02:19] That is not what it does, it just basically allows you to get the current things from the clipboard and set clipboard contents, right? So the major thing is for whatever you need, I'd also encourage you, yes, you need to vet them, right, cuz you saw there were multiple ones.
[00:02:33] Some of them were probably on maintain. Same problem with any JavaScript library, but not only does thinking about your state in advance help with a lot of things, right? But it also gives you the ability to share a lot of these hooks, build your own hooks for your very custom things, for your application, but use some of the third-party ones that exist, right?
[00:02:52] So my hope is that in this workshop We learned basically how sometimes the way we structure a state and what tools we go to grab for use is great. But sometimes the use gives us a little more fine tuning as a separate set state management from the rest of our user interface.
[00:03:08] With that it becomes easier to test because these are do things just with JavaScript objects that we don't really have to think about. Too much, we can just do all the stuff and because it's just JavaScript, it's easier to test. And then we let that initial slide that I had explain the React.
[00:03:22] Which is, it just takes your business logic, takes a bunch rules by components, puts it onto the page. If your application is currently non-estate or that feels true to you, you're like, he's oversimplifying. What I would you encourage you to do is to think more deeply about your state, right?
[00:03:37] Because it can be like that. If you start to separate it out from the UI, if you start to come up, which is managing these data structures. Outside in a reducer that's just a plain old JavaScript function, and let that feed into your app in a very declarative way.
[00:03:51] You can basically say, okay, the state of the world has changed, React, your components are just a set of rules for how that should render, right? And almost like saying, as long as I give it the same inputs, I'm gonna get the same outputs, right? You can get to that point if you start to separate all these pieces out, and you can also ratchet it together.
[00:04:11] Anything that you've done squarely once, you can put into its own little hooks. You never have to see it again, right? Again, hide your problems, but also reuse the good things right? Can we take? All right, we had to, implement, undo reduce or once the second time that you need to implement it, maybe it's time to make that obstruction.
[00:04:29] We can argue maybe not the first time, right? Because nobody likes that person who took a very simple ticket and rewrote everything. But thinking about, stopping, pausing, and thinking about how we structure mass estate, has big impacts one potentially the performance depending on which trade offs you wanna make.
[00:04:46] We saw that we saw solved some performance issues and we reinvented them, but for the sake of maintainability, right? And these are the trade offs that we have to think about and these are the trade offs that we need to make. Thank you so much.
>> [APPLAUSE]