'How to prevent useEffect infinite loop when checking Apollo response for changes?
I'm calling a mutation like so:
const [deleteTask, deleteTaskResponse] = useMutation(deleteTaskMutation);
// this is called in a different component (all of this logic is in a context provider)
const deleteTaskFunction = (taskId) => {
deleteTask({variables: { taskId }})
}
I have a a useEffect set up to monitor for when the deleteTaskResponse is changed to update state with the response like so:
useEffect(()=>{
const { data, loading, error } = deleteTaskResponse;
if (data && data.deleteTask){
console.log(data.deleteTask)
setTasks(data.deleteTask.tasks) // state
}
}, [deleteTaskResponse])
I don't understand why this is causing an infinite effect loop as the response shouldn't be changing since the function is only called once. I've tried putting a console.log in the deleteTaskFunction and can confirm that it is only being called once when the delete button is pressed.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
