title: Calling API in useEffect hook doesn't work correctly on prop update
body: <p>I'm looking for feedback on this customer React hook. I'm wondering:</p>
  
  <ol>
  <li>Does this look like a proper use of custom React hooks? </li>
  <li>Is there a better way to switch between different API endpoints based upon the prop that is passed in? I'm looking to do something like: </li>
  </ol>
  
  <pre class="lang-js prettyprint-override"><code>&lt;MovieGrid typeOfMovies={"popular"} /&gt;
  
  and
  
  &lt;MovieGrid typeOfMovies={"upcoming"} /&gt;
  </code></pre>
  
  <ol start="3">
  <li>Do you have <em>any</em> feedback or recommendations on anything you see. Thank you!</li>
  </ol>
  
  <p>The code I've provided does indeed work. But since hooks a relatively new I don't feel totally confident I'm using them right. </p>
  
  <p>Here's what I've got: </p>
  
  <pre class="lang-js prettyprint-override"><code>
  import React, { useState, useEffect } from "react";
  
  function useFetchMovies(typeOfMovies) {
    const [movieData, setMovieData] = useState([]);
  
  
    const movieEndpointURL = () =&gt; {
      if (typeOfMovies === "upcoming") {
        return `https://api.themoviedb.org/3/movie/upcoming?api_key={API_KEY}&amp;language=en-US&amp;page=1&amp;region=US`;
      } else if (typeOfMovies === "popular") {
        return `https://api.themoviedb.org/3/movie/popular?api_key={API_KEY}&amp;language=en-US&amp;page=1&amp;region=US`;
      }
    };
  
    const fetchMovieData = async () =&gt; {
      try {
        const res = await fetch(movieEndpointURL());
        const movies = await res.json();
        setMovieData(movies.results);
        console.log(movies.results);
      } catch (err) {
        console.log(err);
      }
    };
  
    useEffect(() =&gt; {
      fetchMovieData();
    }, []);
  
    return [movieData, setMovieData];
  }
  
  export { useFetchMovies };
  </code></pre>