Advanced React Patterns With Hooks

Course Overview

With the release of hooks, certain React patterns have gone out of style. Hooks are likely the way we’ll be writing React components for the next couple of years, so they are quite important. React patterns can still be used, but in most cases, developers will be better off using hooks... See More

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

Hide All

Hide All Lessons

1. Introduction

What to Expect

Why Use Advanced Patterns?

2. Compound Components Pattern

What are Compound Components?

Example: Building an Expandable Component

Preventing Unnecessary Renders

Handling State Change Callbacks

Keeping Value Constant

Building the Compound Child Components

Manageable Styling for Reusable Components

Custom Styling Options

Custom Use of the Component

3. Control Props

What are Control Props?

How Control Props Work

Using the Controlled Component

Building a Custom Hook

Providing Default UI Elements

4. Props Collection

What is the Props Collection Pattern?

The Props Collection Pattern in Practice

5. Prop Getters

What is the Prop Getters Pattern?

Additional User Props

Handling Props with the Same Property Name

6. State Initializer

What is the State Initialization Pattern?

Resetting the State

Getting Rid of Extra State Variables

7. State Reducer

What Is the State Reducer Pattern?

Refactoring to `useReducer`

The User’s Application

Implementing the State Reducer Pattern

Updating Internal State

Cleanups

8. Conclusion

Where to Go from Here?

Last Words