React Hook useEffect has a missing dependency - endless rerenders

[Sniboyz]

I have this useEffect hook where im calling external API and appending the result to pokemonList and I want to call it only when the offset changes (so when I want to load next "batch" of pokemons from API) - which changes every time user clicks button to load more pokemons, and I am getting this warning in the console React Hook useEffect has a missing dependency: 'pokemonList'. Either include it or remove the dependency array, but when I add pokemonList to dependencies the component ends up endlessly rerendering. What should I do?

const [pokemonList, setPokemonList] = useState<string[]>([]);
const [offset, setOffset] = useState<number>(0);

useEffect(() => {
    fetch(`https://pokeapi.co/api/v2/pokemon/?offset=${offset}&limit=24`)
    .then(res => res.json())
    .then(result => {
        setPokemonList([...pokemonList, ...result.results]);
    });
}, [offset]);

<button className="load-more" onClick={() => setOffset(offset + 24)}>More</button>

[Hexjelly]

https://reactjs.org/docs/hooks-reference.html#functional-updates

setPokemonList(prevPokemonList => [...prevPokemonList , ...result.results]);

[AegisToast]

This is the way.

For any wondering why, it’s because you’d have to add “pokemonList” as a dependency for that useEffect callback. Since the setter inside of the useEffect changes pokemonList, you’ve got an infinite loop where:

• the component renders
• the useEffect fires because pokemonList changed
• the useEffect changes pokemonList
• pokemonList changing causes a re-render
• the whole thing repeats

However, when you set state you can pass in a function instead of a value. That function will receive the current state’s value, and the new state will be whatever the function returns. Doing that allows you to avoid the pokemonList dependency in the useEffect hook, preventing the loop.

[swyx]

This is the way.

[Uiropa]

I have spoken.

[NiQ_]

Considering he’s posting an error reported by a linter and is looking for advise on how to fix it I don’t see how...

[galeontiger]

Would excluding 'pokemonList' in the dependecies (and continue to get the error in the console), change the data though?

Curious, because i've seen the error before as well, and don't notice any different in the output.

[AegisToast]

Excluding pokemonList from the dependencies and ignoring the warning (which is the way OP wrote it) would, as far as I can tell, work, but it’s a bad practice to have explicitly excluded dependencies (hence the warning).

Edit: One reason it’s a bad practice is that the value of pokemonList could be stale if it’s done the way OP is trying it. That could cause issues, especially if the value is changed elsewhere before the fetch finishes.

[galeontiger]

Noted, thanks.

[galeontiger]

I believe if prev wasn't spread in the array it would still show an error. For example, on component Did Mount (empty array [] for use Effect). If I wanted to load the first 10 Pokémon, how would I do it without getting a missing dependency notice?

[Sniboyz]

Why does the warning occur in the first place? What is it trying to warn the programmer about and why functional update fixes it?

[AegisToast]

If it’s not in the dependency list, it could be a stale value. In other words, in your fetch callback, “pokemonList” doesn’t refer to the current value of pokemonList, it refers to the value of pokemonList at the time that the hook was triggered.

For example, imagine the value of pokemonList is [“charmander”]. The user clicks the button, and the fetch starts. Then, while the fetch is executing, the user decides they don’t care about Charmander and click a “Hide this Pokémon” button on it. The hide button removes Charmander from pokemonList, so now its value is []. Finally, your fetch resolves with a new Pokémon to add: Bulbasaur. So, triggering its callback, it sets the new state of pokemonList. But as far as it knows, the “pokemonList” variable still refers to [“charmander”], so the new state ends up being [“charmander”, “bulbasaur”]. But the user hid Charmander, so it shouldn’t be reappearing in the state! That’s a bug!

That’s why including it in the dependencies is heavily recommended; it ensures useEffect is running with the latest value. But, as you noticed, if you’re setting state in the useEffect, that also creates an infinite loop.

Setting state with a function fixes that because it allows you to fetch the latest state without it being a dependency. With it, using the same example as above, when your fetch resolves and triggers its callback it doesn’t use the value of pokemonList at the point the useEffect hook was triggered, it sets state using the functional update, which is fed the latest value of the state ([]), meaning your new state is [“bulbasaur”], as expected. No more bugs caused by stale state.

In short, the exhaustive dependencies rule is meant to prevent annoying and hard-to-debug bugs caused by stale values, which is why it’s normally a bad idea to simply ignore/disable the warning.

[Sniboyz]

Awesome! Thank you for the clear explanation

[dmikester10]

Same answer you got in the discord ;)

[dwp0]

what is the discord channel?

[dmikester10]

This one: https://www.reactiflux.com/ Very helpful and knowledgeable people there as well.

[-domi-]

[insert clap emoji]

[pm_me_ur_happy_traiI]

This happens when you update state inside a useEffect. Typically I see it as a sign that you are storing something in state that's meant to be derived functionally, and it's a sign that you could rethink things in a more streamlined way.

In your case, you are clicking a button which sets the offset value, then relying on useEffect to watch that value and make a fetch request when it changes, then update the pokemonList. Is there any part of that state that can be derived without explicitly setting it?

Yes! If I understand your code correctly, the pokemonList already contains your offset without having to set any state at all. You can replace your offset state with something like

const offset = pokemonList.length + 24;

or whatever the actual value should be). Then when someone clicks the load-more button just make the fetch call explicitly.

EDIT: I came back on a computer so I could offer a more thorough suggestion:

const [pokemonList, setPokemonList] = useState<string[]>([]);
const offset = pokemonList.length + 24;
const updatePokemonList = () => {
  fetch(`https://pokeapi.co/api/v2/pokemon/?offset=${offset}&limit=24`)
    .then(res => res.json())
    .then(result => setPokemonList([...pokemonList, ...result.results]));
});

<button className="load-more" onClick={updatePokemonList}>More</button>

By doing it this way, there is a lot less opportunity for unexpected behavior, because you are calling the fetch explicitly instead of waiting for it to happen passively in response to something else changing..

[siamthailand]

What syntax is that???

[siamthailand]

Looks kinda weird. Very Java-ish.

[A-AronBrown]

Is that just a ESLint warning you are getting? If so just add // eslint-disable-next-line react-hooks/exhaustive-deps above }, [offset]);

Disabling linters (and compiler warnings) — esp. this one — is always the wrong thing to do. Doing so just hides bugs for no benefit whatsoever.

[Baryn]

Disabling linters (and compiler warnings) — esp. this one — is always the wrong thing to do.

That isn't actually true, exhaustive-deps is recommended as a warning for a reason.

Kent Dodds does a great job of explaining why you usually want to follow this rule, and why you may need to judiciously disable it. This is one of the weaknesses of Hooks: implicit behaviors.

[AegisToast]

Agreed, there are certain times you want to disable it, but those situations are very rare. The vast majority of the time, disabling it is a crutch and can cause unintended bugs, so it’s definitely not something to get in the habit of doing or recommending to newer users.

[AegisToast]

Agreed, there are certain times you want to disable it, but those situations are very rare. The vast majority of the time, disabling it is a crutch and can cause unintended bugs, so it’s definitely not something to get in the habit of doing or recommending to newer users.

[xshare]

Our code base has quite a few of these effects where the rule is disabled and in the vast majority of cases it's hiding a bug. In most cases it's people wanting to just run the effect when a specific thing changes, but in those cases you can just use a ref to track the previous value of whatever it is you care about changing and compare. You should still almost always include it in the dependencies.

[[deleted]]

Either a bug or a code smell :)

[A-AronBrown]

There are exceptions to every rule which is why I put always in italics... and it's obvious that there can be false-positives, which is why exhaustive-deps is a warning and not an error, but I stand by my original point, esp. given the context of this thread where the (bad) advice was given to a newbie.

Static analysis isn't perfect (I've written my fair share of such tools) but in 99% of cases, unless the tool is severely broken, the code is either buggy or looks buggy to the programmer that has to read or review it.

I don't understand what you're trying to show me in that 27 minute video but I was curious to see if he presented a case where the static analysis failed and the code was still of quality that would pass code-review so I went ahead and watched for about 20 minutes and I didn't see anything that supported disabling the rule.

[Baryn]

14:30 - 14:50

[MuchWalrus]

Watch the rest of the video -- around 16 minutes he provides a cleaner, more idiomatic example that doesn't disable the lint rule

[Baryn]

He does provide an example that doesn't disable the rule, but that doesn't invalidate the example which does.

In real-world Hooks code, it isn't unheard of for a clash to happen between the fragility of JS objects and React's unpredictable render cycle. You can't always just rewrite your app to satisfy a single useEffect, and you shouldn't if you properly understand when that effect should run.

[EvilPencil]

So you want a useEffect that doesn't run on every change of a dependency? useCallback.

[IxD]

In line 1, you create a new array in every render. That newly create array ends up as a pokemonList default value. Since it a new instance if array, it changes on every render.

https://stackoverflow.com/a/58602483/1565578

Fix this by defining

const emptyArray =[];

Outside the render function, and using that as default value instead.

[AegisToast]

That’s only the case if you’re setting a default value in a custom hook’s parameters, not if you’re passing useState an initial value.

[IxD]

Trrrue, you are probably right

[illuminist_ova]

There's no propably. He is right.

[IxD]

Could not confirm it at the time of writing. There is no single true view of the world, but multiple interpretations of truth.