Fix the Memoization Bug
HardChallenge 18 of 20
Fix the Memoization Bug
HardThis React component uses useMemo incorrectly, causing unnecessary recalculations. Fix the implementation to properly memoize the expensive calculation.
Challenge 18 of 20
80 XP
Community Solutions
ReactHooksuseMemoPerformanceJavaScript
Exit ChallengeTest Cases
0/1 passingTest Case #1
Input: Change the input value
Expected: Should only recalculate primes when the number changes
Run tests to see results
solution.js
1
<span class="token keyword">import</span> React, { useState, useMemo } from <span <span class="token keyword">class</span>="token number">039</span>;react<span <span class="token keyword">class</span>="token number">039</span>;;
<span class="token keyword">function</span> PrimeCalculator() {
<span class="token keyword">const</span> [number, setNumber] = useState(<span <span class="token keyword">class</span>="token number">1</span>);
<span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// Expensive calculation to find prime numbers</span>
<span class="token keyword">const</span> primes = useMemo(() => {
console.log(<span <span class="token keyword">class</span>="token number">039</span>;Calculating primes...<span <span class="token keyword">class</span>="token number">039</span>;);
<span class="token keyword">const</span> result = [];
<span class="token keyword">for</span> (<span class="token keyword">let</span> i = <span <span class="token keyword">class</span>="token number">2</span>; i <= number; i++) {
<span class="token keyword">let</span> isPrime = <span class="token boolean">true</span>;
<span class="token keyword">for</span> (<span class="token keyword">let</span> j = <span <span class="token keyword">class</span>="token number">2</span>; j < i; j++) {
<span class="token keyword">if</span> (i % j === <span <span class="token keyword">class</span>="token number">0</span>) {
isPrime = <span class="token boolean">false</span>;
<span class="token keyword">break</span>;
}
}
<span class="token keyword">if</span> (isPrime) {
result.push(i);
}
}
<span class="token keyword">return</span> result;
}); <span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// Missing dependency array</span>
<span class="token keyword">return</span> (
<div>
<input
type="number"
value={number}
onChange={(e) => setNumber(parseInt(e.target.value) || <span <span class="token keyword">class</span>="token number">1</span>)}
min="<span <span class="token keyword">class</span>="token number">1</span>"
/>
<p>Prime numbers up to {number}:</p>
<ul>
{primes.map(prime => (
<li key={prime}>{prime}</li>
))}
</ul>
</div>
);
}
<span class="token keyword">export</span> default PrimeCalculator;Console
Run your code to see output here