Memoize Derived Stats
ReactJS
Hard
5 views
Problem Description
Compute derived stats from a list and memoize the result.
Output Format
Render a React component.
Constraints
Use useMemo for derived counts.
Official Solution
import React, { useMemo, useState } from 'react';
const base = [
{ id: 1, level: 'Easy' },
{ id: 2, level: 'Easy' },
{ id: 3, level: 'Medium' },
{ id: 4, level: 'Hard' }
];
export default function App() {
const [items, setItems] = useState(base);
const stats = useMemo(() => {
const map = { Easy: 0, Medium: 0, Hard: 0 };
for (const it of items) map[it.level] += 1;
return map;
}, [items]);
function addHard() {
setItems((prev) => [...prev, { id: Date.now(), level: 'Hard' }]);
}
return (
<div style={{ padding: 16 }}>
<h2 style={{ marginTop: 0 }}>meetcode stats</h2>
<div style={{ color: '#555' }}>Easy: {stats.Easy} | Medium: {stats.Medium} | Hard: {stats.Hard}</div>
<button type='button' onClick={addHard} style={{ marginTop: 12, padding: '10px 14px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Add hard</button>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!