title: Best practice regarding call to an API in React
body: <p>I'm bulding a simple movie app to train on React. I made a navigation menu where the user can click on movie categories as &quot;popular&quot;, &quot;now playing&quot; to display different movies on the homepage.</p>
  <p>My question is about how to handle the call to the API and what's considered the best practice. I thought about two solutions :</p>
  <p>1 - call all the movies from all the categories using useEffect when the app loads for the first time and save all the movies in different useState separated by category.</p>
  <pre><code>const [popularMovies, setPopularMovies] = useState([])
  const [nowPlayingMovies, setNowPlayingMovies] = useState([])
  ...
  </code></pre>
  <p>2 - create only one useState of moviesToDisplay and call the API and replace it's content every time the user click on a new category.</p>
  <pre><code>const [moviesToDisplay, setMoviesToDisplay] = useState([])
  </code></pre>