TylerMcGinnis – React Hooks
English | Size: 519.11 MB
TylerMcGinnis – React Hooks
The marketing pitch for Hooks is that they allow you to add state and other React features to function components. In reality, they’re much more than that. In this course you’ll start by learning the mental model behind Hooks. Once you’ve got that you’ll learn each Hook individually followed by a practical, real-world problem set to work through. To finish it off, because we all can’t start with brand new apps, you’ll learn to take an existing React app and refactor it to use Hooks.
Professional experience with React or our ‘React’ course.
What you’ll learn
Why React Hooks?
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.
Thinking in Hooks
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.
Rules of Hooks
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.
Refactor existing React apps
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.
This course was updated on July 24th 2019
(Buy premium account for maximum speed and resuming ability)