useState is executed even dependency doesn't change

Question

I have to fetch an API when a state changes, i've used useEffect adding the dependency like this

const [ activeLottery, setActiveLottery ] = useState();
useEffect(() => {
    console.log('fetching')
}, [activeLottery])
return (
    <div className="container">
        <Carousel 
            lotteries={ lotteries } 
            isLoading={ isLoading }
            slideClick={ setActiveLottery }
        />
    </div>
);

The Component Carousel has an onClick function which changes activeLottery and it works properly since the state is mutated. But it executes the fetch when the component is rendered. Shouldn't do it when activeLottery changes?

Any hint would be much appreciated.

thanks

useEffect runs first when the component is rendered and then every time anything from the dependency array changes — Adarsh, Nov 21 '21 at 17:44
Does this answer your question? [Make React useEffect hook not run on initial render](https://stackoverflow.com/questions/53253940/make-react-useeffect-hook-not-run-on-initial-render) — skyboyer, Nov 21 '21 at 17:46
yes! finally i've added a conditional checking activeLottery, same as answer below — Serralvaro, Nov 21 '21 at 18:28

Sanket Shah · Accepted Answer · 2021-11-21T18:06:38.853

By default, useEffect always runs after the first render.

The dependency array in useEffect lets you specify the conditions to trigger it. If you provide useEffect an empty dependency array, it’ll run exactly once.

If you want to make API call when activeLottery changes then write condition inside useEffect.

useEffect(() => {
    if(activeLottery?.length){ // if activeLottery is array then you can check it's length
    // Your API call goes here
    }
    console.log('fetching')
}, [activeLottery])

Additionally, you can check out this awesome StackOverflow answer: https://stackoverflow.com/a/59841947/16420018

And this article by Dan Abramov: https://overreacted.io/a-complete-guide-to-useeffect/

Awesome! finally i've added the conditional just checking if activeLottery was yet filled. Many thanks! — Serralvaro, Nov 21 '21 at 18:29

useState is executed even dependency doesn't change

1 Answers1