Kevin Powell - Community•2y ago

rerender is adding fetch results again and again.

issue occurs at setWatchListData. im trying to insert unique objects by comparing the ids. whenever it renders it adds same object inside an array

 const fetchWatchList = (list) => {
        fetch(`https://api.themoviedb.org/3/movie/${list[0]}?external_source=imdb_id&api_key=${API_KEY}`)
    .then(response => response.json())
    .then(response => {
      setWatchListData(prevlist => {
      const isMovieAdded = prevlist.filter(movie => movie.id !== response.id)

    if (isMovieAdded.length === 0) {
      return [...prevlist, response]
      } else {
          return prevlist;
      }
      })
      })
      .catch(err => console.error(err));
    }

    useEffect(() => {
        watchList?.map((list) => (
            fetchWatchList(list)))
    }, [watchList])

 const fetchWatchList = (list) => {
        fetch(`https://api.themoviedb.org/3/movie/${list[0]}?external_source=imdb_id&api_key=${API_KEY}`)
    .then(response => response.json())
    .then(response => {
      setWatchListData(prevlist => {
      const isMovieAdded = prevlist.filter(movie => movie.id !== response.id)

    if (isMovieAdded.length === 0) {
      return [...prevlist, response]
      } else {
          return prevlist;
      }
      })
      })
      .catch(err => console.error(err));
    }

    useEffect(() => {
        watchList?.map((list) => (
            fetchWatchList(list)))
    }, [watchList])

2 Replies

Joao•2y ago

Because your fetch call happens at the component level. You should include that within the useEffect hook.

AvinashOP•2y ago

useEffect(() => {
        watchList?.map((list) => (
            fetchWatchList(list)))
    }, [watchList])

useEffect(() => {
        watchList?.map((list) => (
            fetchWatchList(list)))
    }, [watchList])

this one will only trigger if ther is change in watchlist 🤔

Gaming

Programming

rerender is adding fetch results again and again.