useEffect React Hook calls multiple times when a component changes

Asked Feb 21 '20 at 14:26

Active Feb 21 '20 at 14:38

Viewed 181 times

My function makes 10 async calls to the backend when the filterState has been changed. I want it to be called once per change.

 useEffect(() => {
    const getQuery = async () => {
      let query = filterActions.getQueryString()
      taskService.get(query).then(res => {
        console.log('tasks res', res)
        setQueriedTasks(res)
      })
    }

    getQuery()
  }, [filterState])

How I update the filter

  const updateFilter = (updates) => {
    dispatch({type: 'SET_FILTER', payload: updates})
  }

My reducer to update state

function reducer(state, action) {
  switch (action.type) {
  case 'SET_FILTER':
    return Object.assign({...state}, action.payload)
  }
}

edited Feb 21 '20 at 14:38

asked Feb 21 '20 at 14:26

paul blackmore

Add code where you are updating filterState – Abhay Sehgal Feb 21 '20 at 14:31
1

debounce it maybe? – Jonas Wilms Feb 21 '20 at 14:31
I have edited my question with more code – paul blackmore Feb 21 '20 at 14:38
instead of `[filterState]` check it with `[JSON.stringfy(filterState)]`. – TheMisir Feb 21 '20 at 14:48
Could you provide a codesandbox that shows the code with a bit more context? – Linschlager Feb 21 '20 at 14:54

useEffect React Hook calls multiple times when a component changes

0 Answers0