title: Store hooks in React Context API as dependency injection. Is it a good pattern?
body: <p>I'm working on shared libraries for multiple projects. And I need to have a flexible way of using hooks not depending on implementation. So I'm using React Context API as a dependency injection pattern.</p>
  <p>Simplified example:</p>
  <pre class="lang-js prettyprint-override"><code>const DIContext = React.createContext();
  
  // multiple implementations of common hook useConfig
  const useReduxConfig = () =&gt; useSelector(getConfig);
  const useStaticConfig = () =&gt; ({foo: 'bar'})
  const useFetchConfig = () =&gt; ... //ie fetch config for server
  
  // this will be always static value
  const DIValue={
    useConfig: useReduxConfig // ca be any of implementation
  }
  
  const App = () =&gt; {
  return &lt;DiContext.Provider value={DIValue}&gt;&lt;SharedComponent /&gt;&lt;/DiContext.Provider&gt;
  }
  
  const SharedComponent = () =&gt; {
     // shared component does not care about the implementation of hook
     const {useConfig} = useContext(DiContext)
     const config = useConfig();
     return &lt;div&gt;{JSON.stringify(config)}&lt;/div&gt;
  }
  </code></pre>
  <p>What do you think, is it a good pattern ?</p>