React Hooks Tips Only the Pros Know

5.0 Average Customer Rating

Learn all the ins and outs of React hooks with TypeScript

  • 28 Videos
  • 2 hours 23 minutes
  • 220 Happy Students

About the course

Are you loving React but new to the Hooks API? Are you already using React Hooks but not sure you are doing the right thing? Or maybe you are sometimes getting tripped up by some of the React Hooks details?

The addition of the Hooks API to React was quite a major change. Before React Hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with React Hooks. And it often turns out there are many ways where you can improve your components by a better understanding of how each React Hook can be used.

In this course we are not just going to look at how to use React Hooks. We are also going to go behind the scenes and dive into the source code of React and the React ESLint rules to see why hooks work the way they do.

My name is Maurice de Beijer and I love React. I have been using React Hooks since they first shipped. In this video course I would like to teach you all about using React Hooks. During this course you will learn quite a few things. You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better. We will also cover creating several reusable custom hooks. In the last section we will combine all we learned into a more complete utility library to show how it all comes together. And I will be using TypeScript in most of the course so maybe you can pick up a few tips there as well. So come and join me with your laptop in this interactive course.

Is this course for you? Never worked with React hooks before? No problem, we will start from the beginning. Already using React Hooks a bit but want to learn more? Sweet. New to TypeScript? No problem. Do you have a reasonable understanding of React? Great, you have the prerequisite knowledge. Also have a computer with a modern browser and code editor? Super, you are all set to get started.

Here’s the completed GitHub repo link with all the code for the this course.

  • 28 Videos
  • 2 hours 23 minutes
  • 220 Happy Students

Courses Outline

Lesson 1: Introduction
Free
Hello and welcome
1:32
Goals
2:17
Personal Introduction
1:55
Prerequisites
5:35
Lesson 2: React Hooks -- the Basics
the Basics -The Standard useState() hook, Part 1
2:50
The standard useState() hook, Part 2
3:17
The standard useEffect() hook
7:16
The standard useContext() hook
2:52
Lesson 3: React Hooks -- Beyond the Basics
Beyond the Basics - Custom hooks
4:38
Hook Rules: Naming
6:14
The standard useRef() hook
6:59
The standard Lesson useLayoutEffect() hook
6:39
The useRef() and useState() hooks and dependencies
5:57
Creating a custom useDebounce() hook
4:14
The standard useCallback() hook
5:13
Creating a custom useWillUnmount() hook
3:55
Creating a custom useThrottle() hook
5:17
The standard useDebugValue() hook
3:55
Hook Rules: Only Call Hooks at the Top Level
9:49
Using multiple useState() hooks
5:11
The standard useReducer() hook
10:18
The standard useMemo() hook
3:25
Lesson 4: Putting it Together with a Practical Example
Introducing Kimrof, a Formik-like forms utility
3:01
The Kimrof Context and Provider
4:57
Displaying the values
5:32
Editing the data
4:50
Submitting the form
6:25
Validating the form
9:31
  • 28 Videos
  • 2 hours 23 minutes
  • 220 Happy Students