💼 Zepto Frontend Engineer Interview Experience — 40LPA

Overview

The candidate, having accrued significant experience at CARS24, sought new opportunities and was drawn to Zepto's scale and frontend challenges. The Zepto interview process was described as sharp and focused, emphasizing hands-on problem-solving and a deep understanding of ReactJS and JavaScript.

Interview Rounds

The interview process consisted of two primary rounds:

Round 1: Problem Solving + JavaScript + React Fundamentals

This round assessed the candidate's theoretical knowledge, logical reasoning, and ability to apply concepts to real-world scenarios. Questions included:

1. Performance-Based Web Questions:

   • How SSR helps in performance.
   • Bundle splitting and lazy loading.
   • Methods to reduce TTI (Time to Interactive).

2. Breadcrumb Chain Problem (Tree Traversal):

   Given a breadcrumb array, generate the complete hierarchy starting from the root.

   const breadCrum = [
     { id: 3, parentId: 12, title: "Headphones" },
     { id: 19, parentId: 28, title: "True wireless" },
     { id: 28, parentId: 3, title: "Wired" },
     { id: 12, parentId: null, title: "Audio" },
     { id: null, parentId: 19, title: "Bluetooth" }
   ];
   

   Expected Output:

   Audio >> Headphones >> Wired >> True wireless >> Bluetooth
   

   The suggested approach involved a recursive or iterative path-building mechanism with a Map of id → node.

3. Output of setTimeout and setInterval:

   Questions focused on:

   • How JavaScript timers work.
   • Event loop and call stack behavior.
   • Order of execution in asynchronous code.

4. useMemo() vs useCallback():

   // useMemo - Caches a computed value
   const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
   // useCallback - Caches a function reference
   const memoizedCallback = useCallback(() => handleSubmit(data), [data]);
   

   useCallback is used for function identity, particularly when passing functions to child components. useMemo is for caching results of expensive computations.

5. Programmatically Add Event Listener:

   useEffect(() => {
     const handleResize = () => console.log("Resized");
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, []);
   

6. What is useRef()?

   useRef is used for:

   • Accessing DOM elements directly.
   • Storing mutable variables that don't trigger re-render.

   const inputRef = useRef(null);
   <input ref={inputRef} />
   

Round 2: Machine Coding Round + Advanced JS + ReactJS Internals

This round was a more intense, hands-on evaluation.

1. ProgressBar Queue Problem:

   Task: On clicking a button, add a progress bar. Each bar increases by 10% every second. A maximum of 3 progress bars can run simultaneously; the remaining ones should wait in a queue.

   The suggestion involved using setInterval, an async queue, and React's useState / useEffect hooks. Bonus points were awarded for using a task manager or concurrency limiter pattern.

2. React App Optimization (SSR & CSR):

   • Code splitting
   • Image optimization
   • Preloading & Prefetching
   • Memoization
   • Lazy loading and hydration for SSR

3. What are Portals in React?

   ReactDOM.createPortal(child, container) is used to render elements outside the DOM hierarchy, such as modals or tooltips.

4. Repaint vs Reflow (Rework):

   • Repaint: A style is changed, but the layout remains the same (e.g., color).
   • Reflow: DOM layout changes (e.g., width, padding, position).

   Minimizing reflows is critical for optimal rendering performance.

5. Parallel API Calls with Promise.allSettled():

   Promise.allSettled([api1(), api2(), api3()]).then(results => {
     // Handle all - even rejected
   });
   

   This is beneficial for dashboards or systems where some APIs can fail silently.

6. Sorting Algorithm of Array.sort():

   JavaScript uses Timsort (merge + insertion sort).

   [1, null, 5, 2, undefined].sort()
   // Converts to strings: [1, 2, 5, null, undefined]
   

7. Cancel API Calls on Rapid Clicks:

   Use AbortController or debounce logic to cancel in-flight requests.

   const controller = new AbortController();
   fetch(url, { signal: controller.signal });
   controller.abort(); // Cancels request
   

8. Infinite Scroll in ReactJS:

   Listen to the scroll event or use IntersectionObserver to load the next batch once the bottom is visible.

9. HOC in ReactJS:

   Higher Order Component: A function that takes a component and returns a new one.

   const withAuth = Component => props => {
     return isAuthenticated ? <Component {...props} /> : <Redirect />;
   };
   

The candidate was rejected at the end of round 2.

Key Takeaways

The candidate was rejected because they did not complete the ReactJS machine coding question within the allotted time. The key takeaways from this experience are:

• Prioritize completing the base requirements before focusing on optimization.
• Time-box the approach: allocate approximately 70% of the time for building and 30% for testing and optimization.
• Practice concurrency patterns and real-world problems involving queues and debouncing.