Dataford
Interview QuestionsInterview GuidesExperiencesCoaching
New
Pricing
Get started
Dataford
Popular roles
Software EngineerData AnalystData ScientistData EngineerBusiness AnalystAI EngineerMachine Learning EngineerProduct Manager
Browse
Browse All RolesEvery role hub, from analyst to MLBrowse All CompaniesCompany-specific interview loopsAll Interview GuidesThe full guide library
Top questions by role
Software EngineerData AnalystData ScientistData EngineerBusiness AnalystAI EngineerMachine Learning EngineerProduct Manager
Top questions by skill
SQLPythonStatisticsMachine LearningA/B TestingSystem DesignGenerative AIProduct SenseMetricsBehavioral
Browse all questions →Try a mock interview
Experiences
Practice
Mock InterviewsTimed interview simulations with feedbackCoaching1:1 coaching with people at your target companiesSuccess PathYour 6-week structured planModulesCurated lessons by topicWebinarsTalks from ex-Big Tech data leadsPlaygroundA free-form scratch editor
Learn
BlogInterview strategy and career adviceTech Job Market ReportHiring trends across data and AI rolesFor UniversitiesDataford for career centersAbout DatafordWho we are and how we build
Pricing
Build my plan

React Memory Leaks and Refactor

HardCoding00:00
Practice interviewer
In session
5 left
00:00

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).

You need to log in / sign up to chat or submit.

Problem

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.