[MPDX-8708] Add goal calculator saving indicator #1423
Conversation
|
Preview branch generated at https://8708-saving-indicator.d3dytjb8adxkk5.amplifyapp.com |
| // Rerender periodically to update the saved at time | ||
| const [_tick, setTick] = useState(0); | ||
| useEffect(() => { | ||
| const interval = setInterval(() => setTick((tick) => tick + 1), 5000); |
There was a problem hiding this comment.
[Must-fix] Memory leak potential: interval not cleared on unmount in strict mode. Evidence: setInterval without ref storage. Impact: Multiple intervals in development. Fix: Store interval ref. [Category: File]
There was a problem hiding this comment.
I'm confused by this suggestion. In strict mode, won't the useEffect run twice? So it will start the interval, stop the interval on unmount, and then remount and start the interval again? Then when the component is unmounted, it will stop the interval again. I might be missing something, but also ChatGPT says this code cleans up correctly and doesn't leak the interval.
| useEffect(() => { | ||
| const interval = setInterval(() => setTick((tick) => tick + 1), 5000); | ||
| return () => clearInterval(interval); | ||
| }, []); |
There was a problem hiding this comment.
[Reuse] Interval pattern could use custom useInterval hook. Evidence: Manual setInterval/clearInterval. Impact: Reusability and cleanup. Suggestion: Create shared useInterval hook. [Category: Reuse]
| // Rerender periodically to update the saved at time | ||
| const [_tick, setTick] = useState(0); | ||
| useEffect(() => { | ||
| const interval = setInterval(() => setTick((tick) => tick + 1), 5000); |
There was a problem hiding this comment.
[Suggested tests] Test interval cleanup on unmount and re-render timing. Evidence: setInterval usage. Impact: Memory leak prevention. Test periodic formatRelativeTime updates. [Category: File]
canac
force-pushed
the
8760-api-categories
branch
2 times, most recently
from
b55a548 to
aafadcc
Compare
canac
force-pushed
the
8708-saving-indicator
branch
from
e51ebea to
c2dd0f0
Compare
Bundle sizes [mpdx-react]Compared against 0cd5682 No significant changes found |
Description
Create the saving indicator area to show the user while a mutation is in progress and subtly indicate that their changes are automatically saved.
Any new goal calculator mutations will also need to call
onMutationStartandonMutationComplete.MPDX-8708
Checklist: