HomeCoursesReintroducing React: V16 and Beyond

5.0

Intermediate

Updated 2 months ago

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.

Join 2.7 million developers at

Overview

Content

Reviews

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 important React updates since V16 was released. We’ll walk through all the major features of modern React so you can stay in sync with the most recent changes while learning to write better software.

What’s new with React? New lifecycle methods, context API, hooks, and lots more. While the fundamental principles of React have ...Show More

Content

62 Lessons3 Quizzes

Introduction

3 Lessons

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

9 Lessons

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

9 Lessons

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

3 Lessons

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

4 Lessons

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.

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

Lazy Loading

8 Lessons

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

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

Hooks

11 Lessons

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

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

Learn to Localize a React Web App Using React Intl

Project

Premium

Conclusion

1 Lessons

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

Where to Go from Here?

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Ohans Emmanuel

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

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

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

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.

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!

Course

Next.js - The ultimate way to build React apps

Gain insights into building ultra-fast React apps with Next.js. Delve into static optimization, SEO practices, and deploying a giphy search app using the giphy.com API.

5 h

intermediate

Course

Using TypeScript with React

Gain insights into integrating TypeScript with React to improve productivity. Learn about strongly-typed props, state, and events, and set up projects using Create React App, Webpack, and Babel.

9 h

intermediate

Course

A Practical Guide to GraphQL: From the Client Perspective

Gain insights into GraphQL from a client perspective. Explore practical exercises, React integration, Apollo Client, and a live VM for real-time coding with GitHub’s GraphQL API.

20 h

intermediate

Course

Learn React Hooks for Frontend Development

Gain insights into React Hooks for frontend development. Learn about components, state management, performance optimization with useMemo, context updates with useContext, and creating custom hooks. Explore application logic mastery.

6 h

intermediate

Course

Full Reactive Stack: Spring Boot 2 & Spring WebFlux

Gain insights into building Reactive Web Applications with Spring Boot 2 and Spring WebFlux, from database integration to front-end. Explore Reactive vs MVC, performance, and deployment with Docker.

6 h

intermediate

Course

Build Reactive Websites with RxJS: Master Observables and Wrangle

Gain insights into building reactive websites with RxJS. Delve into mastering observables and managing events efficiently to create fast, responsive applications while reducing bugs.

50 h 30 m

intermediate

Course

React Tracked: Creating Web Apps with Global State

Discover how React Tracked optimizes render performance in web apps. Build a to-do app using two methods, and gain skills to create advanced applications efficiently.

3 h

beginner

Course

Next.js - The ultimate way to build React apps

intermediate

5 hour

Course

Using TypeScript with React

intermediate

9 hour

Course

A Practical Guide to GraphQL: From the Client Perspective