سؤالات مصاحبه ری‌اکت سطح سینیور (50 سؤال)

Question 1

ایدهٔ Concurrent Rendering چیست؟

Accepted Answer

رندر وقفه‌پذیر و اولویت‌بندی آپدیت‌ها برای UI پاسخ‌گو

Answer

اجرای موازی واقعی روی چند thread اصلی DOM

Answer

حذف کامل JavaScript

Answer

فقط مربوط به Redux است

Question 2

کدام ویژگی مخصوص Client Component است؟

Accepted Answer

hooks مثل `useState` و event handler

Answer

دسترسی مستقیم به DB بدون شبکه

Answer

عدم ارسال JS به کلاینت

Answer

اجباری بودن دستور use server

Question 3

React Fiber چیست؟

Accepted Answer

معماری reconciliation قابل وقفه از React 16

Answer

یک CDN برای React

Answer

جایگزین JSX

Answer

نام قدیمی create-react-app

Question 4

تفاوت `useLayoutEffect` با `useEffect`؟

Accepted Answer

همگام بعد از تغییر DOM و قبل از paint اجرا می‌شود

Answer

روی سرور اجرا می‌شود

Answer

قبل از رندر اجرا می‌شود

Answer

فقط یک بار در کل اپ اجرا می‌شود

Question 5

کدام معمولاً باعث hydration mismatch می‌شود؟

Accepted Answer

رندر `Date.now()` یا `Math.random()` در حین رندر

Answer

استفاده از `useState` با مقدار ثابت

Answer

استفاده از props

Answer

استفاده از Fragment

Question 6

`<Suspense fallback={...}>` چه کاری انجام می‌دهد؟

Accepted Answer

تا آماده شدن فرزندانِ suspend‌شده fallback نشان می‌دهد

Answer

خطاها را می‌گیرد

Answer

کامپوننت را memo می‌کند

Answer

state global می‌سازد

Question 7

`React.lazy(() => import("./Chart"))` چه فایده‌ای دارد؟

Accepted Answer

code splitting: کد کامپوننت فقط هنگام نیاز دانلود می‌شود

Answer

کامپوننت را روی سرور cache می‌کند

Answer

رندر را همگام می‌کند

Answer

props را lazy می‌کند

Question 8

`createPortal` برای چه استفاده می‌شود؟

Accepted Answer

رندر فرزند در DOM node دیگری (مثل مودال در body)

Answer

ارتباط با سرور

Answer

ساخت route جدید

Answer

اجرای کد در Worker

Question 9

`useSyncExternalStore` برای چیست؟

Accepted Answer

subscribe امن به store بیرونی بدون tearing در concurrent rendering

Answer

همگام‌سازی state با سرور

Answer

جایگزین `useState` برای همه موارد

Answer

ذخیره در localStorage

Question 10

اگر در یک جایگاه درخت `

` به `

` تغییر کند (با فرزندان یکسان)، React چه می‌کند؟

Accepted Answer

کل زیردرخت را unmount کرده و از نو mount می‌کند و state فرزندان از بین می‌رود

Answer

فقط نام تگ را در DOM تغییر می‌دهد و فرزندان حفظ می‌شوند

Answer

فرزندان را با key خودکار تطبیق داده و منتقل می‌کند

Answer

تا زمان idle شدن مرورگر تغییر را به تعویق می‌اندازد

Question 11

کدام گزاره درباره فازهای render و commit درست است؟

Accepted Answer

render قابل وقفه و تکرار است؛ commit همزمان و بدون وقفه اعمال می‌شود

Answer

هر دو فاز در concurrent mode قابل وقفه‌اند

Answer

commit قبل از render اجرا می‌شود تا DOM آماده باشد

Answer

effectهای `useEffect` در فاز render اجرا می‌شوند

Question 12

مفهوم «Lanes» در scheduler داخلی React چیست؟

Accepted Answer

مدل bitmask برای اولویت‌بندی و گروه‌بندی به‌روزرسانی‌ها

Answer

threadهای جداگانه برای رندر موازی کامپوننت‌ها

Answer

صف‌های رویداد DOM به تفکیک نوع رویداد

Answer

لایه‌های CSS برای composite کردن

Question 13

React چگونه یک رندر نیمه‌کاره را بدون خراب کردن UI فعلی کنار می‌گذارد؟

Accepted Answer

با double buffering: درخت `current` و درخت `workInProgress` که از طریق `alternate` به هم وصل‌اند

Answer

با snapshot گرفتن از DOM و بازگردانی آن

Answer

با اجرای رندر در iframe مخفی

Answer

با undo کردن تغییرات DOM به ترتیب معکوس

Question 14

چرا ترتیب فراخوانی Hookها از نظر پیاده‌سازی اهمیت دارد؟

Accepted Answer

state هر Hook به‌صورت linked list روی fiber ذخیره و بر اساس ترتیب خوانده می‌شود

Answer

Hookها با نام متغیر شناسایی می‌شوند و ترتیب فقط برای lint است

Answer

هر Hook یک thread جدا دارد

Answer

React هنگام کامپایل برای هر Hook یک id یکتا تولید می‌کند

Question 15

چرا hoist کردن JSX ثابت به بیرون کامپوننت (`const icon = <Icon />;` در سطح ماژول) می‌تواند رندر را کاهش دهد؟

Accepted Answer

همان شیء element با ارجاع یکسان باعث bailout و رد شدن رندر آن زیردرخت می‌شود

Answer

JSX سطح ماژول در زمان build به HTML ثابت تبدیل می‌شود

Answer

عناصر سطح ماژول از reconciliation کاملاً خارج‌اند و هرگز به‌روز نمی‌شوند حتی با تغییر context

Answer

React آن را خودکار در `React.memo` می‌پیچد

Question 16

در `memo(Comp, arePropsEqual)` اگر `arePropsEqual` مقدار `true` برگرداند چه می‌شود؟

Accepted Answer

رندر رد می‌شود، چون propها برابر در نظر گرفته شده‌اند

Answer

کامپوننت دوباره رندر می‌شود، مثل `shouldComponentUpdate`

Answer

کامپوننت unmount می‌شود

Answer

فقط effectها اجرا می‌شوند

Question 17

کامپوننتی در `React.memo` پیچیده شده و `useContext(Theme)` می‌خواند. با تغییر Theme چه می‌شود؟

Accepted Answer

با وجود memo دوباره رندر می‌شود

Answer

memo جلوی رندر را می‌گیرد چون propها تغییر نکرده‌اند

Answer

فقط پس از تغییر بعدی props به‌روز می‌شود

Answer

React خطا می‌دهد که memo و context با هم سازگار نیستند

Question 18

در لیستی با key پایدار، وقتی آیتم آخر به ابتدا منتقل شود، React چه می‌کند؟

Accepted Answer

fiber و DOM node موجود را جابه‌جا کرده و state آن را حفظ می‌کند

Answer

همه آیتم‌ها را از نو mount می‌کند

Answer

محتوای هر آیتم را در جای خود به‌روز می‌کند و stateها جابه‌جا می‌شوند

Answer

فقط آیتم اول را دوباره رندر می‌کند و بقیه را حذف می‌کند

Question 19

در concurrent rendering، چرا `analytics.track()` در بدنه کامپوننت ممکن است چند بار یا بی‌دلیل اجرا شود؟

Accepted Answer

React ممکن است یک رندر را شروع، رها و دوباره اجرا کند بدون اینکه commit شود

Answer

React هر کامپوننت را همیشه دقیقاً دو بار در production رندر می‌کند

Answer

تابع‌های global در concurrent mode غیرفعال‌اند

Answer

فقط به دلیل HMR در development است

Question 20

`StrictMode` در development علاوه بر effectها کدام را دو بار فراخوانی می‌کند؟

Accepted Answer

بدنه کامپوننت، initializerهای `useState`/`useMemo` و updater functionها

Answer

event handlerهای `onClick`

Answer

درخواست‌های `fetch` در Server Componentها

Answer

فقط `componentDidCatch`

Question 21

در mount اولیه، ترتیب اجرای `useEffect` بین والد و فرزند چیست؟

Accepted Answer

effect فرزند قبل از effect والد اجرا می‌شود

Answer

effect والد همیشه اول اجرا می‌شود

Answer

ترتیب تصادفی است

Answer

همه به‌صورت موازی در Web Worker اجرا می‌شوند

Question 22

وقتی `userId` از 1 به 2 تغییر می‌کند، cleanup effect کدام `userId` را می‌بیند؟

Accepted Answer

`1`، چون cleanup مقادیر رندری را که در آن ساخته شده capture کرده

Answer

`2`، چون cleanup همیشه آخرین props را می‌خواند

Answer

`undefined`

Answer

بستگی به این دارد که `userId` در state باشد یا props

Question 23

`useInsertionEffect` برای چه کسانی طراحی شده است؟

Accepted Answer

نویسندگان کتابخانه‌های CSS-in-JS برای تزریق style قبل از layout effectها

Answer

توسعه‌دهندگان اپ برای data fetching

Answer

برای درج آیتم در لیست‌های بزرگ

Answer

برای اجرای کد قبل از hydration در سرور

Question 24

یک navigation که داخل `startTransition` است باعث suspend شدن محتوای قبلاً نمایش‌داده‌شده می‌شود. React چه می‌کند؟

Accepted Answer

UI قبلی را نگه می‌دارد و به‌جای fallback منتظر آماده شدن داده می‌ماند

Answer

فوراً fallback نزدیک‌ترین Suspense را نشان می‌دهد

Answer

خطا پرتاب می‌کند

Answer

صفحه را کامل reload می‌کند

Question 25

در React 19 وقتی یک کامپوننت داخل Suspense، suspend شود، با siblingهایش چه رفتاری می‌شود؟

Accepted Answer

fallback فوراً commit شده و سپس siblingها برای pre-warm کردن درخواست‌ها رندر می‌شوند

Answer

React همه siblingها را کامل رندر می‌کند و سپس fallback را نشان می‌دهد

Answer

siblingها هرگز رندر نمی‌شوند تا اولی resolve شود

Answer

هر sibling یک Suspense boundary خودکار می‌گیرد

Question 26

در یک Client Component کد `const data = use(fetch(url).then(r => r.json()))` نوشته شده. مشکل؟

Accepted Answer

در هر رندر Promise جدیدی ساخته می‌شود و کامپوننت مدام suspend و fetch می‌کند

Answer

`use` فقط context می‌پذیرد نه Promise

Answer

`use` در Client Component ممنوع است

Answer

هیچ مشکلی ندارد و توصیه‌شده است

Question 27

در `startTransition(async () => { await save(); setPage("done"); })` چه نکته‌ای درباره `setPage` وجود دارد؟

Accepted Answer

به‌روزرسانی بعد از `await` خودکار transition محسوب نمی‌شود و باید دوباره در `startTransition` پیچیده شود

Answer

`setPage` بعد از `await` هرگز اعمال نمی‌شود

Answer

توابع async در `startTransition` مجاز نیستند

Answer

`setPage` همزمان با `save` اجرا می‌شود

Question 28

چرا نباید `setText` یک input کنترل‌شده را داخل `startTransition` قرار داد؟

Accepted Answer

input باید همزمان به‌روز شود؛ transition قابل وقفه است و تایپ را دچار تأخیر و پرش می‌کند

Answer

`startTransition` فقط با `useReducer` کار می‌کند

Answer

transition مقدار input را به رشته خالی reset می‌کند

Answer

باعث memory leak می‌شود

Question 29

`useSyncExternalStore(sub, () => ({ ...store.state }))` باعث حلقه بی‌نهایت می‌شود. چرا؟

Accepted Answer

`getSnapshot` در هر فراخوانی object جدیدی برمی‌گرداند و React آن را تغییر تلقی می‌کند

Answer

`subscribe` باید async باشد

Answer

spread در Hookها ممنوع است

Answer

store باید حتماً در context باشد

Question 30

موقعیت ماوس (۶۰ بار در ثانیه) در یک context سراسری است و صدها consumer دارد. بهترین طراحی؟

Accepted Answer

یک external store با subscription و selector تا فقط کامپوننت‌های ذی‌نفع رندر شوند

Answer

همه consumerها را در `React.memo` بپیچید

Answer

مقدار context را با `useMemo` پایدار کنید

Answer

context را به‌جای root در هر صفحه تکرار کنید

Question 31

وقتی فایلی `"use client"` دارد، ماژول‌هایی که آن فایل import می‌کند چه وضعیتی دارند؟

Accepted Answer

آن‌ها هم بخشی از client bundle می‌شوند

Answer

همچنان Server Component باقی می‌مانند

Answer

فقط اگر خودشان `"use client"` داشته باشند به کلاینت می‌روند

Answer

build با خطا متوقف می‌شود

Question 32

کدام روش اجازه می‌دهد یک Server Component داخل یک Client Component (مثل `Modal`) نمایش داده شود؟

Accepted Answer

در یک Server Component والد: ``

Answer

import کردن `ServerCart` داخل فایل `Modal`

Answer

فراخوانی `ServerCart()` در `useEffect`

Answer

امکان‌پذیر نیست

Question 33

کدام مورد را نمی‌توان از Server Component به‌عنوان prop به Client Component پاس داد؟

Accepted Answer

یک تابع معمولی مثل `() => alert(1)`

Answer

یک Promise

Answer

یک عنصر JSX

Answer

یک object ساده با آرایه‌های تودرتو

Question 34

یک Server Function (`"use server"`) فقط از دکمه‌ای در پنل ادمین صدا زده می‌شود. آیا بررسی دسترسی داخل آن لازم است؟

Accepted Answer

بله، چون یک endpoint عمومی است و هر کسی می‌تواند مستقیماً آن را فراخوانی کند

Answer

خیر، چون فقط از کامپوننت‌های سرور قابل فراخوانی است

Answer

خیر، React خودکار session را بررسی می‌کند

Answer

فقط اگر از `GET` استفاده کند

Question 35

«RSC payload» که به کلاینت ارسال می‌شود چیست؟

Accepted Answer

نمایش serialize‌شده و streamable درخت رندرشده با ارجاع به Client Componentها

Answer

همان HTML نهایی صفحه

Answer

کد JavaScript همه Server Componentها

Answer

یک JSON از state کامپوننت‌ها

Question 36

یک کتابخانه markdown سنگین فقط در یک Server Component استفاده می‌شود. اثرش روی bundle کلاینت؟

Accepted Answer

به bundle کلاینت اضافه نمی‌شود

Answer

همیشه کامل در bundle کلاینت قرار می‌گیرد

Answer

به‌صورت lazy در کلاینت دانلود می‌شود

Answer

فقط در development ارسال می‌شود

Question 37

تابع `cache` از پکیج `react` در Server Componentها چه می‌کند؟

Accepted Answer

نتیجه تابع را برای آرگومان‌های یکسان در طول یک درخواست memoize می‌کند

Answer

داده را بین همه کاربران برای همیشه cache می‌کند

Answer

پاسخ HTTP را در CDN cache می‌کند

Answer

معادل `useMemo` در Client Componentهاست

Question 38

در streaming SSR با `renderToPipeableStream`، یک Suspense boundary کند چگونه مدیریت می‌شود؟

Accepted Answer

ابتدا HTML fallback ارسال شده و بعد محتوا همراه یک script درون‌خطی جایگزین می‌شود

Answer

کل پاسخ تا آماده شدن آن boundary متوقف می‌شود

Answer

آن بخش فقط در کلاینت رندر می‌شود و هرگز HTML سرور ندارد

Answer

سرور خطای timeout برمی‌گرداند

Question 39

کاربر روی بخشی کلیک می‌کند که هنوز hydrate نشده. با selective hydration چه رخ می‌دهد؟

Accepted Answer

React hydrate آن boundary را اولویت داده و رویداد را پس از آن replay می‌کند

Answer

کلیک برای همیشه از دست می‌رود

Answer

کل صفحه از نو client-render می‌شود

Answer

React منتظر hydrate کل صفحه به ترتیب DOM می‌ماند

Question 40

محدودیت `suppressHydrationWarning` چیست؟

Accepted Answer

فقط یک سطح عمق دارد و برای متن یا attributeهای همان عنصر است

Answer

همه mismatchهای زیردرخت را برطرف می‌کند

Answer

مقدار سرور را دائماً نگه می‌دارد و کلاینت را نادیده می‌گیرد

Answer

فقط در Server Componentها قابل استفاده است

Question 41

React Compiler چگونه کار می‌کند و چگونه یک کامپوننت را از آن مستثنی می‌کنیم؟

Accepted Answer

در build-time memoization خودکار اضافه می‌کند؛ با دستور `"use no memo"` می‌توان مستثنی کرد

Answer

در runtime همه کامپوننت‌ها را در `React.memo` می‌پیچد؛ با `memo(false)` مستثنی می‌شوند

Answer

کد را به WebAssembly تبدیل می‌کند؛ با `"use js"` مستثنی می‌شود

Answer

Hookها را حذف می‌کند؛ با `"use hooks"` مستثنی می‌شود

Question 42

چرا نباید درستی منطق برنامه را به `useMemo` وابسته کرد (مثلاً برای جلوگیری از دو بار ساخت یک اتصال)؟

Accepted Answer

`useMemo` فقط یک بهینه‌سازی است و React ممکن است cache را دور بریزد

Answer

`useMemo` همیشه در هر رندر دوباره اجرا می‌شود

Answer

`useMemo` در production غیرفعال است

Answer

`useMemo` فقط مقادیر primitive را cache می‌کند

Question 43

رفتار `<Activity mode="hidden">` (React 19.2) چیست؟

Accepted Answer

فرزندان را پنهان کرده، effectها را cleanup می‌کند ولی state را حفظ و با اولویت پایین به‌روز می‌کند

Answer

فرزندان را کامل unmount و state را پاک می‌کند

Answer

فقط `opacity: 0` می‌دهد و همه effectها فعال می‌مانند

Answer

رندر را تا زمان visible شدن کاملاً متوقف و DOM را حذف می‌کند

Question 44

در React 19 برای ارسال خطاهای گرفته‌شده و نگرفته‌شده به سرویس monitoring، کدام API جدید وجود دارد؟

Accepted Answer

گزینه‌های `onCaughtError` و `onUncaughtError` در `createRoot`

Answer

Hook `useErrorReporter`

Answer

`window.React.onError`

Answer

متد `componentDidReport`

Question 45

از React 17 به بعد listenerهای رویداد React به کجا متصل می‌شوند؟

Accepted Answer

به container ریشه‌ای که React در آن رندر شده

Answer

به `document`

Answer

مستقیماً به هر عنصر DOM

Answer

به `window`

Question 46

handler `onScroll` روی یک `div` والد، اسکرول یک فرزند قابل اسکرول را دریافت نمی‌کند. چرا؟

Accepted Answer

از React 17، `onScroll` مانند مرورگر bubble نمی‌شود

Answer

`onScroll` فقط روی `window` کار می‌کند

Answer

باید از `onScrollCapture` روی فرزند استفاده کرد

Answer

SyntheticEventها برای scroll پشتیبانی نمی‌شوند

Question 47

در callback `onRender` کامپوننت `<Profiler>`، تفاوت `actualDuration` و `baseDuration` چیست؟

Accepted Answer

`actualDuration` زمان واقعی این رندر با memoization است؛ `baseDuration` تخمین رندر کل زیردرخت بدون memoization

Answer

`actualDuration` زمان شبکه است و `baseDuration` زمان CPU

Answer

هر دو یکسان‌اند اما با واحد متفاوت

Answer

`baseDuration` فقط زمان commit است

Question 48

لیستی با ۵۰,۰۰۰ ردیف حتی با memo کند است. راه‌حل اصلی؟

Accepted Answer

windowing/virtualization: فقط ردیف‌های قابل مشاهده رندر شوند

Answer

استفاده از index به‌عنوان key

Answer

قرار دادن کل لیست در `useMemo`

Answer

رندر لیست در `useLayoutEffect`

Question 49

کدام APIهای `react-dom` در React 19 برای بارگذاری زودهنگام منابع معرفی شدند؟

Accepted Answer

`preload`، `preinit`، `preconnect` و `prefetchDNS`

Answer

`useFetch` و `usePrefetch`

Answer

`ReactDOM.cacheAsset`

Answer

`lazyAsset` و `eagerAsset`

Question 50

در React 19، `<link rel="stylesheet" href="..." precedence="default" />` داخل یک کامپوننت چه رفتاری دارد؟

Accepted Answer

به head منتقل و dedupe می‌شود و نمایش محتوای وابسته تا بارگذاری آن به تعویق می‌افتد

Answer

به‌صورت متن خام رندر می‌شود

Answer

در هر نمونه کامپوننت یک بار تکرار می‌شود

Answer

فقط در class componentها کار می‌کند

ری‌اکت · سینیور · 50

ایدهٔ Concurrent Rendering چیست؟