ReactJS Program to Memoized Lookup Map with Explanation
ReactJS
Medium
Performance & Patterns
17 views
1 min read
89 words
This problem helps you practice core ReactJS fundamentals in a practical way. It builds intuition around lookup, map, react. Let’s break it down step by step so you can implement it confidently.
Problem Statement
Build a lookup Map once and use it for fast access during rendering.
Input Format
No input.
Output Format
Render a React component.
Constraints
Create maps/sets with useMemo when data changes.
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: 1200 }, (_, i) => ({ id: i + 1, title: 'meetcode post ' + (i + 1) }));
export default function App() {
const [id, setId] = useState('1');
const byId = useMemo(() => {
const m = new Map();
data.forEach((x) => m.set(String(x.id), x));
return m;
}, []);
const current = byId.get(id);
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>Lookup</h2>
<input value={id} onChange={(e) => setId(e.target.value.replace(/\\D/g, ''))} inputMode='numeric' style={{ width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
<div style={{ marginTop: 10, border: '1px solid #eee', borderRadius: 14, padding: 12 }}>
{current ? (
<div>
<strong>Found</strong>
<div style={{ marginTop: 6, color: '#555' }}>{current.title}</div>
</div>
) : (
<div style={{ color: '#555' }}>No item</div>
)}
</div>
</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
Build a lookup Map once and use it for fast access during rendering.
Input / Output
Output
Render a React component.
Constraints
Create maps/sets with useMemo when data changes.
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).
Difficulty
Medium
ReactJS
Official Solution
import React, { useMemo, useState } from 'react';
const data = Array.from({ length: 1200 }, (_, i) => ({ id: i + 1, title: 'meetcode post ' + (i + 1) }));
export default function App() {
const [id, setId] = useState('1');
const byId = useMemo(() => {
const m = new Map();
data.forEach((x) => m.set(String(x.id), x));
return m;
}, []);
const current = byId.get(id);
return (
<div style={{ padding: 16, width: 520 }}>
<h2 style={{ marginTop: 0 }}>Lookup</h2>
<input value={id} onChange={(e) => setId(e.target.value.replace(/\\D/g, ''))} inputMode='numeric' style={{ width: '100%', padding: '10px 12px', borderRadius: 12, border: '1px solid #bbb' }} />
<div style={{ marginTop: 10, border: '1px solid #eee', borderRadius: 14, padding: 12 }}>
{current ? (
<div>
<strong>Found</strong>
<div style={{ marginTop: 6, color: '#555' }}>{current.title}</div>
</div>
) : (
<div style={{ color: '#555' }}>No item</div>
)}
</div>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
