MENU


Consuming Multiple Contexts

A consumer is a React component that subscribes to context changes.

To keep context re-rendering fast, React needs to make each context consumer a separate node in the tree.
RESETRUNFULL
const ThemeContext = React.createContext('light');const UserContext = React.createContext({name: 'Guest'});class App extends React.Component {
   render() {
      const {signedInUser, theme} = this.props;
      return (<ThemeContext.Provider value={theme}>
                    <UserContext.Provider value={signedInUser}>
                       <Layout />
                    </UserContext.Provider>
                </ThemeContext.Provider>);
   }}function Layout() {
   return (
      <div>
         <Sidebar />
         <Content />
      </div>
   );}function Content() {
   return (
      <ThemeContext.Consumer>
    {theme => (
            <UserContext.Consumer>
   {user => (<ProfilePage user={user} theme={theme} /> )}
           </UserContext.Consumer>
     )}
      </ThemeContext.Consumer> );}ReactDOM.render(<App />, document.root);