useEffect hook fails to fire callback with async function call

The following useEffect hook fails to fire:

  useEffect(() => { loadRepeatRulesToState(asana_email_encrypted, setRuleData) });

loadRepeatRulesToState is an async function. Here is its function header:

async function loadRepeatRulesToState(emailIdEncrypted: string, setRuleData: Function) {

Chrome Dev Tools network tab shows no request made. Ngrok reverse proxy also shows no request made to the endpoint.

This component is mounted when react-router-dom v5 matches the /rules route. Here is the parent one level up:

export default ({ setIsAuthenticated }: PropsShape) => (
        <Link to="/originals">Originals</Link>
        <Link to="/rules">Rules</Link>

the browser window does show the component's UI, but it renders only to the view when no data is present.

What mistake is being made to cause useEffect not to fire here?

Also tried

Empty dependency array as 2nd argument. No change in behavior after restarting the dev server.

Read more here:

Content Attribution

This content was originally published by Sean D at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: