A data summary panel tracks how many times it has applied a set of processing options and shows a run count. The counter should settle once after the component first appears.
From the moment the component appears, the run counter climbs rapidly on its own and never settles. The page may become unresponsive within seconds.
Think about how React compares dependency values between renders and what that means for a value constructed inline.
Think about how React compares dependency values between renders and what that means for a value constructed inline.
Why this fixes it
Every time DataSummary renders, const options = { limit: 10, orderBy: "date" } allocates a brand-new object at a new memory address. React compares dependency values using Object.is - because each render produces a different reference, the dependency always appears changed and the effect re-runs. The effect calls setRunCount, which triggers another render, which creates another new options object, which triggers the effect again - an infinite cycle. Moving options to module scope gives it a single permanent reference so React sees the same object on every comparison and the effect runs only once on mount.