[React] Use the new React Context API

The React documentation have been warning us for a long time now this context shouldn ' t be used and that the API is UNSTABL E. Well, with the release of React 16.3, we ' re-finally getting a stable context API and what's even better is the it had Received a makeover and the Dev experience is fantastic! In this lesson, we'll look at a example app that passes props down several levels deep into the component tree and Replac E All this prop drilling with the new context API. We'll see how to create a Provider and a Consumer, how to use them in the code and we'll take a look at how the default PR Operties that get passed tocreateContextcome into play.

A condition that we need ' context ' API was to avoid pass Props all the the-the-the-to-the-component tree.

For example:

So Porps is passed all the The by

Pagewrapper

--Profilewrapper

--Profiledetails

New context API looks like this:

1. Create an Context service:

import { createContext } from "react";

const ProfileContext = createContext({

 firstName: "Sally",

 lastName: "Anderson"

});

export const ProfileProvider = ProfileContext.Provider;

export const ProfileConsumer = ProfileContext.Consumer;

‘createContext‘ takes an default value.

2. Wrap the top level component into Provider:

import { ProfileProvider } from "./ProfileContext";

 render() {

   return (

     <ProfileProvider value={this.state.profile}>

       <PageWrapper />

     </ProfileProvider>

   );

 }

If you want to just use default value, don‘t provide the Provider... this approach is a little bit strange.

 render() {

   return (

     <PageWrapper /> // may change in release

   );

 }

3. Remove all the props passed down.

4. In the component which do need context, use Consumer, Cunsumer takes a function as child.

import React from "react";

import { ProfileConsumer } from "./ProfileContext";

export const ProfileDetails = props => (

 <ProfileConsumer>

   {context => (

     <div>

       <div>

         <strong>First name:</strong> {context.firstName}

       </div>

       <div>

         <strong>Last name:</strong> {context.lastName}

       </div>

     </div>

   )}

 </ProfileConsumer>

);

[React] Use the new React Context API