How to change Context value while using React Hook of useContext : <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>
