title: Why isn't `useContext` re-rendering my component?
body: <p>As per the <a href="https://reactjs.org/docs/hooks-reference.html#usecontext" rel="nofollow noreferrer">docs</a>:</p>
  
  <blockquote>
    <p>When the nearest <code>&lt;MyContext.Provider&gt;</code> above the component updates, this Hook will trigger a rerender with the latest context value passed to that MyContext provider. Even if an ancestor uses <code>React.memo</code> or <code>shouldComponentUpdate</code>, a rerender will still happen starting at the component itself using useContext.
    ...
    A component calling useContext will always re-render when the context value changes.</p>
  </blockquote>
  
  <p>In my Gatsby JS project I define my Context as such:</p>
  
  <p><strong>Context.js</strong></p>
  
  <pre><code>import React from "react"
  
  const defaultContextValue = {
    data: {
      filterBy: 'year',
      isOptionClicked: false,
      filterValue: ''
    },
    set: () =&gt; {},
  }
  
  const Context = React.createContext(defaultContextValue)
  
  class ContextProviderComponent extends React.Component {
    constructor() {
      super()
  
      this.setData = this.setData.bind(this)
      this.state = {
        ...defaultContextValue,
        set: this.setData,
      }
    }
  
    setData(newData) {
      this.setState(state =&gt; ({
        data: {
          ...state.data,
          ...newData,
        },
      }))
    }
  
    render() {
      return &lt;Context.Provider value={this.state}&gt;{this.props.children}&lt;/Context.Provider&gt;
    }
  }
  
  export { Context as default, ContextProviderComponent }
  </code></pre>
  
  <p>In a layout.js file that wraps around several components I place the context provider:</p>
  
  <p><strong>Layout.js</strong>:</p>
  
  <pre><code>import React from 'react'
  import { ContextProviderComponent } from '../../context'
  
  const Layout = ({children}) =&gt; {
  
      return(
          &lt;React.Fragment&gt;
              &lt;ContextProviderComponent&gt;
                  {children}
              &lt;/ContextProviderComponent&gt;
          &lt;/React.Fragment&gt;
      )
  }
  </code></pre>
  
  <p>And in the component that I wish to consume the context in:</p>
  
  <pre><code>import React, { useContext } from 'react'
  import Context from '../../../context'
  
  const Visuals = () =&gt; {
  
      const filterByYear = 'year'
      const filterByTheme = 'theme'
  
      const value = useContext(Context)
      const { filterBy, isOptionClicked, filterValue } = value.data
  
      const data = &lt;&lt;returns some data from backend&gt;&gt;
  
      const works = filterBy === filterByYear ? 
          data.nodes.filter(node =&gt; node.year === filterValue) 
          : 
          data.nodes.filter(node =&gt; node.category === filterValue)
  
     return (
          &lt;Layout noFooter="true"&gt;
              &lt;Context.Consumer&gt;
                  {({ data, set }) =&gt; (
                      &lt;div onClick={() =&gt; set( { filterBy: 'theme' })}&gt;
                         { data.filterBy === filterByYear ? &lt;h1&gt;Year&lt;/h1&gt; : &lt;h1&gt;Theme&lt;/h1&gt; }
                      &lt;/div&gt;
                  )
              &lt;/Context.Consumer&gt;
          &lt;/Layout&gt;
      )
  </code></pre>
  
  <p><code>Context.Consumer</code> works properly in that it successfully updates and reflects changes to the context. However as seen in the code, I would like to have access to updated context values in other parts of the component i.e outside the <code>return</code> function where <code>Context.Consumer</code> is used exclusively. I assumed using the <code>useContext</code> hook would help with this as my component would be re-rendered with new values from context every time the div is clicked - however this is not the case. Any help figuring out why this is would be appreciated.</p>
  
  <p>TL;DR: <code>&lt;Context.Consumer&gt;</code> updates and reflects changes to the context from child component, <code>useContext</code> does not although the component needs it to.</p>
  
  <p><strong>UPDATE:</strong>
  I have now figured out that <code>useContext</code> will read from the default context value passed to <code>createContext</code> and will essentially operate independently of <code>Context.Provider</code>. That is what is happening here, <code>Context.Provider</code> includes a method that modifies state whereas the default context value does not. My challenge now is figuring out a way to include a function in the default context value that can modify other properties of that value. As it stands:</p>
  
  <pre><code>const defaultContextValue = {
    data: {
      filterBy: 'year',
      isOptionClicked: false,
      filterValue: ''
    },
    set: () =&gt; {}
  }
  </code></pre>
  
  <p><code>set</code> is an empty function which is defined in the <code>ContextProviderComponent</code> (see above). How can I (if possible) define it directly in the context value so that:</p>
  
  <pre><code>const defaultContextValue = {
    data: {
      filterBy: 'year',
      isOptionClicked: false,
      filterValue: ''
    },
    test: 'hi',
    set: (newData) =&gt; {
       //directly modify defaultContextValue.data with newData
    }
  }
  </code></pre>