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


### `Provider` and `Consumer` Components

Well, every context object comes with a `Provider` and `Consumer` component. 

The `Provider` component **provides** the value saved in the context object to its children, while the `Consumer` component **consumes** the values from within any child component. 

I know that was a mouthful, so let’s break it apart slowly. 

In the Benny example, we can go ahead and destructure the `BennyPositionContext` to retrieve the `Provider` and `Consumer` components. 

const BennyPositionContext = createContext({ 
	x: 50, 
	y: 50 
})
// get provider and consumer
const { Provider, Consumer } = BennyPositionContext


Since `Provider` provides values saved in the context object to its **children**,  we could wrap a tree of components with the `Provider` component as shown below:


# `Provider` and `Consumer` Components

Well, every context object comes with a `Provider` and `Consumer` component. 

The `Provider` component **provides** the value saved in the context object to its children, while the `Consumer` component **consumes** the values from within any child component. 

I know that was a mouthful, so let’s break it apart slowly. 

In the Benny example, we can go ahead and destructure the `BennyPositionContext` to retrieve the `Provider` and `Consumer` components. 

In this lesson, we'll explore provider and consumer components.

Introduction

Lifecycle

Context API

ContextType

React.memo

The Profiler

Lazy Loading

Hooks

Learn to Localize a React Web App Using React Intl

Conclusion

Provider and Consumer Components

`Provider` and `Consumer` Components