PayU SDE-2 Frontend Interview Experience

Overview

The following outlines the interview experience for a Software Engineer II (Frontend) position at PayU. The process involved multiple technical rounds designed to assess the candidate's knowledge of JavaScript, React, frontend system design, and problem-solving abilities. The interviews emphasized a deep understanding of core concepts and their practical application in real-world scenarios.

Interview Rounds

Round 1: Core JavaScript & React Fundamentals

This round focused on foundational JavaScript and React concepts. The interviewer explored the candidate's understanding of execution contexts, memory management, and modern JavaScript features. Key topics included:

• Difference between let, const, and var: Explanation of hoisting behavior and temporal dead zone.

  console.log(a); // undefined (hoisted)
  var a = 10;
  
  console.log(b); // ReferenceError (temporal dead zone)
  let b = 20;
  
  const c = 30; // must be initialized during declaration
  

• Arrow Functions vs. Regular Functions: Differences in this binding, arguments object, and use cases.

• Deep Copy vs. Shallow Copy: Understanding the implications of each and implementation of deep copy.

  // Shallow Copy
  const obj = { a: 1, nested: { b: 2 } };
  const shallow = { ...obj };
  shallow.nested.b = 99;
  console.log(obj.nested.b); // 99 😱
  
  // Deep Copy (recursive)
  function deepCopy(item) {
    if (item === null || typeof item !== "object") return item;
    if (Array.isArray(item)) return item.map(deepCopy);
  
    const copy = {};
    for (let key in item) copy[key] = deepCopy(item[key]);
    return copy;
  }
  
  const deep = deepCopy(obj);
  deep.nested.b = 42;
  console.log(obj.nested.b); // 2 ✅
  

• Higher-Order Components (HOCs): Advantages, disadvantages, and why hooks are now preferred.

• CORS Error: Causes, browser enforcement, and frontend workarounds (e.g., proxies).

• Hooks: Deep dive into useState, useRef, useMemo, and useContext (with context API usage).

• Redux & Redux Thunk: Relevance of Redux, appropriate use cases, and Thunk middleware for asynchronous operations.

• Closures:

  function counter() {
    let count = 0;
    return function () {
      count++;
      return count;
    };
  }
  
  const increment = counter();
  console.log(increment()); // 1
  console.log(increment()); // 2
  

• Building a React Project: Discussion of build pipelines, Webpack, minification, tree-shaking, and optimizations.

• Custom Hooks:

  import { useState, useEffect } from "react";
  
  function useFetch(url) {
    const [data, setData] = useState(null);
  
    useEffect(() => {
      fetch(url).then(res => res.json()).then(setData);
    }, [url]);
  
    return data;
  }
  
  // Usage
  const users = useFetch("/api/users");
  

• Deep Copy Function (DSA): Implementation of a recursive deep copy function to handle arrays, objects, and nested structures.

Round 2: Applied Problem Solving + Projects

This round combined data structures and algorithms (DSA) problems with discussions about past projects. Key areas included:

• Discussion on Past Project: Architecture, state management, and performance optimizations.

• Pagination: API design (/items?page=2&limit=10) and frontend handling of infinite scroll vs. numbered pages.

• Deep Copy vs. Shallow Copy: Revisited for clarity.

• Props, Components, and HOCs: Differentiating responsibilities and reusability strategies.

• DSA Problem — Reverse list from both sides of an index:

  arr = [1,2,3,4,5], ind = 2
  Output = [3,2,1,5,4]
  
  function reverseBothSides(arr, ind) {
    let left = arr.slice(0, ind + 1).reverse();
    let right = arr.slice(ind + 1).reverse();
    return [...left, ...right];
  }
  
  console.log(reverseBothSides([1,2,3,4,5], 2));
  // [3,2,1,5,4]
  

Round 3: Frontend System Design

This round focused on real-world frontend system design scenarios. Key topics included:

• Transaction Sync Problem: Polling mechanisms, long-polling vs. webhooks vs. sockets for transaction confirmation.
• Optimizing a React Build: Code-splitting, lazy loading, image optimization, caching strategies, gzip/brotli compression.
• Cache Busting: Strategies for invalidating cache after production deployments (e.g., filename hashing, service workers).
• CORS & IP Whitelisting: Explanation of CORS policies and when whitelisting is required for backend APIs.
• JWT Management: Secure storage (httpOnly cookies vs. localStorage), token refresh, and cleaning tokens on logout.
• Cookies, Sessions, Local Storage: Differences and appropriate use cases (authentication, temporary data, preferences).
• Encryption of Tokens: Importance of not storing tokens in plaintext; common practices (JWT signing, HTTPS, encryption at rest).
• Authentication vs. Authorization: AuthN = Who are you?; AuthZ = What can you do?

Round 4: Hands-On Coding

This final round tested practical coding skills within a React codebase. Key tasks included:

• Implement Debouncing: Applied to a search input field.
• Infinite Scrolling (onReachEnd Pagination): Implemented lazy loading on scroll events.
• Custom Hook: Refactored repetitive logic into a reusable hook.
• Polling vs. Long Polling: Discussed real-world examples of notification systems.
• DSA — Find Duplicate Elements: Solved using hash maps for O(n) time complexity.

Key Takeaways

The PayU frontend interview process emphasizes depth of knowledge over breadth. Candidates should demonstrate practical thinking by relating concepts to real-world frontend challenges, like authentication, caching, pagination, and asynchronous communication. Hands-on coding within an existing codebase is crucial, and a strong understanding of frontend system design principles, including scalability, performance, and security, is expected.