React was the most popular and most loved front-end framework when Hooks were released. Despite this, the React team still saw it necessary to spend valuable resources building Hooks. By looking at React from a historical context, you'll learn why and for what benefits Hooks were released.
Hooks come with a different mental model than class based components. It's not enough to just memorize the various Hook APIs, you need to learn to think in Hooks.
The useState Hook allows you to add state to function components. You'll learn its API as well as how to use it in a variety of scenarios you'd see building a real-world application.
The useEffect Hooks lets you add side effects to your function components. You'll learn not only what a 'side effect' is but also a variety of (sometimes tricky) real-world use cases for handling them.
Hooks come with some rules you need to follow. You'll learn these rules as well as some best practices when building them.
Historically, in order to share non-visual logic, you had to rely on confusing patterns like Higher-order components or Render-props. You'll learn how you can accomplish the same thing (but much easier) by building your own custom Hooks.
Reduce is a functional programming pattern that takes a collection as input and returns a single value as output. You'll learn how you can use this pattern for creating better, more predictable UIs using the useReducer Hook.
Sometimes you need a value that will persist across renders but won't trigger a re-render. You'll learn how to create that using the useState Hook then you'll learn a less hacky way with the useRef Hook.
Context lets you pass data to any part of your component tree without passing it down through individual components. You'll learn about the useContext Hook which is a more composable way to grab values off of context.
React.memo is a Higher-order component that lets you skip re-rendering a component if its props haven't changed. You'll learn when (and when NOT) to use it.
useCallback gives you referential equality between renders for functions. What does that mean? You'll find out.
useMemo gives you referential equality between renders for values. What does that mean? You'll find out.
Sadly, most of us aren't starting with a brand new React codebase. You'll learn how to take an existing React app built before Hooks and refactor it to use Hooks.