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

After a successful recording session, you’ll be presented with a couple of different pieces of information about your components. 

First, you have 3 tabs representing different groups of information - we will now be discussing each of them separately.


# Flamegraph Tab

The first tab represents a flamegraph.

The flamegraph displays information on how long it took your component tree to render. 



# What do the Bars Represent?

You’ll notice that each component in your application tree is represented by bars of varying lengths and colors. 

The length of a bar defines how long it took the component and its children to render. 

Judging by the bar length, it appears that the `Provider` component took the longest time to render. That makes sense since the `Provider` is the main root component of the app. The time represented here is the time taken for the `Provider` and all its children to render.

That’s half the story. 
# What do the Colors of the Bars Represent?

You can see that the length and color of the bars are different.



In this lesson, we'll discuss what information flamegraphs reveal and how to read it for each component.

Introduction

Lifecycle

Context API

ContextType

React.memo

The Profiler

Lazy Loading

Hooks

Learn to Localize a React Web App Using React Intl

Conclusion

The Flamegraph

Flamegraph Tab

What do the Bars Represent?