Another new hook introduced with React 16.8 is the useContext hook. The big benefit to this is that you no longer have to introduce multiple levels of nesting to your code when you want to use more than one context provider in your application. Here’s an example using the new hook:

import React, {createContext, useContext} from 'react';
import { render } from 'react-dom';

const TitleContext = createContext();

const UiComponent = props => {
  let title = useContext(TitleContext);
  return (
    <div>
      <b>UiComponent: </b>
      {title}
    </div>
    )
}

const App = props => {
  return (
    <TitleContext.Provider value="Value that gets passed down">
      <UiComponent />
    </TitleContext.Provider>
    );
}

render(<App />, document.getElementById('root'));

Edit useContext Example

Before the introduction of this new hook, the UiComponent would need to be coded like this:

const UiComponent2 = props => {
 return (
  <TitleContext.Consumer>
   {title => <div>{title}</div>}
  </TitleContext.Consumer>
 );
};