title: Need useEffect hook invoke when URL changes
body: <p>I am trying to have this component load data depending on its current url whether /global or /my-posts. The useEffect() grabs the data from the first loading of the component but when i change to another url i expected useEffect to check the url again and load the correct data but instead i'm stuck with the data from the first load. How do i get useEffect to invoke every time i click between different urls like /global and /my-posts url.</p>
  <pre><code>export default function Dashboard() {
    const [allRecipes, setAllRecipes] = useState([]);
    const [myRecipes, setMyRecipes] = useState([]);
    const currentUrl = window.location.pathname;
  
    useEffect(() =&gt; {
      if (currentUrl === '/dashboard/global') {
        console.log('hello');
        trackPromise(
          RecipeService.getAllRecipes()
            .then((data) =&gt; {
              setAllRecipes(data);
            }),
        );
      } else if (currentUrl === '/dashboard/my-posts') {
        console.log('hi');
        trackPromise(
          RecipeService.getRecipes()
            .then((data) =&gt; {
              setMyRecipes(data);
            }),
        );
      }
    }, []);
    console.log(window.location.pathname);
    return (
      &lt;&gt;
        &lt;div className=&quot;dashboard&quot;&gt;
          &lt;DashboardHeader /&gt;
          &lt;div className=&quot;created-posts&quot;&gt;
            {allRecipes.length !== 0
              ? allRecipes.map((recipe) =&gt; &lt;Post recipe={recipe} key={uuidv1()} /&gt;)
              : null}
            {myRecipes.length !== 0
              ? myRecipes.recipes.map((recipe) =&gt; &lt;Post recipe={recipe} key={uuidv1()} /&gt;)
              : null}
            {currentUrl === '/dashboard/create' ? &lt;CreateForm /&gt; : null}
            &lt;LoadingIndicator /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  </code></pre>