# react context multiple

Demo: https://codesandbox.io/s/react-multiple-contexttype-55ynd?from-embed=&file=/src/MultiContext.js:0-736

requre: `react-fast-compare` and `React.memo`

// MultiContext.js

import React from "react";
import isEqual from "react-fast-compare";

export const MultiContext = React.createContext(null);
MultiContext.displayName = "MultiContext";

export const MultiContextProvider = React.memo(
  function({ map, children }) {
    console.log("render provider");
    const contextMap = {};
    for (const i in map) {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      contextMap[i] = React.useContext(map[i]);
    }

    return (
      <MultiContext.Provider value={contextMap}>
        {children}
      </MultiContext.Provider>
    );
  },
  (prevProps, nextProps) => isEqual(prevProps.children, nextProps.children)
);
MultiContextProvider.displayName = "MultiContextProvider";

// Index.js

import React from "react";
import { MultiContext, MultiContextProvider } from "./MultiContext";

const AppContext = React.createContext();
AppContext.displayName = "AppContext";

const HomeContext = React.createContext();
HomeContext.displayName = "HomeContext";

export default function Index() {
  return (
    <AppContext.Provider value={minutes}>
      <HomeContext.Provider value={increment}>
        <MultiContextProvider map={{ AppContext, HomeContext }}>
          <App />
        </MultiContextProvider>
      </HomeContext.Provider>
    </MinutesContext.Provider>
  );
}

使用一個 Context

// App.js
import React from 'react'
import {AppContext} from 'context/AppContext'

class App extends React.Component {
  static contextType = AppContext;

  render() {
    console.log(this.context)
    return <div>Hello App</div>
  }
}

export default App

使用 MultiContext

// App.js
import React from 'react'
import {MultiContext} from 'context/MultiContext'

class App extends React.Component {
  static contextType = MultiContext;

  render() {
    console.log(this.context.AppContext)
    console.log(this.context.HomeContext)
    
    return <div>Hello App</div>
  }
}

export default App