title: React Context API with multiple values performance
body: <p>I'm using the React Context API to store many global state values (around 10 and probably more will be needed) and many components are using them. Unfortunately whenever any of the values change, all components using the <code>useContext</code> hook have to rerender. My current solution is to use <code>useMemo</code> for the return value of the components and <code>useCallback</code> for any complex functions and inside custom hooks I have. This addresses most of my performance concerns, but having to use the <code>useMemo</code> and <code>useCallback</code> all the time is quite annoying and missing one is quite easy. Is there a more professional way to do it?</p>
  
  <p>Here's an example based on my code:</p>
  
  <p>GlobalStateContext.js</p>
  
  <pre><code>import React, { useState } from 'react'
  
  const GlobalStateContext = React.createContext({ })
  
  export const GlobalStateProvider = ({ children }) =&gt; {
      const [config, setConfig] = useState({
          projectInfo: ''
      })
      const [projectFile, setProjectFile] = useState('./test.cpp')
      const [executionState, setExecutionState] = useState("NoProject")
  
      return (
          &lt;GlobalStateContext.Provider
              value={{
                  executionState,
                  config,
                  projectFile,
                  setExecutionState,
                  setConfig,
                  setProjectFile,
              }}
          &gt;
              {children}
          &lt;/GlobalStateContext.Provider&gt;
      )
  }
  
  export default GlobalStateContext
  </code></pre>
  
  <p>Example.jsx</p>
  
  <pre><code>import React, { useContext } from 'react'
  import GlobalStateContext from '../utils/GlobalStateContext.js'
  
  export default Example = () =&gt; {
      const {
          executionState,
          setExecutionState,
      } = useContext(GlobalStateContext)
  
      return useMemo(
          () =&gt; (
              &lt;div&gt;
                  The current execution state is: {executionState}
                  &lt;br /&gt;
                  &lt;button onClick={() =&gt; setExecutionState('Running')}&gt;Running&lt;/button&gt;
                  &lt;button onClick={() =&gt; setExecutionState('Stopped')}&gt;Stopped&lt;/button&gt;
                  &lt;button onClick={() =&gt; setExecutionState('Crashed')}&gt;Crashed&lt;/button&gt;
              &lt;/div&gt;
          ),
          [
              executionState,
              setExecutionState,
          ]
      )
  }
  </code></pre>