title: Does not render the view after dispatch
body: <p>When i run the Logout function and goes to /logout i want to set my user to null and render a logout page but this code just set null and does not render anything that i wrote in return what is the problem?</p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  import { useStateValue } from &quot;../StateProvider&quot;;
  
      const Logout = () =&gt; {
        const [{}, dispatch] = useStateValue();
      
        dispatch({
          type: &quot;SET_USER&quot;,
          user: null,
        });
      
        return (
          &lt;div&gt;
            &lt;h1
              style={{
                &quot;background-color&quot;: &quot;#F3B858&quot;,
                height: &quot;100%&quot;,
                display: &quot;flex&quot;,
                justifyContent: &quot;center&quot;,
                alignItems: &quot;center&quot;,
                height: &quot;90vh&quot;,
                color: &quot;#fff&quot;,
                &quot;font-size&quot;: &quot;80px&quot;,
                &quot;font-weight&quot;: 900,
              }}
            &gt;
              BYE
            &lt;/h1&gt;
          &lt;/div&gt;
        );
      };
      
      export default Logout;
  </code></pre>
  <p>StateProvider:</p>
  <pre><code>import React, { createContext, useContext, useReducer } from &quot;react&quot;;
  
  export const StateContext = createContext();
  
  export const StateProvider = ({ reducer, initialState, children }) =&gt; (
    &lt;StateContext.Provider value={useReducer(reducer, initialState)}&gt;
      {children}
    &lt;/StateContext.Provider&gt;
  );
  
  export const useStateValue = () =&gt; useContext(StateContext);
  </code></pre>