Razorpay Frontend Machine Coding Round — Build a Tabs Component in React (Full Mock Interview)

Razorpay Frontend Interview — Round 2 (machine coding) as a full mock interview: build a reusable, accessible Tabs component in React, live, with follow-ups and honest feedback. 💻 The questions are based on candidate-reported Razorpay frontend interviews — paraphrased, not copied, and not Razorpay's official question set. The candidate designs the API first, slips three times on real bugs and recovers on a hint — and every step is shown running in a live preview next to the code. ⏱️ Chapters 0:00 The task — requirements and the 3 questions worth asking 3:23 API design first — compound components, controlled vs uncontrolled 6:09 Building the must-haves — root, tab, panel, one source of truth 14:07 Keyboard and accessibility — arrows, Home/End, roving tabindex 19:30 Nice-to-haves — remove the active tab, reducer, lazy panels 26:50 Testing, code review and theory — RTL, tree-shaking, Babel vs Webpack, CDN 34:41 Debrief — feedback and verdict 37:10 Quick revision — every question, one answer What you'll learn: • Why compound components beat an items array — and why tabs use string values, not indexes • Controlled + uncontrolled with one source of truth (the bug when you copy a prop into state) • Why return null for inactive panels breaks aria-controls and loses form state • Roving tabindex, arrow keys, Home/End — and the keyboard trap a disabled tab causes • Removing the active tab safely under React StrictMode (register + pick the neighbour after the list settles) • Lazy panels, error boundaries per panel, and how to test it all with React Testing Library 🎯 Goal for this video: 15 likes and 15 new subscribers — that's what keeps the next round coming. 🎯 Frontend Interview Series — real company rounds, rebuilt as mock interviews. Next episode: Round 3, web fundamentals and frontend system design. 🧩 Diagraflow — system design, frontend and AI, explained with diagrams. 🔔 Subscribe so you don't miss the next round. 🌐 birendra-dev.in #FrontendInterview #React #MachineCoding