Async Fetch function not being called in useEffect

Question

I have a simple async function that I want to be called when a page loads which fetches data and updates my context.

import { useContext } from 'react'
import { ContentSlotsContext } from '../commerce-api/contexts'

    export default async function getSlots() {
        const { slots, setSlots } = useContext(ContentSlotsContext)
        const response = await fetch('https://jsonplaceholder.typicode.com/todos');
        const data = await response.json();
        setSlots(data);
    }

I'm trying to call it like this:

useEffect(() => {
    getSlots()
})

slots and setSlots are a setState the context is initialised with.

But it's not being called. When I call it outside of useEffect it works but infinitely loops due to constantly re-rendering.

Oblosys · Accepted Answer · 2022-03-27 12:58:47Z

3

The problem is that you're calling useContext from a function that is not a react function component or a custom hook (see the rules of hooks). There's a useful ESLint plugin eslint-plugin-react-hooks that will warn against this.

To fix the issue, you can instead pass setSlots as a parameter to getSlots:

export default async function getSlots(setSlots) {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  const data = await response.json();
  setSlots(data);
}

and call useContext before useEffect, at the top level of your function component (also a rule of hooks), with an empty dependencies array as the second argument, so the effect only fires once (see the note in the useEffect docs):

..
const { setSlots } = useContext(ContentSlotsContext);
useEffect(() => {
  getSlots(setSlots);
}, []);
..

edited Mar 27, 2022 at 12:58

answered Mar 27, 2022 at 2:03

Oblosys

15.2k3 gold badges33 silver badges41 bronze badges

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

3 Comments

Bergi Over a year ago

Or, much simpler, use getSlots().then(setSlots) with the original function

Cameron Over a year ago

Makes sense, thanks for your help. It now keeps looping and performing the fetch x amount of times, how do I stop this? Do I add a simple check in useEffect before I run getSlots?

Oblosys Over a year ago

Ah yes, there was no dependencies-array argument. If you pass it a [] it should work. Added it to the answer.

Collectives™ on Stack Overflow

Async Fetch function not being called in useEffect

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related