Reintroducing React: V16 and Beyond

Course Overview

What’s new with React? New lifecycle methods, context API, hooks, and lots more. While the fundamental principles of React have stayed the same, the way we write React apps has changed with each new release. If you learned React a while back, it’s possible that you haven’t been up t... 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

Why Comics?

Why Reintroduce React?

What’s Changed Since Version 16?

2. Lifecycle

New Lifecycle Methods

What’s Lifecycle Anyway?

Method 1: static getDerivedStateFromProps

Method 2: getSnapshotBeforeUpdate

Method 2: getSnapshotBeforeUpdate Extension in Detail

The Error Handling Lifecycle Methods

Method 1: static getDerivedStateFromError

Method 2: componentDidCatch

Conclusion

3. Context API

Simpler State Management with the Context API

Introduction to Context API

Provider and Consumer Components

Example: The Mini-Bank Application

Identifying Props being Drilled

Avoid Props Drilling with Context

Isolating Implementation Details

Updating Context Values

Conclusion

4. ContextType

Using Context without a Consumer

Using a Class Component with contextType

Conclusion

5. React.memo

React.memo === Functional PureComponent

How React.memo works?

Handling Deeply Nested Props

Conclusion

6. The Profiler

Identifying Performance Bottlenecks

Measuring Performance in React Apps

Getting Started

How does the Profiler Work?

Making Sense of the Profiler Results

The Flamegraph

The Ranked Chart

Component Stats

Example: Identifying Performance BottleNecks in the Bank App

Noting the Expected Behavior

Interpreting the Flamegraph

Profile Different Interactions

The Provider Value

Conclusion

7. Lazy Loading

Lazy Loading with React.lazy and Suspense

What is Lazy Loading?

Using React.lazy and Suspense

Handling Errors

No Named exports

Code Splitting Routes

Adding Lazy Loading to the Bank App

Conclusion

8. Hooks

Building Simpler React Apps

Introducing Hooks

The Candy Bowl - An Analogy

The State Hook

Multiple useState calls

Object as Initial Values

The Effect Hook

Passing Array Dependencies

Build Your Own Hooks

The Rules of Hooks

Advanced Hooks

9. Conclusion

Where to Go from Here?