title: How to re-render a variable using useEffect on a new route change in react
body: <p>I am trying to set the width of a component when the pathname is '/'.</p>
  <p>I have used useEffect to set the width to 800px and 1200px when on the home page and rest of the pages respectively.</p>
  <p>However, when I use useEffect and click a button to change the route, useEffect doesn't seem to rerender the width variable.</p>
  <p>Currently, on the initial page load, the width style does change depending on which route I am on, but when I switch routes, the change of width sizes does not occur.</p>
  <p>In short, how can I change the width variable based on which route is currently showing?</p>
  <p>Here is what I have so far:</p>
  <pre class="lang-js prettyprint-override"><code>function Window() {
    const [width, setWidth] = useState(null)
    let smWidth = '800px'
    let lgWidth = '1200px'
  
    useEffect(() =&gt; {
      let pathname = window.location.pathname
      if (pathname === '/') {
        console.log(pathname)
        setWidth(smWidth)
      } else {
        console.log(pathname)
        setWidth(lgWidth)
      }
    }, [smWidth, lgWidth])
  
    return (
      &lt;WindowWrapper style={{ width }}&gt;
       &lt;/Switch&gt;
         &lt;Route path=&quot;/goals&quot; component={goals} /&gt;
        &lt;Route path=&quot;/&quot; component={Home} /&gt;
      &lt;/Switch&gt;
    )
  }
  </code></pre>