title: How to use React Hooks Context with multiple values for Providers
body: <p>What is the best way to share some global values and functions in react?</p>
  
  <p>Now i have one ContextProvider with all of them inside:</p>
  
  <pre><code>&lt;AllContext.Provider
    value={{
      setProfile, // second function that changes profile object using useState to false or updated value
      profileReload, // function that triggers fetch profile object from server
      deviceTheme, // object
      setDeviceTheme, // second function that changes theme object using useState to false or updated value
      clickEvent, // click event
      usePopup, // second function of useState that trigers some popup
      popup, // Just pass this to usePopup component
      windowSize, // manyUpdates on resize (like 30 a sec, but maybe can debounce)
     windowScroll // manyUpdates on resize (like 30 a sec, but maybe can debounce)
    }}
  &gt;
  </code></pre>
  
  <p>But like sad in <a href="https://reactjs.org/docs/context.html#consuming-multiple-contexts" rel="noreferrer">docs</a>:
  Because context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider’s parent re-renders. For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for value:</p>
  
  <p>This is bad: </p>
  
  <pre><code>&lt;Provider value={{something: 'something'}}&gt;
  </code></pre>
  
  <p>This is ok: </p>
  
  <pre><code>this.state = {
        value: {something: 'something'},
      };
  &lt;Provider value={this.state.value}&gt;
  </code></pre>
  
  <p>I imagine that in future i will have maybe up to 30 context providers and it's not very friendly :/</p>
  
  <p>So how can i pass this global values and functions to components? I can just </p>
  
  <ol>
  <li>Create separate contextProvider for everything.</li>
  <li>Group something that used together like profile and it's functions,
  theme and it's functions (what about reference identity than?)</li>
  <li>Maybe group only functions because thay dont change itself? what
  about reference identity than?)</li>
  <li>Other simpliest way?</li>
  </ol>
  
  <p>Examples of what i use in Provider:</p>
  
  <pre><code>// Resize
    const [windowSize, windowSizeSet] = useState({
      innerWidth: window.innerWidth,
      innerHeight: window.innerHeight
    })
  // profileReload
  const profileReload = async () =&gt; {
      let profileData = await fetch('/profile')
      profileData = await profileData.json()
  
      if (profileData.error)
        return usePopup({ type: 'error', message: profileData.error })
  
      if (localStorage.getItem('deviceTheme')) {
        setDeviceTheme(JSON.parse(localStorage.getItem('deviceTheme'))) 
      } else if (profileData.theme) {
        setDeviceTheme(JSON.parse(JSON.stringify(profileData.theme)))
      } else {
        setDeviceTheme(settings.defaultTheme) 
      }
      setProfile(profileData)
    }
  
  // Click event for menu close if clicked outside somewhere and other
  const [clickEvent, setClickEvent] = useState(false)
  const handleClick = event =&gt; {
    setClickEvent(event)
  }
  // Or in some component user can change theme just like that
  setDeviceTheme({color: red})
  </code></pre>