Calling API in useEffect hook doesn't work correctly on prop update

manpreet Best Answer 2 years ago

I'm looking for feedback on this customer React hook. I'm wondering:

1. Does this look like a proper use of custom React hooks?
2. 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:

<MovieGrid typeOfMovies={"popular"} />

and

<MovieGrid typeOfMovies={"upcoming"} />

3. Do you have any feedback or recommendations on anything you see. Thank you!

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.

Here's what I've got:

import React, { useState, useEffect } from "react";

function useFetchMovies(typeOfMovies) {
  const [movieData, setMovieData] = useState([]);


  const movieEndpointURL = () => {
    if (typeOfMovies === "upcoming") {
      return `https://api.themoviedb.org/3/movie/upcoming?api_key={API_KEY}&language=en-US&page=1&region=US`;
    } else if (typeOfMovies === "popular") {
      return `https://api.themoviedb.org/3/movie/popular?api_key={API_KEY}&language=en-US&page=1&region=US`;
    }
  };

  const fetchMovieData = async () => {
    try {
      const res = await fetch(movieEndpointURL());
      const movies = await res.json();
      setMovieData(movies.results);
      console.log(movies.results);
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    fetchMovieData();
  }, []);

  return [movieData, setMovieData];
}

export { useFetchMovies };

manpreet 2 years ago

Your useFetchMovies seems to be correct expect the part that when typeOfMovies changes new data will not be fetched because when the useEffect first runs on mount of component it will refer to the fetchMoviesData that was initially created along with its closure and when the useFetchMovieshook is called again a new function is created which isn't referenced by the useEffect.

In order to make it word correctly you should pass typeOfMovies as the second argument to useEffect like

useEffect(() => {
    fetchMovieData();
}, [typeOfMovies]);