title: useEffect doesn't update state on route change
body: <p>I am looking for a solution to register the route change and apply new <code>state</code> using <code>setState</code> and <code>useEffect</code>. The current code below doesn't update functions of <code>setState</code> when the route is changed. </p>
  
  <p>For example, I register the <code>pathname</code> of <code>/</code> with <code>location.pathname === '/'</code> within <code>createContext</code>, if the <code>pathname</code> is <code>/</code> the <code>setState</code> of <code>isHome</code> is registered <code>true</code>, however if <code>pathname</code> is <code>/page-1</code> <code>setState</code> is registered <code>false</code>.</p>
  
  <p>On browser reloads, <code>onMount</code> the <code>state</code> is correctly set, however on a route change using <code>Link</code> this does not. Also, please note that I am using Gatsby and in doing so, importing <code>{ Link } from 'gatsby'</code></p>
  
  <p><strong>CreateContext.js</strong></p>
  
  <pre><code>export const GlobalProvider = ({ children, location }) =&gt; {
  
  
  const prevScrollY = useRef(0);
    const [state, setState] = useState({
      isHome: location.pathname === '/',
      // other states
    });
  
    const detectHome = () =&gt; {
      const homePath = location.pathname === '/';
      if (!homePath) {
        setState(prevState =&gt; ({
          ...prevState,
          isHome: false
        }));
      }
      if (homePath) {
        setState(prevState =&gt; ({
          ...prevState,
          isHome: true
        }));
      }
    };
  
    useEffect(() =&gt; {
      detectHome();
      return () =&gt; {
        detectHome();
      };
    }, [state.isHome]);
  
    return (
      &lt;GlobalConsumer.Provider
        value={{
          dataContext: state,
        }}
      &gt;
        {children}
      &lt;/GlobalConsumer.Provider&gt;
    );
  };
  </code></pre>
  
  <p>If I <code>console.log(state.isHome)</code> on <code>pathname</code> <code>/</code> I get <code>true</code>, any other pathnames I get <code>false</code>, however, if I change route, the current <code>isHome</code> state remains previous, until I scroll and <code>useEffect</code> applies.</p>
  
  <p>The point of registering the <code>isHome</code> state is to alter CSS per page.</p>
  
  <p>How can I update state with <code>useEffect</code> when changing route. Previously, I would have done this with <code>componentDidUpdate</code> and register <code>prevProps.location.pathname</code> against <code>props.location.pathname</code>, however, my understanding is that this is no longer necessary with the <code>useEffect</code> hook.</p>