Module 1 Summary

[00:00 - 00:07] This is the summary of what we have learned in Module 1. The first thing we covered was why hooks, what problems did they solve?

[00:08 - 00:32] The introductions of hooks into the React framework aimed to address problems that had arisen from only allowing state to existing class-based components, problems such as logic that can't be reused between components, classes that confuse both people and machines, and components with so much stateful logic they're hard to understand. Once we had talked about the "wise", we looked into the "how's".

[00:33 - 00:48] Our first hook to get familiar with was the "use state" hook, the hook most similar to this dot state, which everyone who's worked with React for any length of time is familiar with. We looked at some functional examples employing use state and compared them to their state component equivalents.

[00:49 - 01:12] Next up, we looked at the "use effect" hook, the hook responsible for side effects, like data fetching, updating the DOM, and subscribing to event listeners. Unlike React lifecycle methods, where disparate data is grouped together and there are only a few methods to choose from, use effect allows for many separate hooks, whose side effects will only trigger when the variables they depend on change.

[01:13 - 01:31] A lesser known, but still very important hook is the "use ref" hook, which we discussed next. This hook builds on the ref already present in React, most commonly used to imperatively instruct components on how to act, like telling a component with an input to focus on the input once it's rendered in the DOM.

[01:32 - 01:51] But use ref goes beyond this. It may sit possible to keep track of values over the life of a functional component without causing a component re-render, like use state would. Although this may not seem like a big deal, use ref opens up a ton of possibilities within functional components that we're previously unheard of.

[01:52 - 02:03] It's really an ace in the hole when you finally realize that you need it. And the final hook that we got acquainted with is the use context hook, which takes React's context API to a whole new level.

[02:04 - 02:19] Now any component, both class and functional, can provide or consume context, thus avoiding prop drilling and improving, providing relevant state data only to the components that actually need it. And last, but certainly not least, we discussed custom hooks.

[02:20 - 02:38] Custom hooks are not actually a new hook in React, but the idea that we can extract a group of hooks providing certain functionality into functions to be reused among many components. The real beauty of custom hooks is that they're functions, so we can decide what sorts of arguments they accept and what they return.

[02:39 - 02:53] And even though the logic is abstracted into a separate function, React interprets it just as if the hooks were in line in the components themselves. Custom hooks are a convention that naturally follows from the design of hooks rather than from a React feature.

[02:54 - 03:04] There's a handful of other hooks available, which you can read more about in the lesson if you'd like. The hooks that I've covered in the previous lessons are the ones I find myself reaching for the most often.

[03:05 - 03:17] Now that we're more confident with the hooks we'll be using to upgrade our existing React application, it's time to put them into practice. But before we can do that, we need to upgrade the version of React our application is running on.

[03:18 - 03:28] Our current version doesn't even support hooks. We need to troubleshoot any issues we might encounter making it run, and we need to ensure that all the developers working on the app will be working with the same versions.

[03:29 - 03:30] Let's get started.