title: How to change the value of a Context with useContext?
body: <p>Using the <code>useContext</code> hook with React 16.8+ works well. You can create a component, use the hook, and utilize the context values without any issues.</p>
  
  <p>What I'm not certain about is how to apply changes to the Context Provider values.</p>
  
  <p>1) Is the useContext hook strictly a means of consuming the context values?</p>
  
  <p>2) Is there a recommended way, using React hooks, to update values from the child component, which will then trigger component re-rendering for any components using the <code>useContext</code> hook with this context?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const ThemeContext = React.createContext({
    style: 'light',
    visible: true
  });
  
  function Content() {
    const { style, visible } = React.useContext(ThemeContext);
  
    const handleClick = () =&gt; {
      // change the context values to
      // style: 'dark'
      // visible: false
    }
  
    return (
      &lt;div&gt;
        &lt;p&gt;
          The theme is &lt;em&gt;{style}&lt;/em&gt; and state of visibility is 
          &lt;em&gt; {visible.toString()}&lt;/em&gt;
        &lt;/p&gt;
        &lt;button onClick={handleClick}&gt;Change Theme&lt;/button&gt;
      &lt;/div&gt;
    )
  };
  
  function App() {
    return &lt;Content /&gt;
  };
  
  const rootElement = document.getElementById('root');
  ReactDOM.render(&lt;App /&gt;, rootElement);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;&lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.2/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.2/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>