2026 में फ्रंटएंड इंटरव्यू अब सिर्फ “एक टू-डू लिस्ट बनाइए और क्लोज़र समझाइए” नहीं रह गए हैं। हायरिंग टीमें अब यह टटोलती हैं कि आप रेंडरिंग परफॉर्मेंस, एक्सेसिबिलिटी, कंपोनेंट आर्किटेक्चर, और बड़े पैमाने पर AI की मदद से बने UI को शिप करने के ट्रेडऑफ पर कैसे सोचते हैं। यह गाइड उन सवालों से गुजरती है जो आपको सच में मिलेंगे, इंटरव्यूअर उन्हें क्यों पूछते हैं, और जवाब को ऐसे कैसे ढालें कि सीनियर स्तर की समझ झलके।
2026 में फ्रंटएंड इंटरव्यू असल में क्या परखते हैं
मानदंड बदल चुका है। अब जब AI टूल बॉयलरप्लेट का बड़ा हिस्सा लिख देते हैं, इंटरव्यूअर को इससे कम मतलब है कि आपको array मेथड याद हैं या नहीं, और इससे ज़्यादा कि आप समझते हैं या नहीं कि आपका कोड ब्राउज़र, बंडल और यूज़र के साथ क्या करता है। पांच पहलुओं पर आपका मूल्यांकन होगा।
- दबाव में JavaScript की बुनियाद: इवेंट लूप, क्लोज़र, प्रोटोटाइप और async बर्ताव, ऐसे तरीकों से पूछे जाते हैं जो बता देते हैं कि आप उन्हें सच में समझते हैं या सिर्फ पैटर्न रट लिया है।
- फ्रेमवर्क की गहराई: आमतौर पर React, पर Vue, Svelte और Angular वाले रोल भी हैं। वे जानना चाहते हैं कि रेंडरिंग, स्टेट और रीकंसिलिएशन असल में कैसे काम करते हैं, सिर्फ API की ऊपरी परत नहीं।
- ब्राउज़र और प्लेटफॉर्म की जानकारी: CSS बॉक्स मॉडल, DOM, लेआउट और पेंट, नेटवर्क वॉटरफॉल, और Core Web Vitals।
- क्लाइंट के लिए सिस्टम डिज़ाइन: आप किसी कंपोनेंट लाइब्रेरी, डेटा से भरे डैशबोर्ड, या ऑफलाइन चलने वाले ऐप का ढांचा कैसे बनाएंगे।
- सहयोग और प्रोडक्ट समझ: क्या आप खराब स्पेक पर सवाल उठाते हैं, एक्सेसिबिलिटी के बारे में सोचते हैं, और यूज़र एक्सपीरियंस को इंजीनियरिंग की लागत के मुकाबले तौलते हैं।
सबसे मजबूत कैंडिडेट हर टेक्निकल जवाब को घुमाकर यूज़र पर पड़ने वाले असर से जोड़ देते हैं। ज़्यादातर इंटरव्यूअर की नज़र में यही चीज़ मिड-लेवल इंजीनियर को सीनियर से अलग करती है।
इंटरव्यू प्रोसेस (असली राउंड और चरण)
2026 का एक आम फ्रंटएंड लूप चार से छह चरणों का होता है:
- रिक्रूटर स्क्रीन (20 से 30 मिनट)। बुनियादी बातें, सैलरी की उम्मीदें, और आपके बैकग्राउंड की मोटी जांच। टेक्निकल सामग्री कम है, पर यहां की साफगोई पूरे लूप का मिज़ाज तय कर देती है।
- टेक्निकल फोन स्क्रीन (45 से 60 मिनट)। किसी शेयर्ड एडिटर पर लाइव कोडिंग: कोई फंक्शन बनाइए, कोई स्निपेट डिबग कीजिए, या कोई छोटा इंटरैक्टिव कंपोनेंट बनाइए। JavaScript पर पकड़ ही यहां का गेट है।
- कोडिंग राउंड (60 मिनट)। कुछ बड़ा बनाना, अक्सर शून्य से कोई चलता-फिरता UI कंपोनेंट (ऑटोकम्प्लीट, मोडल, स्टार रेटिंग), सादे JavaScript में या टीम के फ्रेमवर्क में। ज़ोर सही नतीजे, एज केस, और साफ DOM हैंडलिंग पर रहता है।
- फ्रंटएंड सिस्टम डिज़ाइन (45 से 60 मिनट)। अब मिड लेवल पर भी लगातार आम होता जा रहा है। आप न्यूज़ फीड या टाइपअहेड सर्विस जैसा कुछ डिज़ाइन करते हैं, और आर्किटेक्चर, डेटा फ्लो तथा कैशिंग पर तर्क देते हैं।
- फ्रेमवर्क और इकोसिस्टम पर गहरी बातचीत (45 मिनट)। React के अंदरूनी हिस्से, स्टेट मैनेजमेंट के चुनाव, रेंडरिंग रणनीतियां (CSR बनाम SSR बनाम स्ट्रीमिंग), और परफॉर्मेंस।
- बिहेवियरल और टीम फिट (45 मिनट)। पिछले प्रोजेक्ट, टकराव, और आप अस्पष्टता तथा एक्सेसिबिलिटी के फैसले कैसे संभालते हैं।
छोटी कंपनियां इसे दो या तीन राउंड में समेट देती हैं। बड़ी कंपनियां पूरा लूप चलाती हैं।
सवाल
JavaScript और ब्राउज़र
1. इवेंट लूप समझाइए, साथ में माइक्रोटास्क और मैक्रोटास्क का फर्क भी।
कैसे करें: कॉल स्टैक, टास्क क्यू और माइक्रोटास्क क्यू को क्रम से समझाइए। दिखाइए कि प्रॉमिस और queueMicrotask , ये setTimeout कॉलबैक से पहले रिज़ॉल्व होते हैं, फिर एक छोटा उदाहरण लीजिए जो अटपटे क्रम में लॉग करता हो और वह क्रम समझाइए।
2. this को उसकी वैल्यू कैसे मिलती है, और एरो फंक्शन उसे कैसे बदल देते हैं?
कैसे करें: समझाइए कि this सामान्य फंक्शन में कॉल साइट से तय होता है (डिफॉल्ट, इम्प्लिसिट, एक्सप्लिसिट, new) और एरो फंक्शन में लेक्सिकली तय होता है। इससे होने वाली कोई असली बग भी बताइए, जैसे किसी मेथड को कॉलबैक की तरह पास करने पर this का खो जाना।
3. इवेंट डेलिगेशन क्या है और यह किस काम आता है?
कैसे करें: बताइए कि एक ही लिसनर पैरेंट पर लगाया जाता है और बच्चों को संभालने के लिए event.target का इस्तेमाल होता है। इसे परफॉर्मेंस (कम लिसनर) और डायनैमिक कंटेंट (बाद में जोड़े गए एलिमेंट पर भी चलता है) से जोड़िए।
4. किसी सर्च इनपुट को आप कैसे डिबाउंस करेंगे, समझाइए।
कैसे करें: क्लोज़र पर आधारित debounce याद से लिखिए, फिर थ्रॉटलिंग से उसकी तुलना कीजिए और बताइए कि कौन कहां फिट बैठता है। बोनस: मेमोरी लीक से बचने के लिए अनमाउंट पर टाइमर कैंसल कीजिए।
फ्रेमवर्क (React पर केंद्रित)
5. इनमें फर्क समझाइए: useMemo, useCallback, और React.memo.
कैसे करें: useMemo किसी गणना की गई वैल्यू को कैश करता है, useCallback किसी फंक्शन रेफरेंस को कैश करता है, और React.memo प्रॉप्स के शैलो-इक्वल होने पर कंपोनेंट का री-रेंडर छोड़ देता है। इस बात पर ज़ोर दीजिए कि वक्त से पहले मेमोाइज़ेशन एक आम एंटी-पैटर्न है, और आप उस तक पहुंचने से पहले नापते हैं।
6. 2026 में किसी React ऐप में डेटा फेचिंग आप कैसे संभालेंगे? कैसे करें: जहां फ्रेमवर्क सपोर्ट करता हो वहां सर्वर कंपोनेंट और स्ट्रीमिंग पर बात कीजिए, साथ में कैशिंग, डिडुप्लिकेशन और stale-while-revalidate बर्ताव के लिए क्लाइंट लाइब्रेरी। दिखाइए कि आप जानते हैं इफेक्ट के भीतर फेच करना आखिरी सहारा है, डिफॉल्ट नहीं।
7. गैरजरूरी री-रेंडर किस वजह से होते हैं, और आप उन्हें कैसे पकड़ते हैं? कैसे करें: प्रॉप्स में हर बार नया ऑब्जेक्ट या फंक्शन रेफरेंस, अस्थिर कॉन्टेक्स्ट वैल्यू, और ट्री में बहुत ऊपर रखी गई स्टेट का ज़िक्र कीजिए। अपने डायग्नोस्टिक टूल के तौर पर React DevTools Profiler का नाम लीजिए।
8. आप ग्लोबल स्टेट लाइब्रेरी कब उठाएंगे और कॉन्टेक्स्ट या लोकल स्टेट कब? कैसे करें: पहले लोकल स्टेट, कम बदलने वाली साझा वैल्यू के लिए कॉन्टेक्स्ट (थीम, ऑथ), और तेज़ी से बदलने वाली या जटिल साझा स्टेट के लिए एक अलग स्टोर। बताइए कि कॉन्टेक्स्ट अपने सभी कंज़्यूमर को री-रेंडर करता है, इसीलिए तेज़ी से बदलते डेटा के लिए वह गलत चुनाव है।
CSS, एक्सेसिबिलिटी और परफॉर्मेंस
9. Flexbox और Grid में फर्क समझाइए, और बताइए कि आप किसे कब इस्तेमाल करेंगे। कैसे करें: एक-आयामी लेआउट (एक रो या एक कॉलम) के लिए Flexbox, दो-आयामी लेआउट के लिए Grid। एक ठोस उदाहरण दीजिए: नेवबार Flexbox से, कार्ड गैलरी Grid से।
10. Core Web Vitals क्या हैं और खराब LCP आप कैसे सुधारेंगे? कैसे करें: LCP, CLS और INP (जिसने FID की जगह ली) को परिभाषित कीजिए। LCP के लिए हीरो इमेज को प्रीलोड करने, क्रिटिकल रिक्वेस्ट चेन को दुरुस्त करने, सर्वर रिस्पॉन्स टाइम, और रेंडर रोकने वाले रिसोर्स से बचने की बात कीजिए।
11. किसी कस्टम ड्रॉपडाउन को आप एक्सेसिबल कैसे बनाते हैं?
कैसे करें: कीबोर्ड नेविगेशन (एरो कीज़, Escape, Enter), सही ARIA रोल और स्टेट (aria-expanded, aria-activedescendant), फोकस मैनेजमेंट, और स्क्रीन-रीडर अनाउंसमेंट। यही उन लोगों को अलग करता है जो कहते हैं “एक्सेसिबिलिटी मायने रखती है” उनसे जिन्होंने उसे सच में बनाया है।
फ्रंटएंड सिस्टम डिज़ाइन
12. लाखों यूज़र के इस्तेमाल वाला एक टाइपअहेड या ऑटोकम्प्लीट कंपोनेंट डिज़ाइन कीजिए। कैसे करें: पहले जरूरतें साफ कीजिए, फिर डिबाउंस की गई रिक्वेस्ट, क्लाइंट और सर्वर कैशिंग, पुरानी पड़ चुकी रिक्वेस्ट कैंसल करना, कीबोर्ड एक्सेसिबिलिटी, रैंकिंग, और नेटवर्क फेल होने पर सलीके से संभालना कवर कीजिए। डेटा फ्लो बनाकर दिखाइए।
13. कई प्रोडक्ट टीमों के लिए दोबारा इस्तेमाल होने लायक कंपोनेंट लाइब्रेरी का ढांचा आप कैसे बनाएंगे? कैसे करें: डिज़ाइन-टोकन लेयर, हेडलेस बनाम स्टाइल्ड कंपोनेंट, वर्ज़निंग और ब्रेकिंग-चेंज की रणनीति, डॉक्युमेंटेशन, और ट्री-शेकिंग की बात कीजिए ताकि इस्तेमाल करने वाले सिर्फ वही शिप करें जो वे सच में उपयोग कर रहे हैं।
14. एक इनफिनिट-स्क्रॉलिंग फीड डिज़ाइन कीजिए। कैसे करें: वर्चुअलाइज़ेशन (सिर्फ दिखने वाले आइटम रेंडर करना), पेजिनेशन बनाम कर्सर आधारित लोडिंग, स्क्रॉल रीस्टोरेशन, इमेज लेज़ी-लोडिंग, और कीबोर्ड तथा स्क्रीन-रीडर यूज़र के लिए एक्सेसिबिलिटी बनाए रखना कवर कीजिए।
वे आम गलतियां जो फ्रंटएंड कैंडिडेट को डुबो देती हैं
- जरूरतें साफ किए बिना सीधे कोड में कूद जाना। कोडिंग और डिज़ाइन, दोनों राउंड में मजबूत कैंडिडेट सबसे पहले सवाल पूछता है। चुप्पी और तुरंत टाइपिंग जूनियर जैसा लगता है।
- एक्सेसिबिलिटी को पूरी तरह नज़रअंदाज़ करना। 2026 में यह बुनियादी शर्त है। बिना कीबोर्ड सपोर्ट या ARIA वाला कोई इंटरैक्टिव विजेट आपको भारी पड़ेगा, चाहे दिखने में नतीजा बिल्कुल सही हो।
- “परफॉर्मेंस के लिए” हर चीज़ को मेमोाइज़ कर देना। बिना नापे जगह-जगह
useMemoऔरuseCallbackछिड़कना कार्गो-कल्ट इंजीनियरिंग का संकेत है, और इंटरव्यूअर इसे पकड़ लेते हैं। - इवेंट लूप पर गोलमोल बात करना। “यह असिंक्रोनस है” कहना कोई जवाब नहीं है। अगर आप लॉग का क्रम नहीं बता सकते, तो यह दिख जाता है।
- एज केस की अनदेखी। खाली, लोडिंग और एरर स्टेट, साथ में तेज़ी से आता इनपुट, ठीक वही हैं जिन्हें इंटरव्यूअर कुरेदते हैं। बिना पूछे इन्हें कवर कीजिए।
तैयारी कैसे करें
बुनियाद से शुरू कीजिए, क्योंकि बाकी सब उसी पर टिका है। debounce, throttle, प्रॉमिस पर आधारित delay, और एक बेसिक इवेंट एमिटर याद से लिख पाइए। तीन या चार क्लासिक UI कंपोनेंट (मोडल, टैब, ऑटोकम्प्लीट, अकॉर्डियन) पूरे कीबोर्ड और ARIA सपोर्ट के साथ दोबारा बनाइए, सादे JavaScript में भी और अपने पसंदीदा फ्रेमवर्क में भी।
फ्रेमवर्क राउंड के लिए ट्यूटोरियल वाली जानकारी पर टिकने के बजाय रेंडरिंग और रीकंसिलिएशन पर आधिकारिक डॉक्स पढ़िए, और किसी असली ऐप की प्रोफाइलिंग कीजिए ताकि री-रेंडर पकड़ने के बारे में आप अनुभव से बोल सकें। सिस्टम डिज़ाइन के लिए बोलकर प्रैक्टिस कीजिए: कोई जाना-पहचाना UI चुनिए और जरूरतें, डेटा फ्लो, कैशिंग तथा ट्रेडऑफ पर बोलिए। यहां चुपचाप पढ़ने से कहीं ज़्यादा मॉक इंटरव्यू काम आते हैं, इसलिए खुद को रिकॉर्ड कीजिए, देखिए कहां अटकते हैं, और वे जगहें कसिए।
लाइव कोपायलट कहां मदद करता है
जब बात खुद लाइव इंटरव्यू की आती है, तो एक रियल-टाइम कोपायलट सबसे ज़्यादा दबाव वाले पलों की धार कुंद कर सकता है। GhostPilot AI बातचीत सुनता है और Chrome साइड पैनल में लगभग तुरंत सुझाव सामने रखता है: कोड लिखने से पहले जरूरतें साफ करने का इशारा, ड्रॉपडाउन के लिए चाहिए वाले ARIA एट्रिब्यूट की याद, या सिस्टम-डिज़ाइन जवाब को ढांचे में रखने का तरीका। यह साइड पैनल में चलता है, इसलिए किसी शेयर किए गए टैब के स्क्रीन कैप्चर का हिस्सा नहीं बनता, और वैकल्पिक Windows डेस्कटॉप ऐप Windows 10 (बिल्ड 2004 या उसके बाद) और Windows 11 पर स्क्रीन कैप्चर में दिखता ही नहीं। इसे उस वक्त के सहारे की तरह लीजिए जब घबराहट में किसी हुक या Web Vital का सही नाम दिमाग से उड़ जाए, असली तैयारी की जगह लेने वाली चीज़ की तरह नहीं।
FAQ
फ्रंटएंड डेवलपर इंटरव्यू की तैयारी कितने दिन करनी चाहिए? मिड-लेवल रोल के लिए तीन से चार हफ्ते की फोकस्ड प्रैक्टिस ठीक है, बशर्ते आप पहले से इसी क्षेत्र में काम कर रहे हों। सिस्टम-डिज़ाइन राउंड वाले सीनियर रोल के लिए अक्सर छह से आठ हफ्ते चाहिए, ज़्यादातर इसलिए कि आर्किटेक्चर बोलकर समझाने में सहजता आ जाए।
क्या 2026 में भी फ्रंटएंड रोल के कोडिंग इंटरव्यू LeetCode जैसे होते हैं? कुछ कंपनियां अब भी एल्गोरिदम सवाल रखती हैं, पर रुझान साफ तौर पर व्यावहारिक UI बनाने और DOM पर केंद्रित समस्याओं की तरफ है। “यह कंपोनेंट बनाइए” कहीं ज़्यादा मिलेगा, “बाइनरी ट्री उलटिए” कहीं कम। बेसिक डेटा स्ट्रक्चर दोहरा लीजिए, पर तैयारी का वज़न असली फ्रंटएंड काम पर रखिए।
क्या फ्रेमवर्क आना जरूरी है, या वनीला JavaScript काफी है? मजबूत वनीला JavaScript ही बुनियाद है, और इंटरव्यूअर उसे सीधे परखते हैं। इसके बावजूद ज़्यादातर रोल कम से कम एक फ्रेमवर्क पर पकड़ की उम्मीद रखते हैं (आमतौर पर React), और गहरी बातचीत वाला राउंड मानकर चलता है कि आप उसकी अंदरूनी कार्यप्रणाली समझते हैं, सिर्फ उसका API नहीं।
फ्रंटएंड कैंडिडेट के रिजेक्ट होने की सबसे आम वजह क्या है? दो चीज़ें सबसे ऊपर हैं: कोड लिखने से पहले जरूरतें साफ न करना, और एक्सेसिबिलिटी तथा एज केस को नज़रअंदाज़ करना। दोनों प्रोडक्शन वाली परिपक्वता की कमी का संकेत देते हैं, भले ही मूल लॉजिक सही हो।
गैर-सीनियर फ्रंटएंड रोल के लिए सिस्टम डिज़ाइन कितना अहम है? पहले से ज़्यादा अहम। अब मिड-लेवल लूप में भी एक छोटा सा डिज़ाइन राउंड होता है। आपसे डिस्ट्रीब्यूटेड बैकएंड डिज़ाइन नहीं करवाया जाएगा, पर आपको क्लाइंट-साइड आर्किटेक्चर, कैशिंग और रेंडरिंग रणनीति पर भरोसे के साथ तर्क देना आना चाहिए।
GhostPilot AI आजमाएं
फ्री शुरू कीजिए, और अपग्रेड तभी कीजिए जब यह अपनी कीमत साबित कर दे: फ्री टियर में अनलिमिटेड AI जवाबों के साथ 10 मिनट के लाइव सेशन मिलते हैं, Session Pass $29 में तीन पूरे दो-घंटे के इंटरव्यू देता है (एकमुश्त, कोई सब्सक्रिप्शन नहीं), और Pro $59/माह या $192/साल ($16/माह, सालाना बिलिंग पर) है। और जानने के लिए ghostpilotai.com देखिए।