Real Zomato Interview Experience

// Simulates React's internal hook system
let hooks = [];        // Array to store hook states
let hookIndex = 0;     // Current hook position
let component = null;  // Current component being rendered

function useState(initialValue) {
  const currentIndex = hookIndex;
  
  // On first render, initialize state
  // On re-renders, retrieve existing state
  if (hooks[currentIndex] === undefined) {
    hooks[currentIndex] = 
      typeof initialValue === 'function' 
        ? initialValue()  // Lazy initialization
        : initialValue;
  }
  
  const setState = (newValue) => {
    // Support functional updates: setState(prev => prev + 1)
    const nextState = typeof newValue === 'function'
      ? newValue(hooks[currentIndex])
      : newValue;
    
    // Only re-render if state actually changed
    if (Object.is(hooks[currentIndex], nextState)) return;
    
    hooks[currentIndex] = nextState;
    
    // Trigger re-render (simplified)
    reRender();
  };
  
  hookIndex++;
  return [hooks[currentIndex], setState];
}

function reRender() {
  hookIndex = 0;  // Reset hook index for new render pass
  component();    // Re-execute the component function
}

// Example usage:
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Zomato');
  
  console.log(`Count: ${count}, Name: ${name}`);
  
  return {
    increment: () => setCount(prev => prev + 1),
    setName: (n) => setName(n)
  };
}

// Simulate React rendering
component = Counter;
const ui = Counter();  // "Count: 0, Name: Zomato"
ui.increment();        // Triggers re-render → "Count: 1, Name: Zomato"
ui.increment();        // Triggers re-render → "Count: 2, Name: Zomato"

// ❌ This breaks because hook positions shift between renders
function BadComponent({ showExtra }) {
  const [a, setA] = useState(1);    // hookIndex = 0
  
  if (showExtra) {
    const [b, setB] = useState(2);  // hookIndex = 1 (sometimes!)
  }
  
  const [c, setC] = useState(3);    // hookIndex = 1 or 2 ???
  // React can't match hooks to their state!
}

// ✅ Always call hooks at top level
function GoodComponent({ showExtra }) {
  const [a, setA] = useState(1);    // Always hookIndex = 0
  const [b, setB] = useState(2);    // Always hookIndex = 1
  const [c, setC] = useState(3);    // Always hookIndex = 2
  // Conditionally USE the values, not the hooks
}

• Array-based storage: Hooks use position (index) to identify state, not names
• Order dependency: This is why hooks can't be inside conditionals/loops
• Object.is comparison: React uses this for bailout optimization
• Lazy initialization: useState(() => expensiveComputation()) runs only on first render
• Batching: Multiple setState calls in same event handler are batched into one re-render

let effectHooks = [];    // Store effect metadata
let effectIndex = 0;     // Current effect position

function useEffect(callback, deps) {
  const currentIndex = effectIndex;
  const prevEffect = effectHooks[currentIndex];
  
  // Determine if effect should run
  let shouldRun = false;
  
  if (!prevEffect) {
    // First render — always run
    shouldRun = true;
  } else if (!deps) {
    // No dependency array — run every render
    shouldRun = true;
  } else {
    // Compare dependencies with previous render
    shouldRun = deps.some(
      (dep, i) => !Object.is(dep, prevEffect.deps[i])
    );
  }
  
  if (shouldRun) {
    // Schedule effect to run AFTER render (async)
    queueMicrotask(() => {
      // Run cleanup from previous effect first
      if (prevEffect && prevEffect.cleanup) {
        prevEffect.cleanup();
      }
      
      // Run the effect and store cleanup function
      const cleanup = callback();
      effectHooks[currentIndex] = { deps, cleanup };
    });
  }
  
  effectIndex++;
}

// Reset for re-render
function resetEffects() {
  effectIndex = 0;
}

// Unmount — run all cleanups
function unmount() {
  effectHooks.forEach(effect => {
    if (effect && effect.cleanup) {
      effect.cleanup();
    }
  });
  effectHooks = [];
}

// Example usage:
function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);
  
  // Effect with dependency — re-runs when roomId changes
  useEffect(() => {
    console.log(`Connecting to room: ${roomId}`);
    const ws = new WebSocket(`/chat/${roomId}`);
    
    ws.onmessage = (e) => {
      setMessages(prev => [...prev, JSON.parse(e.data)]);
    };
    
    // Cleanup function — runs before next effect or unmount
    return () => {
      console.log(`Disconnecting from room: ${roomId}`);
      ws.close();
    };
  }, [roomId]); // Only re-run if roomId changes
  
  // Effect without deps — runs every render
  useEffect(() => {
    document.title = `${messages.length} messages`;
  });
  
  // Effect with empty deps — runs once (mount only)
  useEffect(() => {
    console.log('Component mounted');
    return () => console.log('Component unmounted');
  }, []);
}

Mount:
  1. Component renders (DOM updated)
  2. useEffect callback runs (after paint)
  3. Cleanup function stored for later

Update (deps changed):
  1. Component re-renders (DOM updated)  
  2. Previous cleanup runs FIRST
  3. New effect callback runs
  4. New cleanup stored

Unmount:
  1. Component removed from DOM
  2. All cleanup functions run

• Runs after render: Effects are async — don't block painting
• Cleanup runs before new effect: Prevents stale subscriptions
• Empty deps []: Mount + unmount only — like componentDidMount
• No deps: Runs after every render — rarely what you want
• Object.is comparison: Same as useState bailout mechanism

// Production Example 1: API Client Factory
function createApiClient(baseURL, authToken) {
  // These are "closed over" — private to this instance
  let requestCount = 0;
  
  return {
    get(endpoint) {
      requestCount++;
      return fetch(`${baseURL}${endpoint}`, {
        headers: { Authorization: `Bearer ${authToken}` }
      });
    },
    getRequestCount() {
      return requestCount;
    }
  };
}

const zomatoApi = createApiClient('https://api.zomato.com', 'token123');
zomatoApi.get('/restaurants'); // Uses closed-over baseURL and authToken
console.log(zomatoApi.getRequestCount()); // 1


// Production Example 2: Rate Limiter
function createRateLimiter(maxCalls, timeWindow) {
  const calls = []; // Closed over
  
  return function(fn) {
    const now = Date.now();
    // Remove expired timestamps
    while (calls.length && calls[0] <= now - timeWindow) {
      calls.shift();
    }
    
    if (calls.length >= maxCalls) {
      throw new Error('Rate limit exceeded');
    }
    
    calls.push(now);
    return fn();
  };
}

const limiter = createRateLimiter(5, 60000); // 5 calls per minute


// Production Example 3: Memoization
function memoize(fn) {
  const cache = new Map(); // Closed over — persists between calls
  
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveCalculation = memoize((n) => {
  console.log('Computing...');
  return n * n;
});

expensiveCalculation(5); // "Computing..." → 25
expensiveCalculation(5); // Cache hit → 25 (no log)

// ❌ Problem: var is function-scoped, not block-scoped
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3 (all reference same `i`)

// ✅ Fix 1: Use let (block-scoped)
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2

// ✅ Fix 2: Create closure with IIFE
for (var i = 0; i < 3; i++) {
  ((j) => {
    setTimeout(() => console.log(j), 100);
  })(i);
}
// Output: 0, 1, 2

// Where it ACTUALLY matters in production:

// 1. Loop closures (most common bug)
for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = () => alert(i); // Always shows last value!
}
// Fix: use let → each iteration gets its own binding

// 2. Temporal Dead Zone (TDZ)
console.log(x); // undefined (var is hoisted)
var x = 5;

console.log(y); // ReferenceError! (let is in TDZ)
let y = 5;

// 3. Switch statements (block scoping matters!)
switch(action) {
  case 'A':
    var result = 1;  // Leaks to entire function!
    break;
  case 'B':
    var result = 2;  // Re-declares (no error with var)
    break;
}
// Fix: use let with explicit blocks
switch(action) {
  case 'A': {
    let result = 1;  // Scoped to this case
    break;
  }
}

1. Only call hooks at the top level — no loops, conditions, or nested functions
2. Only call hooks from React functions — components or other custom hooks
3. Custom hooks must start with "use" — naming convention for lint tooling

// React identifies hooks by CALL ORDER (index in array)
// If order changes between renders, React assigns wrong state!

// Custom Hook Example: useDebounce
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    
    return () => clearTimeout(timer);
  }, [value, delay]);
  
  return debouncedValue;
}

// Custom Hook: useFetch
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    let cancelled = false;
    
    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url);
        if (!response.ok) throw new Error(response.statusText);
        const json = await response.json();
        
        if (!cancelled) {
          setData(json);
          setError(null);
        }
      } catch (err) {
        if (!cancelled) setError(err.message);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }
    
    fetchData();
    return () => { cancelled = true; }; // Prevent state update after unmount
  }, [url]);
  
  return { data, loading, error };
}

// Usage in component
function RestaurantList() {
  const [search, setSearch] = useState('');
  const debouncedSearch = useDebounce(search, 300);
  const { data, loading, error } = useFetch(
    `/api/restaurants?q=${debouncedSearch}`
  );
  
  // Composable, testable, reusable!
}

• Logic extraction: Share stateful logic without changing component hierarchy
• Composition: Hooks can call other hooks — build complex from simple
• Testable: Test hook logic independently from UI
• No HOC/Render Props wrapper hell: Cleaner component tree

"At Zomato's scale (millions of users on 3G/4G), I'd choose Tailwind.

1. ZERO runtime overhead — CSS-in-JS parses styles in the browser, 
   adding 10-20ms per component mount. With 100+ components on a 
   restaurant page, that's 1-2 seconds of wasted JS execution.

2. Production CSS is ~10KB (purged) vs 50-100KB for CSS-in-JS runtime.
   On Jio networks at 1Mbps, that's 400ms+ saved.

3. Server-side rendering is trivial — no style extraction step, no 
   hydration mismatch risk.

4. Design consistency — utility classes enforce spacing/color system. 
   No 'margin: 13px' one-offs.

For dynamic styles, I'd use CSS variables with Tailwind:
  style={{ '--progress': `${percent}%` }}
  className='w-[var(--progress)]'
"

┌─────────────────────────────────────────────────┐
│                  CLIENT (React)                   │
├─────────────────────────────────────────────────┤
│  Location Layer                                   │
│  ├── Geolocation API (GPS)                       │
│  ├── IP-based fallback                           │
│  └── Manual city selection                       │
├─────────────────────────────────────────────────┤
│  Data Layer                                       │
│  ├── React Query (caching + prefetching)         │
│  ├── Geohash-based API calls                     │
│  └── Optimistic updates for favorites            │
├─────────────────────────────────────────────────┤
│  Rendering Layer                                  │
│  ├── Virtualized grid (react-window)             │
│  ├── Intersection Observer (lazy images)         │
│  └── Skeleton loading states                     │
├─────────────────────────────────────────────────┤
│  Real-time Layer                                  │
│  ├── WebSocket: delivery ETAs                    │
│  ├── SSE: restaurant open/close status           │
│  └── Polling: menu availability (30s)            │
└─────────────────────────────────────────────────┘
         │
         │ HTTPS / WSS
         ▼
┌─────────────────────────────────────────────────┐
│              API GATEWAY (BFF)                    │
├─────────────────────────────────────────────────┤
│  /restaurants?lat=X&lng=Y&radius=5km             │
│  /restaurants/:id/menu                           │
│  /restaurants/:id/availability (SSE)             │
│  /track/:orderId (WebSocket)                     │
└─────────────────────────────────────────────────┘
         │
         ▼
┌─────────────────────────────────────────────────┐
│              BACKEND SERVICES                     │
├─────────────────────────────────────────────────┤
│  Spatial DB (PostGIS)  │  Redis (caching)       │
│  Geohash indexing      │  CDN (images)          │
│  Search (Elasticsearch)│  Event bus (Kafka)     │
└─────────────────────────────────────────────────┘

// Location detection with fallback chain
async function getUserLocation() {
  // Strategy 1: Browser Geolocation API
  try {
    const pos = await new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject, {
        enableHighAccuracy: true,
        timeout: 5000
      });
    });
    return { lat: pos.coords.latitude, lng: pos.coords.longitude };
  } catch (e) {
    // Strategy 2: IP-based geolocation (fallback)
    const response = await fetch('/api/location/ip');
    return response.json();
  }
}

// Geohash-based API for efficient spatial queries
// Geohash converts lat/lng → string prefix for range queries
function getGeohash(lat, lng, precision = 6) {
  // precision 6 ≈ 1.2km × 0.6km cell
  // Nearby restaurants share geohash prefix
  return encodeGeohash(lat, lng, precision);
}

// React Query for caching + prefetching
function useNearbyRestaurants(location) {
  return useQuery({
    queryKey: ['restaurants', location.lat, location.lng],
    queryFn: () => fetchRestaurants(location),
    staleTime: 5 * 60 * 1000,     // Cache valid for 5 min
    refetchOnWindowFocus: true,     // Refresh when user returns
    placeholderData: (prev) => prev // Show stale while fetching
  });
}

// Optimistic filter updates
function useFilteredRestaurants(filters) {
  const queryClient = useQueryClient();
  
  // Apply filters client-side from cached data (instant)
  // while fetching server-filtered results in background
  return useQuery({
    queryKey: ['restaurants', filters],
    queryFn: () => fetchWithFilters(filters),
    placeholderData: () => {
      const allRestaurants = queryClient.getQueryData(['restaurants']);
      return applyFiltersLocally(allRestaurants, filters);
    }
  });
}

-- Restaurants table with spatial indexing
restaurants:
  id: UUID (PK)
  name: VARCHAR
  location: POINT (lat, lng)  -- PostGIS spatial type
  geohash: VARCHAR(8)         -- For prefix-based range queries
  cuisine_type: VARCHAR[]
  avg_rating: DECIMAL
  is_open: BOOLEAN
  delivery_radius_km: INT
  avg_delivery_time_min: INT

-- Spatial index for "nearby" queries
CREATE INDEX idx_restaurant_location ON restaurants 
  USING GIST (location);

-- Geohash index for partition-based lookups  
CREATE INDEX idx_restaurant_geohash ON restaurants (geohash);

-- Query: Find restaurants within 5km
SELECT * FROM restaurants 
WHERE ST_DWithin(location, ST_MakePoint(77.5946, 12.9716), 5000)
  AND is_open = true
ORDER BY avg_rating DESC
LIMIT 20;

// S — Single Responsibility Principle
// Each component/function does ONE thing

// ❌ Bad: Component fetches, filters, AND renders
function RestaurantPage() {
  const [data, setData] = useState([]);
  const [filters, setFilters] = useState({});
  
  useEffect(() => { /* fetch logic */ }, []);
  const filtered = data.filter(/* filter logic */);
  
  return (/* complex render logic */);
}

// ✅ Good: Separated concerns
function RestaurantPage() {
  const { data } = useRestaurants();           // Data fetching hook
  const filtered = useFilteredData(data);       // Filter logic hook
  return <RestaurantGrid items={filtered} />;  // Render only
}


// O — Open/Closed Principle
// Open for extension, closed for modification

// ✅ Plugin-based filter system
const filterStrategies = {
  price: (items, value) => items.filter(i => i.price <= value),
  rating: (items, value) => items.filter(i => i.rating >= value),
  cuisine: (items, value) => items.filter(i => i.cuisine === value),
  // Add new filters without modifying existing code!
  distance: (items, value) => items.filter(i => i.distance <= value),
};

function applyFilters(items, activeFilters) {
  return Object.entries(activeFilters).reduce(
    (result, [key, value]) => filterStrategies[key](result, value),
    items
  );
}


// L — Liskov Substitution Principle
// Subtypes must be usable wherever parent type is expected

// ✅ All button variants work with same props interface
function PrimaryButton({ onClick, children, ...props }) {
  return <button className="btn-primary" onClick={onClick} {...props}>{children}</button>;
}
function GhostButton({ onClick, children, ...props }) {
  return <button className="btn-ghost" onClick={onClick} {...props}>{children}</button>;
}
// Both can replace <Button /> without breaking parent component


// I — Interface Segregation Principle
// Don't force components to depend on props they don't use

// ❌ Bad: Card gets entire restaurant object (100+ fields)
<RestaurantCard restaurant={fullRestaurantObject} />

// ✅ Good: Card receives only what it renders
<RestaurantCard 
  name={restaurant.name}
  rating={restaurant.rating}
  imageUrl={restaurant.imageUrl}
  deliveryTime={restaurant.deliveryTime}
/>


// D — Dependency Inversion Principle
// Depend on abstractions, not concrete implementations

// ✅ Analytics service abstracted behind interface
const analyticsService = {
  track: (event, data) => { /* implementation */ }
};

// Component depends on abstraction, not specific analytics SDK
function OrderButton({ analytics = analyticsService }) {
  const handleClick = () => {
    analytics.track('order_placed', { restaurantId });
  };
}

1. Restaurant seat/table booking (Zomato Dining):
   → Serializable: Two users booking the last table must 
     not both succeed. Need strictest isolation.

2. Order placement:
   → Repeatable Read: During checkout, prices and availability 
     should not change mid-transaction.

3. Restaurant listing page:
   → Read Committed: OK if another user's review appears 
     after page load. Eventual consistency acceptable.

4. Analytics dashboard (restaurant partner):
   → Read Uncommitted: Approximate order counts are fine. 
     Performance > precision for dashboards.

• Optimistic UI: Show success immediately, reconcile if transaction fails
• Stale data handling: Show "price changed" toasts when cart data is stale
• Conflict resolution: "Someone else took the last slot" messaging

// Component Architecture
// ─────────────────────
// RestaurantListingPage (route-level, code-split)
//   ├── FilterBar (sticky, client-state)
//   │   ├── CuisineFilter
//   │   ├── PriceFilter
//   │   ├── RatingFilter
//   │   └── SortDropdown
//   ├── RestaurantGrid (virtualized)
//   │   └── RestaurantCard (memoized)
//   │       ├── LazyImage (intersection observer)
//   │       ├── RatingBadge
//   │       ├── DeliveryInfo
//   │       └── OfferTag
//   ├── InfiniteScrollTrigger (intersection observer)
//   └── SkeletonLoader (SSR placeholder)

// Performance Strategy:
const RestaurantListingPage = lazy(() => 
  import('./RestaurantListingPage')
);

// Data fetching strategy
function useRestaurantListing(location, filters) {
  return useInfiniteQuery({
    queryKey: ['restaurants', location, filters],
    queryFn: ({ pageParam = 0 }) => 
      fetchRestaurants({ ...filters, offset: pageParam, limit: 20 }),
    getNextPageParam: (lastPage) => lastPage.nextOffset,
    staleTime: 2 * 60 * 1000,
    // Prefetch next page for instant scroll
    onSuccess: (data) => {
      const lastPage = data.pages[data.pages.length - 1];
      if (lastPage.nextOffset) {
        queryClient.prefetchInfiniteQuery(/* next page */);
      }
    }
  });
}

// Image loading strategy
// 1. LQIP (Low Quality Image Placeholder) — 20 byte base64
// 2. Intersection Observer triggers full image load
// 3. Progressive JPEG for perceived speed
// 4. WebP with JPEG fallback (picture element)

// Critical rendering path:
// 1. SSR: Server renders first 6 restaurant cards (above fold)
// 2. Skeleton: Below-fold shows animated placeholders
// 3. Hydration: React takes over, enables interactivity
// 4. Lazy load: Images and below-fold content load on scroll

// Bundle size budget in CI
// webpack.config.js
module.exports = {
  performance: {
    maxAssetSize: 250000,      // 250KB per chunk
    maxEntrypointSize: 500000, // 500KB entry
    hints: 'error'             // Fail build if exceeded
  }
};

// Lighthouse CI in GitHub Actions
// Fail PR if performance score drops below 90

• Be honest about current CTC — they will verify via offer letter
• For expected CTC, research the market range for SDE 2 at Zomato (35-50 LPA depending on experience)
• If your current CTC is lower, emphasize the skills and impact you bring
• Notice period: be upfront. Zomato typically expects 30-60 days, can accommodate up to 90 days for strong candidates
• If you have competing offers, mention them professionally — it strengthens negotiation

• Relocation to Gurgaon: If relocating, express willingness and ask about relocation support
• Hybrid/Remote policy: Zomato typically has a hybrid model — clarify expectations
• Joining timeline: Be realistic about notice period + relocation time
• Ask about: Team you'd join, tech stack, on-call expectations, laptop/equipment