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

Question 1

`useEffect` بیشتر برای چیست؟

Accepted Answer

همگام‌سازی با سیستم بیرونی (شبکه، DOM، subscription)

Answer

جایگزین کامل `useState`

Answer

فقط برای CSS

Answer

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

Question 2

چرا `key={index}` در لیست‌های قابل تغییر خطرناک است؟

Accepted Answer

ممکن است هویت آیتم اشتباه شود و state/UI باگ بخورد

Answer

React اصلاً key نمی‌پذیرد

Answer

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

Answer

باعث خطای TypeScript می‌شود

Question 3

`React.memo` چه زمانی re-render را رد می‌کند؟

Accepted Answer

وقتی props با مقایسهٔ سطحی برابر باشند

Answer

همیشه، حتی اگر props عوض شود

Answer

فقط در Server Components

Answer

هرگز

Question 4

چه زمانی `useReducer` بهتر از `useState` است؟

Accepted Answer

وقتی state پیچیده است و چند نوع transition مرتبط دارد

Answer

برای هر boolean ساده

Answer

فقط در class component

Answer

وقتی state نداریم

Question 5

وقتی `value` یک Context Provider عوض شود چه می‌شود؟

Accepted Answer

همه consumerهای آن Context re-render می‌شوند

Answer

فقط consumerی که فیلد تغییرکرده را می‌خواند

Answer

هیچ کامپوننتی re-render نمی‌شود

Answer

کل اپ remount می‌شود

Question 6

custom hook چیست؟

Accepted Answer

تابعی با پیشوند `use` که منطق stateful را بین کامپوننت‌ها reuse می‌کند

Answer

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

Answer

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

Answer

API داخلی مرورگر

Question 7

کدام نقض Rules of Hooks است؟

Accepted Answer

صدا زدن `useState` داخل یک `if`

Answer

صدا زدن hook در بالای کامپوننت

Answer

صدا زدن hook داخل custom hook

Answer

چند `useEffect` در یک کامپوننت

Question 8

`setInterval(() => setCount(count + 1), 1000)` در effect با deps خالی چه مشکلی دارد؟

Accepted Answer

stale closure: `count` همیشه مقدار اولیه است و از ۱ بالاتر نمی‌رود

Answer

هیچ مشکلی ندارد

Answer

بی‌نهایت re-render می‌دهد

Answer

interval اصلاً اجرا نمی‌شود

Question 9

Error Boundary کدام خطا را نمی‌گیرد؟

Accepted Answer

خطا داخل event handler

Answer

خطای رندر در فرزندان

Answer

خطا در lifecycle فرزندان

Answer

خطا در constructor فرزند

Question 10

فرزند با `React.memo` پیچیده شده اما با هر رندر والد دوباره رندر می‌شود. والد `onSelect={() => pick(id)}` پاس می‌دهد. علت؟

Accepted Answer

در هر رندر یک تابع جدید ساخته می‌شود و مقایسه shallow شکست می‌خورد

Answer

`React.memo` روی propهای تابعی کار نمی‌کند و همیشه نادیده‌شان می‌گیرد

Answer

arrow function باعث می‌شود فرزند state خود را از دست بدهد

Answer

`React.memo` فقط برای class componentها کار می‌کند

Question 11

`const opts = { page }; useEffect(() => load(opts), [opts]);` چه مشکلی دارد؟

Accepted Answer

`opts` در هر رندر object جدیدی است و effect همیشه دوباره اجرا می‌شود

Answer

objectها نمی‌توانند در آرایه وابستگی باشند و خطای کامپایل می‌دهد

Answer

effect هرگز اجرا نمی‌شود

Answer

React به‌طور خودکار object را deep compare می‌کند پس مشکلی نیست

Question 12

کاربر سریع بین پروفایل‌ها جابه‌جا می‌شود و گاهی داده قدیمی نمایش داده می‌شود. راه‌حل در effect؟

Accepted Answer

یک flag `ignore` در cleanup تنظیم کنید و پاسخ‌های قدیمی را نادیده بگیرید

Answer

آرایه وابستگی را `[]` کنید

Answer

`fetch` را به‌جای effect در بدنه رندر صدا بزنید

Answer

از `useLayoutEffect` استفاده کنید تا ترتیب تضمین شود

Question 13

فرم `<EditProfile userId={id} />` هنگام تغییر `id` باید کاملاً reset شود. ساده‌ترین روش؟

Accepted Answer

`<EditProfile key={id} userId={id} />`

Answer

یک effect که همه stateها را با تغییر `id` دستی reset کند

Answer

`React.memo` روی `EditProfile`

Answer

فراخوانی `forceUpdate`

Question 14

`{isAdmin ?

Accepted Answer

حفظ می‌شود، چون نوع و جایگاه یکسان است

Answer

reset می‌شود، چون دو عنصر JSX متفاوت‌اند

Answer

React خطا می‌دهد

Answer

فقط stateهای `useRef` حفظ می‌شوند

Question 15

کاربرد اصلی `useId` چیست؟

Accepted Answer

تولید id یکتا و یکسان بین سرور و کلاینت برای attributeهای accessibility

Answer

تولید `key` برای آیتم‌های لیست

Answer

ساخت id برای رکوردهای دیتابیس

Answer

شناسایی نمونه کامپوننت در DevTools

Question 16

تعویض تب یک لیست سنگین رندر می‌کند و UI قفل می‌شود. `useTransition` چه کمکی می‌کند؟

Accepted Answer

به‌روزرسانی را non-urgent علامت می‌زند تا قابل وقفه باشد و `isPending` بدهد

Answer

رندر را به یک Web Worker منتقل می‌کند

Answer

رندر لیست را تا idle شدن مرورگر با `setTimeout` به تأخیر می‌اندازد

Answer

لیست را خودکار virtualize می‌کند

Question 17

یک input جستجو و لیست نتایج سنگین دارید و state در کامپوننت دیگری است. ابزار مناسب؟

Accepted Answer

`useDeferredValue(query)` و پاس دادن مقدار deferred به لیست

Answer

`useLayoutEffect` برای به‌روزرسانی همزمان

Answer

`flushSync` روی هر تایپ

Answer

`useRef` برای نگهداری query

Question 18

کدام مورد درباره `dispatch` از `useReducer` و setter از `useState` درست است؟

Accepted Answer

هویت آن‌ها بین رندرها پایدار است و نیازی به وابستگی نیست

Answer

در هر رندر تابع جدیدی هستند و باید در `useCallback` پیچیده شوند

Answer

فقط در effect قابل استفاده‌اند

Answer

مقدار جدید state را برمی‌گردانند

Question 19

`<AuthContext value={{ user, login }}>` در یک کامپوننت که زیاد رندر می‌شود. مشکل؟

Accepted Answer

object جدید در هر رندر همه consumerها را دوباره رندر می‌کند

Answer

context فقط مقادیر primitive می‌پذیرد

Answer

consumerها هرگز به‌روز نمی‌شوند

Answer

فقط اولین consumer به‌روز می‌شود

Question 20

چرا گاهی state و `dispatch` را در دو context جداگانه قرار می‌دهند؟

Accepted Answer

کامپوننت‌هایی که فقط dispatch می‌کنند با تغییر state دوباره رندر نشوند

Answer

چون یک context نمی‌تواند تابع نگه دارد

Answer

چون `useReducer` بدون دو context کار نمی‌کند

Answer

برای پشتیبانی از SSR الزامی است

Question 21

باید id یک `setTimeout` را نگه دارید تا بعداً لغو شود؛ نمایش آن روی UI لازم نیست. بهترین گزینه؟

Accepted Answer

`useRef`

Answer

`useState`

Answer

یک متغیر `let` داخل بدنه کامپوننت

Answer

`useMemo`

Question 22

چرا نباید `ref.current` را هنگام رندر خواند یا نوشت (به‌جز مقداردهی اولیه)؟

Accepted Answer

رندر را impure و غیرقابل‌پیش‌بینی می‌کند، چون تغییرش رندری ایجاد نمی‌کند

Answer

`ref.current` قبل از commit همیشه خطا پرتاب می‌کند

Answer

refها فقط در class componentها قابل خواندن‌اند

Answer

باعث حلقه بی‌نهایت رندر می‌شود

Question 23

در React 19 اگر یک ref callback تابعی برگرداند چه می‌شود؟

Accepted Answer

آن تابع هنگام جدا شدن عنصر به‌عنوان cleanup اجرا می‌شود

Answer

مقدار برگشتی نادیده گرفته می‌شود

Answer

خطا رخ می‌دهد چون ref callback نباید مقدار برگرداند

Answer

تابع به‌عنوان `ref.current` ذخیره می‌شود

Question 24

`useImperativeHandle` برای چه کاری است؟

Accepted Answer

محدود کردن و سفارشی‌سازی آنچه از طریق ref به والد expose می‌شود

Answer

اجرای effect قبل از paint

Answer

ساخت state سراسری

Answer

جلوگیری از re-render فرزندان

Question 25

بعد از اضافه کردن آیتم به لیست باید فوراً به آیتم جدید scroll کنید. کدام API به‌روزرسانی DOM را همزمان اعمال می‌کند؟

Accepted Answer

`flushSync` از `react-dom`

Answer

`startTransition`

Answer

`useDeferredValue`

Answer

`await setItems(...)`

Question 26

در React 18 به بعد، دو `setState` داخل callback یک `setTimeout` چند رندر ایجاد می‌کنند؟

Accepted Answer

یک رندر، به لطف automatic batching

Answer

دو رندر، چون batching فقط در event handlerهاست

Answer

صفر، چون setTimeout خارج از React است

Answer

بسته به ترتیب فراخوانی، سه رندر

Question 27

امضای صحیح `useActionState` در React 19 کدام است؟

Accepted Answer

`const [state, formAction, isPending] = useActionState(fn, initialState)`

Answer

`const { data, error } = useActionState(url)`

Answer

`const [pending, start] = useActionState()`

Answer

`const state = useActionState(form)`

Question 28

`useFormStatus` در همان کامپوننتی که `<form>` را رندر می‌کند همیشه `pending: false` برمی‌گرداند. چرا؟

Accepted Answer

فقط وضعیت `<form>` والد را می‌خواند، پس باید در کامپوننت فرزند فرم صدا زده شود

Answer

فقط با فرم‌های controlled کار می‌کند

Answer

باید `StrictMode` غیرفعال باشد

Answer

فقط در Server Componentها کار می‌کند

Question 29

رفتار `useOptimistic` پس از پایان action (موفق یا ناموفق) چیست؟

Accepted Answer

مقدار optimistic کنار گذاشته شده و به state واقعی برمی‌گردد

Answer

مقدار optimistic دائماً ذخیره می‌شود

Answer

در صورت خطا صفحه reload می‌شود

Answer

خودکار درخواست را retry می‌کند

Question 30

در React 19 وقتی یک تابع به `<form action={fn}>` پاس داده شود و با موفقیت تمام شود، فیلدهای uncontrolled چه می‌شوند؟

Accepted Answer

فرم به‌طور خودکار reset می‌شود

Answer

مقادیر حفظ می‌شوند تا کاربر دستی پاک کند

Answer

صفحه به URL فرم navigate می‌کند

Answer

خطا رخ می‌دهد چون action باید رشته باشد

Question 31

چه چیزی `use(ThemeContext)` را از `useContext(ThemeContext)` متمایز می‌کند؟

Accepted Answer

`use` را می‌توان داخل شرط یا حلقه صدا زد

Answer

`use` باعث re-render با تغییر context نمی‌شود

Answer

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

Answer

`use` مقدار پیش‌فرض context را نادیده می‌گیرد

Question 32

در React 19 کدام syntax برای provide کردن context جدید و پیشنهادی است؟

Accepted Answer

`<ThemeContext value="dark">`

Answer

`<ThemeContext.Consumer value="dark">`

Answer

`<Provider context={ThemeContext}>`

Answer

`ThemeContext.set("dark")`

Question 33

اگر کامپوننتی `useContext(Ctx)` را صدا بزند ولی هیچ provider بالادستی نباشد چه برمی‌گردد؟

Accepted Answer

مقدار پیش‌فرض داده‌شده به `createContext`

Answer

همیشه `undefined`

Answer

خطای runtime

Answer

مقدار آخرین provider رندرشده در هر جای اپ

Question 34

کدام خطا توسط Error Boundary گرفته نمی‌شود؟

Accepted Answer

خطای داخل یک event handler مثل `onClick`

Answer

خطای پرتاب‌شده هنگام رندر فرزند

Answer

خطای داخل lifecycle یک فرزند

Answer

خطای داخل constructor یک فرزند class

Question 35

یک input در صفحه با هر تایپ کل صفحه سنگین را دوباره رندر می‌کند. بهترین اصلاح بدون memo؟

Accepted Answer

state input را به یک کامپوننت کوچک جدا منتقل کنید (move state down)

Answer

state را به context سراسری منتقل کنید

Answer

از `forceUpdate` کمتر استفاده کنید

Answer

کل صفحه را در `useMemo` بپیچید

Question 36

در ``، وقتی state داخلی `ScrollTracker` تغییر کند `HeavyList` چه می‌شود؟

Accepted Answer

دوباره رندر نمی‌شود، چون عنصر `children` توسط والد بیرونی ساخته شده

Answer

همیشه دوباره رندر می‌شود چون فرزند است

Answer

unmount و دوباره mount می‌شود

Answer

فقط اگر `HeavyList` در `React.memo` باشد رندر نمی‌شود

Question 37

هشدار «A component is changing an uncontrolled input to be controlled» معمولاً از کجا می‌آید؟

Accepted Answer

`value` ابتدا `undefined` بوده و بعد مقدار گرفته است

Answer

استفاده از `onChange` به‌جای `onInput`

Answer

رندر input داخل Fragment

Answer

استفاده از `defaultValue` و `ref` با هم

Question 38

دو کامپوننت هر دو `useCounter()` را صدا می‌زنند. آیا state را share می‌کنند؟

Accepted Answer

خیر، هر فراخوانی state مستقل خودش را دارد

Answer

بله، custom hookها singleton هستند

Answer

فقط اگر نام hook با `use` شروع شود

Answer

بله، اگر در یک فایل تعریف شوند

Question 39

effect اتصال chat به `roomId` وابسته است اما برای نمایش notification از `theme` هم استفاده می‌کند و نمی‌خواهید با تغییر theme دوباره وصل شود. راه‌حل؟

Accepted Answer

منطق notification را در `useEffectEvent` قرار دهید

Answer

`theme` را از آرایه وابستگی حذف و lint را خاموش کنید

Answer

`theme` را در `useMemo` بپیچید

Answer

از `useLayoutEffect` استفاده کنید

Question 40

برای debounce درخواست جستجو با effect، کدام الگو درست است؟

Accepted Answer

`setTimeout` در effect و `clearTimeout` در cleanup با وابستگی `[query]`

Answer

`setTimeout` در effect با `[]` و بدون cleanup

Answer

فراخوانی `fetch` در `onChange` و سپس `setTimeout` روی state

Answer

استفاده از `useMemo` برای تأخیر

Question 41

خطای «Too many re-renders» معمولاً چه علتی دارد؟

Accepted Answer

فراخوانی بی‌قید و شرط setState در بدنه رندر

Answer

داشتن بیش از ۱۰ `useState`

Answer

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

Answer

effect با آرایه وابستگی خالی

Question 42

اگر setState با مقداری برابر با مقدار فعلی (طبق `Object.is`) صدا زده شود چه می‌شود؟

Accepted Answer

React رندر فرزندان و اجرای effectها را رد می‌کند

Answer

همیشه یک رندر کامل از کل درخت انجام می‌شود

Answer

خطا پرتاب می‌شود

Answer

state به مقدار اولیه برمی‌گردد

Question 43

چرا `const Chart = lazy(() => import("./Chart"))` باید در سطح ماژول تعریف شود نه داخل کامپوننت؟

Accepted Answer

داخل کامپوننت در هر رندر نوع جدیدی می‌سازد و state را reset می‌کند

Answer

`import()` داخل توابع مجاز نیست

Answer

Suspense فقط lazyهای سطح ماژول را می‌شناسد

Answer

bundler آن را حذف می‌کند

Question 44

در React 19 اگر `<title>` را داخل یک کامپوننت رندر کنید چه می‌شود؟

Accepted Answer

React آن را به `<head>` سند منتقل (hoist) می‌کند

Answer

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

Answer

خطا رخ می‌دهد و باید از کتابخانه خارجی استفاده کرد

Answer

فقط در Server Componentها نادیده گرفته می‌شود

Question 45

کامپوننت پس از یک fetch متن «Loaded» را نشان می‌دهد. در RTL کدام query مناسب است؟

Accepted Answer

`await screen.findByText("Loaded")`

Answer

`screen.getByText("Loaded")` بلافاصله

Answer

`screen.queryByText("Loaded")` بدون انتظار

Answer

`setTimeout` و سپس `getByText`

Question 46

چرا `@testing-library/user-event` به `fireEvent` ترجیح داده می‌شود؟

Accepted Answer

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

Answer

سریع‌تر است چون رویدادی dispatch نمی‌کند

Answer

state کامپوننت را مستقیم تغییر می‌دهد

Answer

فقط برای snapshot test کار می‌کند

Question 47

برای تست مستقل یک custom hook در RTL از چه چیزی استفاده می‌شود؟

Accepted Answer

`renderHook` و خواندن `result.current`

Answer

صدا زدن مستقیم hook در تابع تست

Answer

`shallow` از Enzyme

Answer

`ReactDOM.renderToString`

Question 48

یک listener روی `window` برای `resize` در effect اضافه شده ولی handler مقدار قدیمی state را می‌بیند و listenerها تکثیر می‌شوند. اصلاح درست؟

Accepted Answer

همان تابع را در cleanup با `removeEventListener` حذف و deps را صحیح تنظیم کنید

Answer

listener را در بدنه رندر اضافه کنید

Answer

از `onResize` روی `div` استفاده کنید

Answer

`removeEventListener` را با یک arrow function جدید صدا بزنید

Question 49

کدام مورد کاربرد معقول `useMemo` است؟

Accepted Answer

فیلتر یک آرایه چند هزار عضوی که به فرزند memo‌شده پاس داده می‌شود

Answer

محاسبه `a + b` برای دو عدد

Answer

اجرای side effect مثل `fetch`

Answer

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

Question 50

کدام سناریو انتخاب `useReducer` به‌جای چند `useState` را توجیه می‌کند؟

Accepted Answer

چند state مرتبط که با رویدادهای متعدد به‌صورت هماهنگ تغییر می‌کنند

Answer

یک boolean ساده برای باز و بسته کردن modal

Answer

نیاز به state سراسری بین صفحات

Answer

نیاز به اجرای کد async داخل reducer

ری‌اکت · میدل · 50

`useEffect` بیشتر برای چیست؟