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.
• React Optimization: Questions based on React.memo, useMemo, and useCallback, with emphasis on when and why to use them.
• Micro-Frontends Architecture: Discussion on breaking down a large React app into smaller, independently deployable modules.

Round 3: Take-home Assignment (2 Days)

Details of this round are not included in the provided text.

Round 4: System Design (90 Minutes)

Details of this round are not included in the provided text.

Round 5: Culture & Leadership Round (45 mins)

Details of this round are not included in the provided text.

Key Takeaways

• Zomato's frontend interviews focus on practical problem-solving and in-depth technical knowledge.
• A strong understanding of React internals, state management, and architectural patterns is crucial.
• The ability to connect patterns to real use cases and demonstrate code clarity is essential.
• The candidate's success hinged on a blend of technical expertise and the ability to articulate their thought process clearly.
• The process highlights the importance of networking and referrals in securing interview opportunities at certain companies.