How do you find the source of an infinite re-render?

I have a custom hook that I’m working on to make a fetch request to an api, and it is causing infinite re-renders. I’m struggling a bit to understand how the various parts of my application fit together – in particular, my store (zustand) is using a middleware (immer) for immutable state, and I’m not certain why its drafting system isn’t protecting me from changes in object identity. What tools can I use to try to track down what I’ve gotten wrong? I can’t really leave the web page open very long because I’m making 1000s of requests per minute to the api I’m working against, so the Chrome dev tools are out, and the static analysis tools I set up (typescript and eslint) haven’t identified any errors, like missing a dependency from the useEffect hook dependency array.

Image

Image alternative text

beefsquatch, 2 months ago

You’re updating state, that your effect hook depends on, within the hook. So every time the state is updated the effect is run, which updates states which runs the effect etc.

You should use something like react query to handle async data

reply

report

activity

copy /kbin url

copy original url

open original url

Loading...

reflectedodds, 2 months ago

I think the only thing that should be in the dependency array of the useEffect is jsonParams.

I’ve only ever used hooks with no dependencies to effectively “run once” so I don’t know how to make them fire conditionally, but you definitely don’t want the state variables in there.

reply

report

activity

copy /kbin url

copy original url

open original url

Loading...

beefsquatch, 2 months ago

Sometimes you do want state variables in the dep array. Not super often but it does happen.

And you shouldn’t just always use an empty array. That creates fragile components. Even for effects that you want to just run once. Always follow the eslint rule

reply

report

activity

copy /kbin url

copy original url

open original url

Loading...

Add comment