Module 5 Summary
This lesson is a summary of module 5.0's custom hooks we added to Hardware Handler.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Modernizing an Enterprise React App course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Modernizing an Enterprise React App, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:11] This lesson is a summary of what we have learned in module 5. In this module, we learned how to identify duplicate app functionality and ref actor it into a custom hook.
[00:12 - 00:28] We looked at how a couple of components in our app both called the same department API for different uses. With a few minor tweaks to a new custom hook that we made, it worked perfectly for both scenarios, and we simplified the code in both components that needed the data.
[00:29 - 00:43] We learned a way to make complex components simpler and easier to understand and maintain. Custom hooks can also serve the function of taking large, complicated components and breaking them down into less daunting blocks of code.
[00:44 - 01:01] The use products custom hook gave us a way to take some of the complex API calls and data transformations away from being tightly coupled to the components using them while still maintaining the same functionality. This is something that all future developers touching this code base will benefit from.
[01:02 - 01:17] And finally, we learned to simplify code beyond the components that the custom hook impacts. With a little analysis, we identified two API calls that were so similar that the data needed for both could actually be done in one API call instead.
[01:18 - 01:35] And in the process of refactoring one hook to take the place of two API calls, we were able to also simplify our checkout service file, to simplify our possible error states, and to simplify a child component consuming props from its parent. That's a huge win.
[01:36 - 01:52] So in the next module, we're going to bring in the context API to simplify our app state management. Creating custom hooks is a fantastic achievement. It really helps solidify a developer's understanding of how React hooks can work in so many situations.
[01:53 - 02:08] And now it's time to bring in the context API and the use context hook that we went over many modules ago. Context will allow us to simplify passing and accessing state within our app, and I think you'll be surprised at what we can achieve with it.
[02:09 - 02:16] I'll tell you, when context finally clicked for me, I didn't realize how much of a difference it would make to my development skills with React.