Primary
Rerender Anonymous
React help: hooks, effects, state and rendering performance
A support group for React developers. Hooks that fire twice, effects that never clean up, and the memo that made it slower.
17 members
5 posts
Created Aug 2026
Community rules
Show the component, not the screenshot
Nobody can spot a stale closure in a picture of one.
Bring the detail
Versions, error text, what you already tried. "It does not work" is not a question anyone can answer.
No drive-by self promotion
Share your own work when it answers the thread. A link with no context is a advert, and it gets removed.
Discussions
Showing 5 posts.
Posts in t/rerender-anonymous
please how do i fix my react timer, it stays at 1 😭
good evening everyone 🙏🏾 i'm building a pomodoro timer for my portfolio. the seconds go from 0 to 1 and then it just stays at 1 forever. no error in the console. i just came across something called "stale closure" but i don't understand it. here is my code: import { useEffect, useState } from 'react' function Timer() { const [seconds, setSeconds] = useState(0) useEffect(() => { const id = setInterval(() => {…
Accepted answer
ah this one na classic. the interval callback catch "seconds" when it was 0, and because your useEffect get [] e no go run again, so every second e dey do 0 + 1. forever 1 😂 fix am like this: useEffect(() => { const id = setInterval(() => { setSeconds((s) => s + 1) }, 1000) return () => clearInterval(id) }, []) setSeconds((s) => s + 1) means "take whatever the current value is and add 1", so e no care about the old captured value. the clearInterval part is important too. without it, StrictMode go run your effect twice in dev, you go get two intervals, timer go dey count double speed and you go think say na witchcraft
useEffect fetch running twice in my take-home test?? is my code broken
doing a take-home for a junior role (round 2, we move 💪). simple React app that fetches a list of products. in the network tab i can see the request going out TWICE every time the page loads. i panicked and added a flag so it only fetches once, and now sometimes the list doesn't show at all, which is worse lol. here's the code: import { useEffect, useState } from 'react' let hasFetched = false export default…
Accepted answer
rhys is right. in development, StrictMode mounts your component, unmounts it, and mounts it again, on purpose, to catch effects that don't clean up after themselves. so the effect runs twice in dev only. production runs it once. why your flag breaks things: hasFetched lives outside the component, at module level. it never resets. first mount sets it true, the fake unmount/remount sees true and skips, and if you navigate away and come back later the component mounts fresh with an empty list and never fetches again. empty list. that's your "sometimes nothing". the fix is not to stop the second run, it's to clean up the first one: useEffect(() => { const controller = new AbortController() fetch('/api/products', { signal: controller.signal }) .then((res) => res.json()) .then(setProducts) .catch((err) => { if (err.name !== 'AbortError') setError(err) }) return () => controller.abort() }, []) in dev you'll now see the first request cancelled and the second one complete. delete the flag. and put one line in your README: "effects run twice in dev because of StrictMode, handled with an AbortController cleanup". reviewers love seeing that you know why. in a real app you'd probably use TanStack Query or your framework's loader, but for a take-home this is exactly right.
- Fireship's React one is what I show my students first lods 🔥 then they watch my 3 hour tutorial lol
React form library for very long clinical forms (200+ fields), what holds up?
A small team I advise is building an assessment form for nursing homes. It has more than 200 fields in about 15 sections, many conditional fields ("if a fall in the last 6 months, then ask..."), and it must save drafts, because nobody completes it in one sitting. They started with controlled inputs and one big state object, and typing became noticeably slow on the tablets the staff use. I am not a frontend…
why does my useEffect fetch run twice?? deps array is empty
ok this is probably dumb but i have been staring at it for an hour. i have a component that fetches the users orders when it mounts. deps array is empty so it should only run once right?? but in the network tab i see TWO requests every time useEffect(() => { fetch('/api/orders') .then((res) => res.json()) .then((data) => setOrders(data)) }, []) i console logged inside it and yep, runs twice. react 18 with vite. is…