React intervyu mashqi: juniorni middle'dan ajratadigan savollar

React intervyulari g’alati darajada oldindan aytsa bo’ladigan. Hamma joyda o’sha sakkiz-to’qqizta mavzu chiqadi va junior bilan middle offeri o’rtasidagi farq deyarli hech qachon ko’proq API bilishda emas — React nega aynan shunday yo’l tutishini tushuntira olishda. Quyida nima so’ralishi va kuchli javob qanday eshitilishi.

Fikriy model: bu nega qayta render bo’ldi?

Eng ko’p narsani ochib beradigan React savoli — “komponentni nima qayta render qiladi?” Holat o’zgarishi, ota komponentning qayta renderi yoki kontekst qiymatining o’zgarishi — va eng muhimi, ota qayta renderlanganda bolalar propslari bir xil bo’lsa ham, memoizatsiya qilinmagan bo’lsa, qayta renderlanadi. Keyin ko’pchilik o’tkazib yuboradigan tuzoqni ayting: propga inline obyekt yoki arrow funksiya berish har renderda yangi havola yaratadi va React.memo ni jimgina bekor qiladi.

Agar rekonsilyatsiyani va key nega muhimligini ham tushuntira olsangiz — indeksli key ro’yxat tartibi o’zgarganda buzilishini, chunki React elementlarni pozitsiya bo’yicha emas, key bo’yicha moslashtirishini — siz allaqachon junior darajasidan yuqori javob berayapsiz.

Hooklar — so’raladigan tartibda

• useState — batching va keyingi qiymat oldingisiga bog’liq bo’lganda funksional updater nega kerakligi.
• useEffect — bog’liqliklar massivi, tozalash funksiyasi va komponent boshqa holatga o’tgach so’rov qaytganda yuzaga keladigan poyga. “So’rovni bekor qilaman yoki cleanup da eskirgan javobni e’tiborsiz qoldiraman” desangiz, savol to’liq yopiladi.
• useMemo va useCallback — nafaqat nima tejashi, balki nimaga tushishi. Yetuk javob: “hamma narsani o’rab tashlamayman; profiling haqiqiy narx ko’rsatganda yoki havola memoizatsiyalangan bolaga ketganda memoizatsiya qilaman”.
• useRef — renderlarni chaqirmasdan ular orasida saqlanadigan o’zgaruvchan qiymatlar.
• Maxsus hooklar — bittasini jonli yozishni kuting: odatda ma’lumot olish yoki debounce hooki.

Dogmasiz holat boshqaruvi

Savol kamdan-kam “Redux mi yoki Zustand mi?” bo’ladi, deyarli doim “bu holat qayerda yashashi kerak?” Yaxshi javob lokaldan boshlanadi, ikkita komponentga rostdan kerak bo’lgandagina yuqoriga ko’tariladi, mavzu yoki foydalanuvchi kabi kam o’zgaradigan global qiymatlar uchun kontekstdan foydalanadi va API dan keladigan hamma narsa uchun TanStack Query kabi server-kesh kutubxonasini oladi — chunki server ma’lumoti ilova holati emas, kesh. Shu jumlani ayting va kutilganning katta qismini yopgan bo’lasiz.

Zamonaviy React: Server Components va Suspense

2026-yilda Next.js dagi jamoalar server/klient chegarasini tushuntirishingizni kutadi: Server Components serverda renderlanadi va brauzerga JavaScript yubormaydi, Client Components interaktivlik va holatni oladi, "use client"esa bitta faylni emas, chegarani belgilaydi. Bu chegaradan nega propsda funksiya uzatib bo’lmasligini, Suspense kutayotganda nima qilishini va useTransitiontaxminan nima uchun kerakligini biling. Jamoa hali App Router da bo’lmasa ham, bu zamonaviylikdek o’qiladi.

Jonli koding topshirig’i

Odatiy topshiriqlar: debounce li qidiruv maydoni, yuklanish va xato holatlari bilan sahifalangan ro’yxat, validatsiyali boshqariladigan forma yoki kichik komponent refaktoringi. Yozayotib gapiring, so’ramasdan bo’sh va xato holatlarini ishlang — shuning o’zi ko’p nomzodni bir daraja ko’taradi — va effektlaringizni tozalang. Erta tugatsangiz, nimani testlashingizni ayting.

Buni qanday to’g’ri mashq qilish kerak

Qayta renderlarni ovoz chiqarib tushuntirish maqoladagi to’g’ri izohni tanib olishdan qiyinroq. Taymer qo’ying va “nima qayta renderga sabab bo’ladi?” savoliga eslatmasiz oltmish soniyada javob bering, keyin effektlar va memoizatsiya uchun shuni takrorlang. Real intervyu tilida o’tkazilgan to’liq frontend mok-intervyusi bu izohlarni “bilishimni bilaman” degan narsadan bosim ostida ayta oladigan javobga aylantiradi.