Using React State Hook, call function after setting multiple states

Question

I'm trying to make a function that will reset multiple states and then make an API call, however I'm having trouble making the API call happen AFTER the three states have been set. My function looks like this:

const resetFilters = () => {
    setYearFilter("");
    setProgressFilter("");
    setSearchFilter("");
    callAPI();
  };

I've tried using Promise.resolve().then() , and tried using async await , but it seems the useState setter function doesn't return a promise. Is there a way to make this all happen synchronously?

Answer 1

You could use useEffect to listen on changes and do each task sequentially

const resetFilters = () => {
  setYearFilter("")
}

useEffect(() => {
  setProgressFilter("")
}, [yearFilter])

useEffect(() => {
  setSearchFilter("")
}, [progressFilter])

useEffect(() => {
  callAPI()
}, [searchFilter])