Home>
Courses>

Reintroducing React: V16 and Beyond

Reintroducing React: V16 and Beyond

Gain insights into React updates since V16, including new lifecycle methods, context API, and hooks. Discover how to utilize these features for writing better modern React applications.

Intermediate

62 Lessons

7h

Certificate of Completion

Gain insights into React updates since V16, including new lifecycle methods, context API, and hooks. Discover how to utilize these features for writing better modern React applications.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

13 Playgrounds

This course includes

13 Playgrounds
Course Overview
Course Content

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 to date with every new feature/release. It’s also possible to get lost in all the new features. Where exactly do you start? How important are they for your day to day use? This course is your one-stop reference to most importa...Show More

Course Content

1.

Introduction

Get familiar with React's evolution, modern features, and a creative learning approach.
Why Comics?
Why Reintroduce React?
What’s Changed Since Version 16?
2.

Lifecycle

Discover the logic behind the updated lifecycle methods and error handling in React.
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

Examine the Context API for efficient state management, avoiding prop drilling, and modularizing logic.
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

Apply your skills to manage context in React class components using contextType for better code structure.
Using Context without a Consumer
Using a Class Component with contextType
Conclusion
5.

React.memo

Solve problems in optimizing and improving functional components' performance with React.memo.
React.memo === Functional PureComponent
How React.memo works?
Handling Deeply Nested Props
Conclusion
6.

The Profiler

14 Lessons

Tackle performance bottlenecks in React apps using the Profiler tool for optimization.
7.

Lazy Loading

8 Lessons

Practice using React.lazy and Suspense to optimize component loading and enhance performance.
8.

Hooks

11 Lessons

Learn how to use React Hooks to simplify state and side effect management.
9.

Conclusion

1 Lesson

Discover the logic behind advanced React patterns and hooks to enhance your skills.

Course Author

Practice and apply your skills

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Adaptive Learning

Explain with AI

AI Code Mentor

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath