Calling an async function inside the if condition of useEffect hook

Question

How can I call a redux action inside the if block of useEffect hook:

useEffect(async () => {
    if (nameId && selectedGroup === 'AGM') {
        const subPeople = await getSubPeople(nameId);
    }
}, [nameId, selectedGroup]);

I have two select boxes. If the person types in the name select box, I store the selected id of name in the nameId state. If user selects a group, I store it in selectedGroup, so only if both conditions match I need to call an API endpoint to get the subPeople.

If I comment this code there is no error. How can I make the snippet work?

someone wrote a useAsyncEffect thing just for this ... also there's this question on SO that may help — Bravo
– Bravo, Commented Nov 22, 2019 at 8:42

Clarity · Accepted Answer · 2019-11-22 08:43:46Z

5

You can move the async logic into a separate function and call it inside useEffect, since useEffect's callback can't be async itself:

useEffect(() => {
  const getPeople = async () => {
    if (nameId && selectedGroup === 'AGM') {
      const subPeople = await getSubPeople(nameId);
      return subPeople; // Or set the state, etc.
    }
  }
  getPeople(); 
}, [nameId, selectedGroup]);

answered Nov 22, 2019 at 8:43

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Calling an async function inside the if condition of useEffect hook

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related