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
  • 206 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
  • 206 Happy Students

Courses Outline

Lesson 1: Introduction
Hello and welcome
Personal Introduction
Lesson 2: React Hooks -- the Basics
the Basics -The Standard useState() hook, Part 1
The standard useState() hook, Part 2
The standard useEffect() hook
The standard useContext() hook
Lesson 3: React Hooks -- Beyond the Basics
Beyond the Basics - Custom hooks
Hook Rules: Naming
The standard useRef() hook
The standard Lesson useLayoutEffect() hook
The useRef() and useState() hooks and dependencies
Creating a custom useDebounce() hook
The standard useCallback() hook
Creating a custom useWillUnmount() hook
Creating a custom useThrottle() hook
The standard useDebugValue() hook
Hook Rules: Only Call Hooks at the Top Level
Using multiple useState() hooks
The standard useReducer() hook
The standard useMemo() hook
Lesson 4: Putting it Together with a Practical Example
Introducing Kimrof, a Formik-like forms utility
The Kimrof Context and Provider
Displaying the values
Editing the data
Submitting the form
Validating the form
  • 28 Videos
  • 2 hours 23 minutes
  • 206 Happy Students