infinite render with server fetch hook I wrote
One picture is the hook I wrote, and the other picture is how I'm using it; I'm getting a really nasty infinite render, and I'm sure it has to do with dependencies causing useEffect to keep firing, but I can't quite figure out why.
13 Replies
need an expert to answer this ^
update: no matter what i pass as options, its triggering the infinite renders
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Me is a next page, Suspend is jsut just a loading wrapper i wrote
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
ohhh i was trying to memoize the options inside my hook
this wouldnt work cuz its getting passed in newly each time ?
also is there a more elegant way of doing this do you think, instead of passing an options object to the hook ?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
there's a version of this https://usehooks-ts.com/react-hook/use-fetch . there,
options isn't included in the dep array for the useEffectusehooks-ts
useFetch() react hook - usehooks-ts
Here is a React Hook which aims to retrieve data on an API using the native Fetch API. I used a reducer to separate state logic and simplify testing via…
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Alternatively, you can add on to your
useHttps hook to cache requests that have already come in, given a combination of some values like request URL + previously encountered options. This lets you more ergonomically call useHttps without having to always memoize stuff at the call site, but it will make the hook implementation more complexhmm
ok thank you all
this is gonna be a hell of a deep dive but it would be instructive to look at the source code for libraries like react query and apollo and see how they do this
I've honestly been meaning to do the same thing myself
need to do that soon, if only to satisfy my own curiosity
What happens if you take fetchData out of the dep array for the use effect and just have url and option in there.