Your question is React Memory Leaks and Refactor. Take a moment with it on the right.
Talk me through your thinking if you like. When you're confident, submit your answer and I'll grade it like a real screen (7/10 or better passes).
Alla Talent's recruiter dashboard has a live candidate feed component that polls for new matches and lets recruiters filter by name while they work. Recruiters have started reporting that the tab slows to a crawl after they've had it open for a while, and that typing in the search box feels laggy even with a small candidate list.
function CandidateFeed({ orgId, page }) {
const [candidates, setCandidates] = useState([]);
const [query, setQuery] = useState("");
useEffect(() => {
const interval = setInterval(() => {
fetch(`/api/orgs/${orgId}/candidates?page=${page}`)
.then((res) => res.json())
.then((data) => setCandidates(data.results));
}, 5000);
}, [orgId]);
useEffect(() => {
function handleResize() {
setCandidates((prev) => [...prev]);
}
window.addEventListener("resize", handleResize);
}, []);
const visible = candidates
.filter((c) => c.name.toLowerCase().includes(query.toLowerCase()))
.sort((a, b) => b.matchScore - a.matchScore);
return (
<div>
<input value={query} onChange={(e) => setQuery(e.target.value)} />
<ul>
{visible.map((c) => (
<CandidateCard key={c.id} candidate={c} onSelect={() => selectCandidate(c.id)} />
))}
</ul>
</div>
);
}
Review this component. What are the potential memory leaks or performance issues, and how would you refactor it? Explain each problem and the fix you would make rather than rewriting the whole file.