Optimize Performance with Memoization

Requirements

• Implement the exported calculateSumOfSquares(value) function with a loop: return 1² + 2² + ... + value². A value of 0 returns 0. The demo supplies integer values from 0 through 100000; validation of other inputs is outside this exercise.
• Implement ExpensiveComponent with the supplied value, instanceId, and metrics props. Preserve its named export, default export, markup selectors, and current displayed input and result.
• Measure each actual calculation through metrics.measure(instanceId, () => calculateSumOfSquares(value)). The wrapper returns the calculation result and records its count and elapsed time; do not call it when reusing a cached result.
• Use useMemo with the reactive dependencies used by the calculation, or export a React.memo component. The demo keeps instanceId and the metrics object stable while the numeric value is unchanged.
• Calculate once per instance on initial mount. In the supplied synchronous, non-Strict-Mode demo, recompute once when its committed value changes; unrelated parent updates and draft edits must not cause more calculations.
• Keep cached results local to each component instance. Changing one instance must not recompute the other. A transition back to a previously used input is still a prop change and should compute its result again in this exercise.
• Keep the supplied App.jsx, metrics.js, and styles.css unchanged. The unoptimized comparison intentionally recalculates on every parent render; its counts demonstrate the work your optimization skips.
• Keep calculation logic pure apart from the supplied observation wrapper. Do not update React state inside render or the calculation, use timers to defer results, introduce a global cache, or hide calculations by changing the metrics implementation.
• The metrics panel shows computation counts, last computation time, and cumulative computation time in milliseconds. Timing values are informational and machine-dependent; tests verify counts and result correctness, not a speed threshold.
• React may run calculations more than once in development Strict Mode and can discard memoized values in other lifecycle situations. This exercise measures ordinary committed updates without Strict Mode, suspension, remounts, or the React Compiler.

Examples

Input: value = 0
Output: Result: 0

Input: value = 3
Output: Result: 14 (1 + 4 + 9)

Input: value = 5
Output: Result: 55 (1 + 4 + 9 + 16 + 25)

Input: Mount, then click Update unrelated state five times
Output: Primary computations: 1. Secondary computations: 1. Unoptimized comparison computations: 6.

Input: Apply a different primary input
Output: The primary result changes and its computation count increases by one. The secondary calculation stays cached.