title: Context API - multiple providers + React hooks for multiple pages?
body: <p>How can simplify the React Context API providers without having to wrap my parent component with all those Providers? I have a couple of pages: Home, Blog, Contact, Gallery and About. I have created a Context API Context and Provider for the contact page. Every single Provider has its own unique API which I'm fetching using Axios with React Hooks.</p>
  
  <p>What I am asking is there a way, to keep my code clean and dry not to repeat myself over and over again.</p>
  
  <p>For instance, I would like to have one Context function, which I can use over and over again and only get the API data for one unique Axios API URL.</p>
  
  <p>How can I do this? Copy pasting the same thing.. is not clean.</p>
  
  <pre><code>PageContext.js: 
  
  import React, { useState, useEffect, createContext } from 'react';
  
  import axios from 'axios';
  
  import PropTypes from 'prop-types';
  
  import { PAGE_CONTACT } from 'constants/import';
  
  export const PageContext = createContext();
  
  export const PageProvider = props =&gt; {
      const [contactPage, setContactPage] = useState([]);
  
      useEffect(() =&gt; {
          axios.get(PAGE_CONTACT).then(result =&gt; setContactPage(result.data));
      }, []);
  
      return (
          &lt;PageContext.Provider value={[contactPage, setContactPage]}&gt;
              {props.children}
          &lt;/PageContext.Provider&gt;
      );
  };
  
  PageProvider.propTypes = {
      children: PropTypes.oneOfType([
          PropTypes.arrayOf(PropTypes.node),
          PropTypes.node,
      ]).isRequired,
  };
  </code></pre>
  
  <p>Page Contact (component) where I use the Context:</p>
  
  <pre><code>import React, { useContext } from 'react';
  
  import ReactHtmlParser from 'react-html-parser';
  
  import { PageContext } from 'pages/context/PageContext';
  
  const Contact = () =&gt; {
      const [field] = useContext(PageContext);
  
      return (
          &lt;section className="contact"&gt;
              &lt;div className="page"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-xs-12"&gt;
                          &lt;h3 className="section__title"&gt;{field.page_title}&lt;/h3&gt;
                          {ReactHtmlParser(field.page_content)}
                          {field.page_featured_image &amp;&amp; (
                              &lt;img src={field.page_featured_image.path} /&gt;
                          )}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      );
  };
  
  export default React.memo(Contact);
  </code></pre>
  
  <p>Index.js Wrapped the  with the provider:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import { PageProvider } from 'pages/context/PageContext';
  
  // Styles
  import 'sass/root.scss';
  
  // Root App
  import App from './App';
  
  import * as serviceWorker from './serviceWorker';
  
  ReactDOM.render(
      &lt;PageProvider&gt;
          &lt;App /&gt;
      &lt;/PageProvider&gt;,
      document.getElementById('root')
  );
  
  serviceWorker.unregister();
  </code></pre>