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

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

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

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?

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

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

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

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

The Profiler

14 Lessons

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

Lazy Loading

8 Lessons

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

Hooks

11 Lessons

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

Learn to Localize a React Web App Using React Intl

Project

Conclusion

1 Lesson

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

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

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

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

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

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!