Memoize Expensive Computation
ReactJS
Medium
5 views
Problem Description
Calculate heavy derived data once per input change using useMemo.
Output Format
Render a React component.
Constraints
Avoid expensive work on every render.
Official Solution
import React, { useMemo, useState } from 'react';
function heavyScore(text) {
let score = 0;
for (let i = 0; i < 80000; i++) {
const c = text.charCodeAt(i % (text.length || 1));
score = (score + c * 17 + i) % 100000;
}
return score;
}
export default function App() {
const [text, setText] = useState('meetcode');
const score = useMemo(() => heavyScore(text), [text]);
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>Derived score</h2>
<input value={text} onChange={(e) => setText(e.target.value)} style={{ width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
<div style={{ marginTop: 10, color: '#555' }}>Score: {score}</div>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!