My Zomato Frontend Interview Experience | 66 LPA | Gurgaon

Overview

The candidate's interview experience at Zomato involved a comprehensive evaluation of frontend skills and architectural understanding. The process consisted of five elimination rounds, covering HR screening, technical expertise in React and JavaScript, a take-home assignment, system design, and a culture and leadership assessment. The candidate had a competing offer from DP World, but was attracted to the startup environment at Zomato.

Interview Rounds

Round 1: Initial HR Screening (30 Minutes)

Conducted by an in-house recruiter, this round focused on:

• The candidate's current role and responsibilities, with an emphasis on impactful outcomes.
• Salary expectations and notice period, requiring transparency and research.
• Motivation for joining Zomato, highlighting product knowledge and alignment with company initiatives.
• Familiarity with the tech stack, including React.js, Next.js, and Tailwind CSS.

Round 2: React & JavaScript (1 Hour)

A senior frontend engineer led this round, diving into React internals, modern JavaScript practices, and scalable frontend architecture. Key topics included:

• Virtual DOM: Explanation of its importance and advantages in improving performance by minimizing direct DOM manipulations. The interviewer probed the candidate's understanding of reflows/repaints and batching.
• State Management Patterns: Discussion of scalable approaches for large applications, including when to use local vs. global state, libraries like Redux, Zustand, Recoil, and Context API, and the downsides of prop drilling.
• Throttle Function Implementation: The candidate was required to code a throttle function live.

// Throttle Function: ensures a function runs 
// at most once every given delay
function throttle(fn, delay) {
  // Keep track of the last time the function was called
  let lastCall = 0;

  // Return a throttled version of the original function
  return function (...args) {
    const now = new Date().getTime(); // Get the current time

    // Only run the function if enough time has 
    // passed since the last call
    if (now - lastCall >= delay) {
      lastCall = now;  // Update the last call time
      fn(...args);     // Call the original function with the arguments
    }
  };
}

• HOC Pattern: Definition of Higher-Order Components (HOCs) and discussion of use cases like authentication wrappers, analytics/event tracking, and conditional rendering. The candidate also contrasted HOCs with Render Props and Hooks.