ReactJS Program to useMemo For Filtered List with Explanation
ReactJS
Hard
Performance & Patterns
32 views
1 min read
86 words
This problem helps you practice core ReactJS fundamentals in a practical way. It builds intuition around usememo, filtered, list. Let’s break it down step by step so you can implement it confidently.
Problem Statement
Use useMemo to avoid filtering a list on every render unnecessarily.
Input Format
No input.
Output Format
Render a React component.
Constraints
Memoize filtered results based on inputs.
Code Solution
This explanation is written for learning purposes and to help beginners understand the concept clearly.
import React, { useMemo, useState } from 'react';
const data = Array.from({ length: 120 }, (_, i) => ({ id: i + 1, title: 'Question ' + (i + 1) }));
export default function App() {
const [q, setQ] = useState('');
const [count, setCount] = useState(0);
const filtered = useMemo(() => {
const query = q.trim().toLowerCase();
if (!query) return data;
return data.filter((x) => x.title.toLowerCase().includes(query));
}, [q]);
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>meetcode list</h2>
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder='Filter' style={{ width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
<button type='button' onClick={() => setCount((n) => n + 1)} style={{ marginTop: 10, padding: '8px 12px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Re-render ({count})</button>
<div style={{ marginTop: 10, color: '#555' }}>Showing {filtered.length} items</div>
<ul style={{ marginTop: 10, paddingLeft: 18, maxHeight: 220, overflow: 'auto', border: '1px solid #eee', borderRadius: 14, padding: 12 }}>
{filtered.slice(0, 30).map((x) => <li key={x.id}>{x.title}</li>)}
</ul>
</div>
);
}
Output Example
No sample I/O is provided for this question.
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Solution Guide
Problem
Use useMemo to avoid filtering a list on every render unnecessarily.
Input / Output
Output
Render a React component.
Constraints
Memoize filtered results based on inputs.
Details
Common Mistakes
- Misreading input/output format.
- Not handling constraints and edge cases.
- Off-by-one errors in loops.
- Forgetting to reset variables between test cases (if any).
Official Solution
import React, { useMemo, useState } from 'react';
const data = Array.from({ length: 120 }, (_, i) => ({ id: i + 1, title: 'Question ' + (i + 1) }));
export default function App() {
const [q, setQ] = useState('');
const [count, setCount] = useState(0);
const filtered = useMemo(() => {
const query = q.trim().toLowerCase();
if (!query) return data;
return data.filter((x) => x.title.toLowerCase().includes(query));
}, [q]);
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>meetcode list</h2>
<input value={q} onChange={(e) => setQ(e.target.value)} placeholder='Filter' style={{ width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
<button type='button' onClick={() => setCount((n) => n + 1)} style={{ marginTop: 10, padding: '8px 12px', borderRadius: 12, border: 0, background: '#0b5', color: '#fff' }}>Re-render ({count})</button>
<div style={{ marginTop: 10, color: '#555' }}>Showing {filtered.length} items</div>
<ul style={{ marginTop: 10, paddingLeft: 18, maxHeight: 220, overflow: 'auto', border: '1px solid #eee', borderRadius: 14, padding: 12 }}>
{filtered.slice(0, 30).map((x) => <li key={x.id}>{x.title}</li>)}
</ul>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
