yeahhh thats Reacts Strict Mode doing it on purpose in development, it mounts, unmounts and remounts compnoents to surface effects that dont clean up after themselves... it doesnt happen in production builds.
So nothing is broken, and a ref to skip teh second call mostly hides teh signal Strict Mode is trying to give you. good luck man!
not gonna lie this is driving me nuts well. Im working on a React app and noticed that a useEffect that fetches data runs twice when the component mounts... the network tab shows two identical requests. in the production build it only happens once.
useEffect(() => {
fetch("/api/items").then(r => r.json()).then(setItems);
}, []);
Is this something i broke?? Should i add a flag to stop teh second call? pls help 🙏
oof longer term, fetching in effects tends to grow into a pile of loading flags, caching and race handling. A data-fetching library (or ur fraemworks built-in data loadnig) handles deduplication and caching for you. Not required for a small app, but if u find yourself writing this pattern a lot, its worth a look. good luck man!
yeahhh thats Reacts Strict Mode doing it on purpose in development, it mounts, unmounts and remounts compnoents to surface effects that dont clean up after themselves... it doesnt happen in production builds.
So nothing is broken, and a ref to skip teh second call mostly hides teh signal Strict Mode is trying to give you. good luck man!
@lpereira added teh AbortController cleanup. Dev still shows two requests but the first is cancelled, which makes sense now. Kept Strict Mode on.
Sign in or create an account to reply.
