React

907 readers

1 users here now

A community for discussing anything related to the React UI framework and it's ecosystem.

https://react.dev/

Wormhole

[email protected]

Icon base by Skoll under CC BY 3.0 with modifications to add a gradient

founded 1 year ago

MODERATORS

[email protected]

How do you find the source of an infinite re-render? (self.react)

submitted 7 months ago by CombatWombatEsq to c/[email protected]

3 comments fedilink hide all child comments

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.

top 3 comments

sorted by: hot top controversial new old

[–] [email protected] 7 points 7 months ago (1 children)

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

[–] reflectedodds 1 points 7 months ago (1 children)

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.

[–] [email protected] 2 points 7 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