API call will not work only first time loading in React-CodePudding

I have a page that calls for an API to get the showtimes. at first, it will call the API, but it won't do the call after that. following is the code where I call the API.

GetShowtimes is my my API call

const [showData, setShowData] = React.useState([]);

React.useEffect(() => {
  let mounted = true;
  GetShowtimes()
  .then(data =>{
    if(mounted){
      setShowData(data)
    }
})    
  return () => {
    mounted = false
  }
}, [])

const showtimeData = showData.data.showtimeDetails
console.log(showtimeData)

CodePudding user response：

Use Effect (without any dependencies) by definition will only run when the component gets mounted. It is not recommended to not provide the empty array as dependencies in the useEffect call. This will unnecessarily consume API resources and is a bad practice in general.

If you just want to call the API continuously (again, not recommended) you can use a timeout function and directly call the service inside the useEffect.

const [showData, setShowData] = React.useState([]);

React.useEffect(() => {
  let mounted = true;
  
  const timerId = setInterval(() => {
     GetShowtimes()
        .then(data =>{
        if(mounted){
          setShowData(prevData => prevData.concat(data)
        }
  }, 5000); // will run after every 5 seconds


})    
  return () => {
    clearInterval(timerId); // don't forget to clear the interval
    mounted = false
  }
}, [])

const showtimeData = showData.data.showtimeDetails
console.log(showtimeData)

Also, you should read a little about the concept of pagination and try to see if it applies to your use case. With pagination, you would only call the API when you need more data.

Cheers!

CodePudding user response：

that's reasonable, it only calls once the component is mounted, if you want to call it continuously you can remove [] in second parameter of useEffect, or add a dependency to call API again after dependency changes.

and be careful about using 'showData.data.showtimeDetails' because the first time you are logging that it has no data part or showtimeDetails you can simply add '?' before each dot to say if it exist's sth like this: showData?.data?.showtimeDetails hope it's useful

CodePudding user response：

The code you currently have will only fire once when the component is mounted. (Runs the cleanup function when its unmounted). If you want to make the api call everytime the component rerenders, remove the empty [] as second parameter.

React.useEffect(() => {
  let mounted = true;
  GetShowtimes()
  .then(data =>{
    if(mounted){
      setShowData(data)
    }
})    
  return () => {
    mounted = false
  }
})

If you want it to fire only when a particular state( lets say for eg. trigger) changes, add it to the array

   const trigger, setTrigger = useState(); 
   React.useEffect(() => {
          let mounted = true;
          GetShowtimes()
          .then(data =>{
            if(mounted){
              setShowData(data)
            }
        })    
          return () => {
            mounted = false
          }
        }, [trigger])

This will run this useEffect on mount and everytime the trigger state changes.Change the value of trigger to run the api whenever you need. Let me know if it helps