Refactor Code for Efficiency | Dataford Interview Questions

Your question is Refactor Code for Efficiency. 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).

Problem

ZoomInfo's contact search results screen renders a filterable, sortable list of contacts. Product has been reporting that the list stutters on large searches and that selection occasionally lands on the wrong row after sorting.

function ContactList({ contacts, companies, query }: ContactListProps) {
  contacts.sort((a, b) => a.name.localeCompare(b.name));

  const filtered = contacts
    .filter((c) => c.name.toLowerCase().includes(query.toLowerCase()))
    .map((c) => {
      const company = companies.find((co) => co.id === c.companyId);
      return { ...c, companyName: company ? company.name : "Unknown" };
    });

  return (
    <ul>
      {filtered.map((contact, index) => (
        <li key={index}>
          <span>{contact.name}</span>
          <span>{contact.companyName}</span>
          <button onClick={() => selectContact(contact.id)}>Select</button>
        </li>
      ))}
    </ul>
  );
}

How would you refactor this to improve its efficiency and readability? Explain what you'd change and why, in free text.

Your question is Refactor Code for Efficiency. 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).

function ContactList({ contacts, companies, query }: ContactListProps) {
  contacts.sort((a, b) => a.name.localeCompare(b.name));

  const filtered = contacts
    .filter((c) => c.name.toLowerCase().includes(query.toLowerCase()))
    .map((c) => {
      const company = companies.find((co) => co.id === c.companyId);
      return { ...c, companyName: company ? company.name : "Unknown" };
    });

  return (
    <ul>
      {filtered.map((contact, index) => (
        <li key={index}>
          <span>{contact.name}</span>
          <span>{contact.companyName}</span>
          <button onClick={() => selectContact(contact.id)}>Select</button>
        </li>
      ))}
    </ul>
  );
}

How would you refactor this to improve its efficiency and readability? Explain what you'd change and why, in free text.