title: Component does not rerender when context changes
body: <p>I've been playing around with the react context api and I'm just not getting why it's not working.</p>
  
  <p>I have a component with a container that should show or hide depending on a valuer stored in context.</p>
  
  <p>This is the component:</p>
  
  <pre><code>import React, { useContext } from 'react';
  import ResultsContext from '../../context/results/resultsContext';
  
  const ResultsPanelContainer = () =&gt; {
    const resultsContext = useContext(ResultsContext);
    const { showResults } = resultsContext;
  
    console.log('showResults in ResultsPanelConatiner: ', showResults);
    return (
      &lt;div
        className='container-fluid panel'
        style={{ display: showResults ? 'block' : 'none' }}
      &gt;
        &lt;div className='container'&gt;
          &lt;div className='row'&gt;
            &lt;div className='col'&gt;
              &lt;h1 className='display-4'&gt;Results.Panel.js&lt;/h1&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default ResultsPanelContainer;
  </code></pre>
  
  <p>For completeness, the context is divided up into three sections, the call to the context itself, a 'state' file and a reducer. These are displayed below:</p>
  
  <h2>resultsContext.js</h2>
  
  <pre><code>import { createContext } from 'react';
  const resultsContext = createContext();
  export default resultsContext;
  </code></pre>
  
  <h2>ResultsState.js</h2>
  
  <pre><code>import React, { useReducer } from 'react';
  
  // import axios from 'axios';
  import ResultsContext from './resultsContext';
  import ResultsReducer from './resultsReducer';
  
  import { UPDATE_SHOW_RESULTS } from '../types';
  
  const ResultsState = (props) =&gt; {
    const initialState = {
      showResults: false,
    };
  
    const [state, dispatch] = useReducer(ResultsReducer, initialState);
  
    const updateShowResults = (data) =&gt; {
      console.log('updateShowResults - ', data);
      dispatch({
        type: UPDATE_SHOW_RESULTS,
        payload: data,
      });
    };
  
    return (
      &lt;ResultsContext.Provider
        value={{
          showResults: state.showResults,
          updateShowResults,
        }}
      &gt;
        {props.children}
      &lt;/ResultsContext.Provider&gt;
    );
  };
  
  export default ResultsState;
  </code></pre>
  
  <h2>resultsReducer.js</h2>
  
  <pre><code>import { UPDATE_SHOW_RESULTS } from '../types';
  
  export default (state, action) =&gt; {
    switch (action.type) {
  
      case UPDATE_SHOW_RESULTS:
        return {
          ...state,
          showResults: action.payload,
        };
  
      default:
        return state;
    }
  };
  </code></pre>
  
  <p>The change is triggered by a button click in a separate component and this <em>does</em> trigger an update in the context as shown when you log it to the console. However, the component is not rerendering.</p>
  
  <p>I understand from reading various answers on here that changing context doesn't trigger a rerender of all child components in the same way that setState does. However, the component displaying this is calling the context directly so as far as I can see the rerender should take effect.</p>
  
  <p>Am I missing something glaringly obvious?</p>
  
  <p>Thanks in advance.
  Stef</p>