title: Hook doesn't rerender component
body: <p>I'm using React with React-Router-Dom and I don't know why my child component (functional component) does not re-render when the URL change. And I don't know why, when I visit a dynamic page for the first time, the <code>console.log(url)</code>fired 3 times ?</p>
  
  <p>My child component : </p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import { useFetch } from "./hooks";
  
  function Page(props) {
    const url = "https://jsonplaceholder.typicode.com/posts" + props.match.url;
    console.log(url);
  
    const [data, loading] = useFetch(url);
  
    return (
      &lt;&gt;
        {loading ? (
          "Loading..."
        ) : (
          &lt;&gt;
            &lt;h1&gt;{data.title}&lt;/h1&gt;
            &lt;p&gt;{data.body}&lt;/p&gt;
          &lt;/&gt;
        )}
      &lt;/&gt;
    );
  }
  export default Page;
  </code></pre>
  
  <p>A sandbox is available here for more complete example : <a href="https://codesandbox.io/embed/great-mahavira-5ktrk" rel="nofollow noreferrer">https://codesandbox.io/embed/great-mahavira-5ktrk</a></p>