React Hook useEffect has a missing dependency. What's the solution?

Question

I'm just about finished with a project but I'm getting these two errors. Does anyone know how I can fix this?

src\App.js Line 118:4: React Hook useEffect has a missing dependency: 'getMoviesData'. Either include it or remove the dependency array react-hooks/exhaustive-deps

src\components\MusicPlayer.jsx Line 48:9: React Hook useEffect has a missing dependency: 'togglePlay'. Either include it or remove the dependency array react-hooks/exhaustive-deps

Any help is greatly appreciated!

function App() {


//State 
const [movies, setMovies] = useState([])
const [topMovies, setTopMovies] = useState([])
const [kidsMovies, setKidsMovies] = useState([])
const [setKidsTv] = useState([])
//KidsTv
const [setTvShows] = useState([])
//TvShows
const [kidsTvSeries, setKidsTvSeries] = useState([])




//API URL 
const url = 'https://api.themoviedb.org/3/discover/movie?api_key=&with_genres=28/';
const tvUrl = 'https://api.themoviedb.org/3/tv/popular?api_key=&language=en-US&page=1';
const kidsMovieURL = 'https://api.themoviedb.org/3/discover/movie?api_key=&certification_country=US&certification.lte=G&with_genres=16&include_adult=false&sort_by=popularity.desc';
const kidsTvURL = 'https://api.themoviedb.org/3/tv/popular?api_key=8&language=en-US&page=1&with_genres=16&include_adult=false&sort_by=popularity.desc';
const topPicks = 'https://api.themoviedb.org/3/movie/top_rated?api_key=&language=en-US&page=1';
// const kidsAnimatedMovies = 'https://api.themoviedb.org/3/discover/movie?api_key=1f7c961ae4f02a23e0968d449c15bc98&with_genres=16';
const kidsSeries = 'https://api.themoviedb.org/3/discover/tv?api_key=&with_genres=10762'

//Async function to fetch API
async function getMoviesData (url, tvUrl, topPicks, kidsMovieURL, kidsTvUrl, kidsSeries) {

  await fetch(url).then(res => res.json()).then(data => setMovies(data.results))
  await fetch(topPicks).then(res => res.json()).then(data => setTopMovies(data.results))
  await fetch(tvUrl).then(res => res.json()).then(data => setTvShows(data.results))
  await fetch(kidsMovieURL).then(res => res.json()).then(data => setKidsMovies(data.results))
  await fetch(kidsTvUrl).then(res => res.json()).then(data => setKidsTv(data.results))
  await fetch(kidsSeries).then(res => res.json()).then(data => setKidsTvSeries(data.results))
}



//Use Effect 
 useEffect(() => { 
  getMoviesData(url, tvUrl, topPicks, kidsMovieURL, kidsTvURL, kidsSeries);

}, [])

const [songClicked, setSongClicked] = useState({})

import React, { useState, useEffect, useRef } from 'react'



function MusicPlayer({songs}) {

      //Test 
const songFiles = songs.map(song => song.songFile)

    //Hooks
    const audioPlayer = useRef()

    //State
    const [index, setIndex] = useState(0);
    const { songClicked} = useContext(songContext)
    // setSongClicked
    const [currentSong, setCurrentSong] = useState(songClicked);
    const [isPlaying, setisPlaying] = useState(false);
    const [volume, setVolume] = useState(30);
    const [mute, setMute] = useState(false);


     useEffect(() => {
        setCurrentSong(songClicked)
        
         if (songClicked) {
             audioPlayer.current.play()
         }
        
         if (songClicked) {
             togglePlay()
         }

     }, [songClicked])
 

    useEffect(() => {
        if(audioPlayer) {
            audioPlayer.current.volume = volume / 100;
        }
    }, [volume]);


    function togglePlay() {
        if(!isPlaying) {
            audioPlayer.current.play()
        } else {
            audioPlayer.current.pause()
        }
        // setisPlaying(prev => !prev)
        setisPlaying(isPlaying => !isPlaying)
    }

    function toggleSkipForward() {
        if(index >= songFiles.length - 1) {
            setIndex(0);
            audioPlayer.current.src = songFiles[0];
            audioPlayer.current.play();
        } else {
            setIndex(prev => prev + 1);
            audioPlayer.current.src = songFiles[index + 1];
            audioPlayer.current.play();
        }
    }


    function toggleSkipBackward() {
        if(index > 0) {
            setIndex(prev => prev -1);
            audioPlayer.current.src = songFiles[index -1];
            audioPlayer.current.play();
        } 
    }
    
    

    function VolumeBtns() {
        return mute
            ? <VolumeOffIcon sx={{color: 'lime', '&:hover': {color: 'white'}}} onClick={() => setMute(!mute)} />
            : volume <= 20 ? <VolumeMuteIcon sx={{color: 'lime', '&:hover': {color: 'white'}}} onClick={() => setMute(!mute)} />
            : volume <= 75 ? <VolumeDownIcon sx={{color: 'lime', '&:hover': {color: 'white'}}} onClick={() => setMute(!mute)} />
            : <VolumeUpIcon sx={{color: 'lime', '&:hover': {color: 'white'}}} onClick={() => setMute(!mute)} />
            }



  return (


    <div className='music-player-container'>

    <audio src={currentSong} ref={audioPlayer} muted={mute} webkit-playsinline="true" playsInline="true" autoplay="" />   

        <div className="controls">

            <div className="volume">

                <IconButton>
                    <VolumeBtns />
                </IconButton>

                 <Slider min={0} max={100} value={volume} onChange={(e,v) => setVolume(v)}
                defaultValue={50}
                    sx={{
                    width: 100,
                    color: 'success.main',
                    margin: '20px',
                    }} /> 
            </div>

            <div className="control-panel">

                    <IconButton onClick={toggleSkipBackward}>
                        <SkipPreviousIcon
                        sx={{
                            margin: '10px',
                            cursor: 'pointer',
                            color: 'silver', '&:hover': {color: 'blue'}
                        }} />
                    </IconButton>

                    {/* Play/Pause */}
                
                {!isPlaying
                  ?  <IconButton onClick={togglePlay}>
                        <PlayArrowIcon sx={{ margin: '10px', cursor: 'pointer', color: 'silver', '&:hover': {color: 'blue'} }} />
                    </IconButton>
                    
                   : <IconButton onClick={togglePlay}>
                        <PauseIcon sx={{ margin: '10px', cursor: 'pointer', color: 'silver', '&:hover': {color: 'blue'} }} />
                    </IconButton>
                }
                    
                    {/* Play/Pause */}


                    <IconButton onClick={toggleSkipForward}>
                        <SkipNextIcon
                        sx={{
                            margin: '10px',
                            cursor: 'pointer',
                            color: 'silver', '&:hover': {color: 'blue'}
                        }} />
                    </IconButton>

            </div>
        </div>
                         
            
    </div>


  )
}

export default MusicPlayer

Does this answer your question? [React Hook useEffect has a missing dependency: 'dispatch'](https://stackoverflow.com/questions/58624200/react-hook-useeffect-has-a-missing-dependency-dispatch) — Ankit, Nov 10 '22 at 16:56

Jack Ecuyer · Accepted Answer · 2022-11-10T21:22:01.863

1

For the first error, If you're not using the function elsewhere, you can define your getMoviesData() function within the useEffect and then call it.

useEffect(() => {
    const getMoviesData = async function (url, tvUrl, topPicks, kidsMovieURL, kidsTvUrl, kidsSeries) {  
      await fetch(url).then(res => res.json()).then(data => setMovies(data.results))
      await fetch(topPicks).then(res => res.json()).then(data => setTopMovies(data.results))
      await fetch(tvUrl).then(res => res.json()).then(data => setTvShows(data.results))
      await fetch(kidsMovieURL).then(res => res.json()).then(data => setKidsMovies(data.results))
      await fetch(kidsTvUrl).then(res => res.json()).then(data => setKidsTv(data.results))
      await fetch(kidsSeries).then(res => res.json()).then(data => setKidsTvSeries(data.results))
    }
    getMoviesData(url, tvUrl, topPicks, kidsMovieURL, kidsTvURL, kidsSeries);
})

edited Nov 10 '22 at 21:22

answered Nov 10 '22 at 16:43

Jack Ecuyer

155
1
10

hi Jack thanks for the answer! The first one worked fine but I'm having issues with the second one. – Gavin-walsh Nov 10 '22 at 17:03
When I include togglePlay – Gavin-walsh Nov 10 '22 at 17:03
useEffect(() => { setCurrentSong(songClicked) if (songClicked) { audioPlayer.current.play() } if (songClicked) { togglePlay() } }, [songClicked, togglePlay]) – Gavin-walsh Nov 10 '22 at 17:03
I get this error: The 'togglePlay' function makes the dependencies of useEffect Hook (at line 48) change on every render. To fix this, wrap the definition of 'togglePlay' in its own useCallback() Hook – Gavin-walsh Nov 10 '22 at 17:04
What should I do? Thanks – Gavin-walsh Nov 10 '22 at 17:04
Ah, I'll fix my answer. – Jack Ecuyer Nov 10 '22 at 17:07
@Gavin-walsh I was doubting my own solution... did it work correctly? – Jack Ecuyer Nov 10 '22 at 17:32
Yes it all worked. I just had to rearrange a couple of things but I've just launched the project so all is good. Thanks mate appreciate it! – Gavin-walsh Nov 10 '22 at 17:36
Actually, the play and pause icons I have are switching from 'play' to 'pause' really fast. It seems that the state is switching. I'll take a look at it! – Gavin-walsh Nov 10 '22 at 17:39
@Gavin-walsh It's because the useCallback() function is being recreated everytime the isPlaying state changes and then this is triggering the useEffect due to the function being in the dependency array causing an infinite loop. – Jack Ecuyer Nov 10 '22 at 17:43
Yes, that's what I've gathered. Any solution? lol – Gavin-walsh Nov 10 '22 at 17:44
@Gavin-walsh Working on it, I'm a bit stumped at the moment. useCallback() is a new concept for me also. – Jack Ecuyer Nov 10 '22 at 17:46
That's no worries. You've been great so far. This is just the joys of programming I guess! – Gavin-walsh Nov 10 '22 at 17:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/249493/discussion-between-jack-ecuyer-and-gavin-walsh). – Jack Ecuyer Nov 10 '22 at 18:02

arp · Answer 2 · 2022-11-10T16:52:21.233

You need to use useCallback hook in this instance.

const getMoviesData = useCallback(async (url, tvUrl, topPicks, kidsMovieURL, kidsTvUrl, kidsSeries) => {
  await fetch(url).then(res => res.json()).then(data => setMovies(data.results))
  await fetch(topPicks).then(res => res.json()).then(data => setTopMovies(data.results))
  await fetch(tvUrl).then(res => res.json()).then(data => setTvShows(data.results))
  await fetch(kidsMovieURL).then(res => res.json()).then(data => setKidsMovies(data.results))
  await fetch(kidsTvUrl).then(res => res.json()).then(data => setKidsTv(data.results))
  await fetch(kidsSeries).then(res => res.json()).then(data => setKidsTvSeries(data.results))
},[])

and in useEffect hook

useEffect(() => { 
  getMoviesData(url, tvUrl, topPicks, kidsMovieURL, kidsTvURL, kidsSeries);
},[getMoviesData])

React Hook useEffect has a missing dependency. What's the solution?

2 Answers2