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.

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.

Reintroducing React: V16 and Beyond

“*Hey John, what have you done?!!!*”, said Mia as she stomped into John’s office. 

“*I was just profiling the bank application, and it’s not performing well at all,”* she added. 

John wasn’t surprised. He had not spent a lot of time thinking about performance, but with Mia all up in his face, he began to rethink. 

“*Okay, I’ll have a look and fix whatever bottlenecks I find. Can we do that together?*” John said while thinking to himself how much help Mia would be since she spotted the problem anyway. 

“*Oh, sure,*” she replied.   

After spending a couple of hours, they found and fixed a couple of performance bottlenecks in the application. 

What did they do? What measures were taken? 

### Example: Bank App

In this example, we’ll spin up the bank application and pick up from where we stopped in the earlier chapter. This time we’ll fix the performance bottlenecks within the application. 

Here’s what the bank app looks like: 



“*Hey John, what have you done?!!!*”, said Mia as she stomped into John’s office. 

“*I was just profiling the bank application, and it’s not performing well at all,”* she added. 

John wasn’t surprised. He had not spent a lot of time thinking about performance, but with Mia all up in his face, he began to rethink. 

“*Okay, I’ll have a look and fix whatever bottlenecks I find. Can we do that together?*” John said while thinking to himself how much help Mia would be since she spotted the problem anyway. 

“*Oh, sure,*” she replied.   

After spending a couple of hours, they found and fixed a couple of performance bottlenecks in the application. 

What did they do? What measures were taken? 

# Example: Bank App

In this example, we’ll spin up the bank application and pick up from where we stopped in the earlier chapter. This time we’ll fix the performance bottlenecks within the application. 

Here’s what the bank app looks like: 



Let's look at the bank app and how Profiler is helpful in identifying performance lags.

Introduction

Lifecycle

Context API

ContextType

React.memo

The Profiler

Lazy Loading

Hooks

Conclusion

Example: Identifying Performance BottleNecks in the Bank App

Example: Bank App