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

Question 1

JSX در نهایت به چه چیزی تبدیل می‌شود؟

Accepted Answer

فراخوانی‌های `jsx` / `React.createElement`

Answer

فایل HTML خام روی دیسک

Answer

CSS Modules

Answer

WebAssembly

Question 2

فراخوانی `setState` معمولاً چه می‌کند؟

Accepted Answer

باعث زمان‌بندی re-render می‌شود

Answer

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

Answer

فقط localStorage را عوض می‌کند

Answer

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

Question 3

تفاوت props و state؟

Accepted Answer

props از والد می‌آید (خواندنی)؛ state داخلی و قابل تغییر است

Answer

هر دو همیشه global هستند

Answer

state فقط در class و props فقط در function

Answer

هیچ تفاوتی نیست

Question 4

`<>...` (Fragment) چه کاری انجام می‌دهد؟

Accepted Answer

چند فرزند را بدون ساخت عنصر DOM اضافه گروه می‌کند

Answer

یک `div` خالی می‌سازد

Answer

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

Answer

state محلی می‌سازد

Question 5

اگر `items.length` برابر `0` باشد، `{items.length && <List />}` چه رندر می‌کند؟

Accepted Answer

عدد `0`

Answer

هیچ چیز

Answer

`<List />`

Answer

خطا

Question 6

مشکل `onClick={handleClick()}` چیست؟

Accepted Answer

تابع هنگام رندر اجرا می‌شود نه هنگام کلیک

Answer

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

Answer

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

Answer

رویداد را دو بار اجرا می‌کند

Question 7

دو کامپوننت هم‌سطح باید یک داده را share کنند. راه‌حل ساده؟

Accepted Answer

state را به نزدیک‌ترین والد مشترک ببرید (lift state up)

Answer

state را در هر دو کپی کنید و sync کنید

Answer

از متغیر global استفاده کنید

Answer

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

Question 8

یک input کنترل‌شده به چه چیزهایی نیاز دارد؟

Accepted Answer

`value` و `onChange`

Answer

فقط `defaultValue`

Answer

فقط `ref`

Answer

`id` و `name`

Question 9

تغییر `ref.current` در `useRef` چه اثری دارد؟

Accepted Answer

مقدار حفظ می‌شود ولی re-render نمی‌دهد

Answer

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

Answer

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

Answer

خطا می‌دهد

Question 10

چرا نام کامپوننت‌های React باید با حرف بزرگ شروع شود؟

Accepted Answer

JSX تگ‌های با حرف کوچک را عنصر HTML در نظر می‌گیرد

Answer

فقط یک قرارداد سلیقه‌ای ESLint است

Answer

حرف کوچک باعث خطای syntax در JavaScript می‌شود

Answer

React کامپوننت‌های با حرف کوچک را memo نمی‌کند

Question 11

در JSX برای تعیین کلاس CSS از کدام attribute استفاده می‌شود؟

Accepted Answer

`className`

Answer

`class`

Answer

`cssClass`

Answer

`styleClass`

Question 12

کدام روش inline style در JSX صحیح است؟

Accepted Answer

`style={{ fontSize: 14 }}`

Answer

`style="font-size: 14px"`

Answer

`style={"font-size: 14px"}`

Answer

`style={[fontSize, 14]}`

Question 13

چرا یک کامپوننت نمی‌تواند دو عنصر JSX هم‌سطح را بدون wrapper برگرداند؟

Accepted Answer

JSX به فراخوانی تابع تبدیل می‌شود و یک تابع فقط یک مقدار برمی‌گرداند

Answer

مرورگر بیش از یک root را رندر نمی‌کند

Answer

React فقط یک عنصر در هر صفحه را پشتیبانی می‌کند

Answer

به دلیل محدودیت‌های CSS layout

Question 14

کدام مورد را نمی‌توان مستقیماً داخل `{}` در JSX نوشت؟

Accepted Answer

یک دستور `if/else`

Answer

یک عملگر ternary

Answer

فراخوانی `items.map(...)`

Answer

یک template string

Question 15

برای اینکه یک کامپوننت هیچ چیزی رندر نکند، چه چیزی برمی‌گردانیم؟

Accepted Answer

`null`

Answer

`undefined` همیشه خطا می‌دهد پس `false` تنها راه است

Answer

رشته `"none"`

Answer

عدد `0`

Question 16

خروجی `

{true}{false}{null}

` در DOM چیست؟

Accepted Answer

یک `div` خالی

Answer

`

truefalsenull

`

Answer

`<div>true</div>`

Answer

خطای runtime

Question 17

اگر `{user}` را که یک object ساده است در JSX رندر کنید چه می‌شود؟

Accepted Answer

خطای «Objects are not valid as a React child» رخ می‌دهد

Answer

`[object Object]` نمایش داده می‌شود

Answer

JSON آن نمایش داده می‌شود

Answer

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

Question 18

اگر یک کامپوننت مستقیماً `props.title = "x"` را تغییر دهد چه مشکلی دارد؟

Accepted Answer

props فقط‌خواندنی‌اند و باید کامپوننت را pure نگه داشت

Answer

props را دائماً در والد به‌روزرسانی می‌کند

Answer

باعث re-render فوری می‌شود

Answer

فقط در production خطا می‌دهد

Question 19

در `

Hi

`، کامپوننت `Card` چگونه به `

` دسترسی دارد؟

Accepted Answer

از طریق `props.children`

Answer

از طریق `props.content`

Answer

با `this.slots`

Answer

با `useChildren()`

Question 20

در function component روش پیشنهادی برای مقدار پیش‌فرض prop چیست؟

Accepted Answer

مقدار پیش‌فرض در destructuring: `function Btn({ size = "md" })`

Answer

`Btn.defaultProps = {...}` که در React 19 هنوز برای توابع توصیه می‌شود

Answer

`useDefault("size", "md")`

Answer

تعریف prop در `useState`

Question 21

`<Input {...props} />` چه کاری انجام می‌دهد؟

Accepted Answer

همه کلیدهای `props` را به‌صورت prop جداگانه پاس می‌دهد

Answer

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

Answer

props را deep clone می‌کند

Answer

فقط props تغییر‌کرده را پاس می‌دهد

Question 22

بعد از `setCount(count + 1); console.log(count);` چه چیزی log می‌شود؟

Accepted Answer

مقدار قبلی `count`

Answer

مقدار جدید `count`

Answer

`undefined`

Answer

یک Promise

Question 23

سه بار پشت‌سرهم `setCount(c => c + 1)` صدا زده شود (count=0). مقدار نهایی؟

Accepted Answer

`3`

Answer

`1`

Answer

`0`

Answer

`2`

Question 24

چرا `items.push(x); setItems(items);` باعث re-render نمی‌شود؟

Accepted Answer

ارجاع آرایه یکسان است و React با `Object.is` مقایسه می‌کند

Answer

`push` در React غیرفعال شده است

Answer

setter آرایه نمی‌پذیرد

Answer

React فقط state از نوع primitive را دنبال می‌کند

Question 25

state برابر `{ name, age }` است. روش صحیح تغییر فقط `age`؟

Accepted Answer

`setUser({ ...user, age: 30 })`

Answer

`setUser({ age: 30 })` که خودکار merge می‌شود

Answer

`user.age = 30; setUser(user)`

Answer

`setUser.age(30)`

Question 26

تفاوت `useState(compute())` با `useState(compute)` چیست؟

Accepted Answer

دومی `compute` را فقط در رندر اول اجرا می‌کند

Answer

هیچ تفاوتی ندارند

Answer

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

Answer

دومی خود تابع را به‌عنوان state ذخیره می‌کند

Question 27

اگر `<Counter />` دو بار در صفحه رندر شود، state آن‌ها چگونه است؟

Accepted Answer

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

Answer

هر دو یک state مشترک دارند

Answer

دومی state اولی را به ارث می‌برد

Answer

فقط اولی state دارد

Question 28

`fullName` از `first` و `last` ساخته می‌شود. بهترین روش؟

Accepted Answer

آن را هنگام رندر محاسبه کنید، نه در state

Answer

state جدا بسازید و با `useEffect` همگام کنید

Answer

در `useRef` ذخیره کنید

Answer

در `localStorage` نگه دارید

Question 29

در handler `onChange={e => ...}`، مقدار input از کجا خوانده می‌شود؟

Accepted Answer

`e.target.value`

Answer

`e.value`

Answer

`e.input`

Answer

`this.value`

Question 30

چگونه از reload شدن صفحه هنگام submit فرم جلوگیری می‌کنیم؟

Accepted Answer

فراخوانی `e.preventDefault()` در `onSubmit`

Answer

`return false` از handler

Answer

`e.stopPropagation()`

Answer

حذف دکمه submit

Question 31

نام رویدادها در JSX چگونه نوشته می‌شود؟

Accepted Answer

camelCase مثل `onClick` با یک تابع

Answer

حروف کوچک مثل `onclick` با رشته

Answer

`click` بدون پیشوند

Answer

`on-click` با خط تیره

Question 32

یک دکمه داخل یک `div` قابل کلیک است. چگونه مانع اجرای handler والد شویم؟

Accepted Answer

`e.stopPropagation()` در handler دکمه

Answer

`e.preventDefault()` در handler دکمه

Answer

حذف `key` از والد

Answer

استفاده از `onClickCapture` روی دکمه

Question 33

در `items.map(i => <Row item={i} />)`، `key` کجا باید قرار گیرد؟

Accepted Answer

روی `<Row>` که مستقیماً از `map` برگشته

Answer

روی عنصر root داخل کامپوننت `Row`

Answer

روی عنصر والد لیست مثل `<ul>`

Answer

به‌عنوان prop جداگانه `rowKey`

Question 34

مشکل `key={Math.random()}` چیست؟

Accepted Answer

در هر رندر key تغییر کرده و همه آیتم‌ها remount می‌شوند

Answer

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

Answer

React اعداد را به‌عنوان key قبول نمی‌کند

Answer

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

Question 35

برای نمایش فقط محصولات موجود در یک لیست، روش معمول چیست؟

Accepted Answer

`products.filter(p => p.inStock).map(...)` هنگام رندر

Answer

حذف آیتم‌ها از state اصلی با `splice`

Answer

رندر همه و مخفی کردن با `display: none` الزامی است

Answer

استفاده از `forEach` که آرایه JSX برمی‌گرداند

Question 36

`useEffect(fn)` بدون آرایه وابستگی کی اجرا می‌شود؟

Accepted Answer

بعد از هر رندر

Answer

فقط یک بار بعد از mount

Answer

هرگز

Answer

فقط هنگام unmount

Question 37

در effect یک `setInterval` ساخته‌اید. چگونه از نشت حافظه جلوگیری کنید؟

Accepted Answer

یک تابع cleanup برگردانید که `clearInterval` را صدا بزند

Answer

interval را در state ذخیره کنید

Answer

آرایه وابستگی را حذف کنید

Answer

از `async` effect استفاده کنید

Question 38

چرا `useEffect(async () => {...})` نادرست است؟

Accepted Answer

تابع async یک Promise برمی‌گرداند در حالی که React انتظار cleanup دارد

Answer

`fetch` در effect مجاز نیست

Answer

effect را دو بار سریع‌تر اجرا می‌کند

Answer

React تابع‌های arrow را در effect قبول نمی‌کند

Question 39

چرا در حالت development، effect دو بار اجرا به نظر می‌رسد؟

Accepted Answer

`StrictMode` عمداً mount، unmount و دوباره mount می‌کند تا cleanup ناقص را نشان دهد

Answer

یک باگ شناخته‌شده در React 19 است

Answer

آرایه وابستگی همیشه دو بار بررسی می‌شود

Answer

در production هم همین رفتار دیده می‌شود

Question 40

چگونه هنگام mount یک input را focus کنیم؟

Accepted Answer

`ref={inputRef}` و در effect `inputRef.current.focus()`

Answer

`document.focus(input)` هنگام رندر

Answer

`setFocus(true)` در useState

Answer

`<input focus />`

Question 41

در React 19 چگونه یک function component می‌تواند `ref` دریافت کند؟

Accepted Answer

مستقیماً به‌عنوان یک prop معمولی: `function Input({ ref })`

Answer

فقط با `forwardRef` که اجباری است

Answer

با `this.refs`

Answer

function componentها اصلاً ref نمی‌گیرند

Question 42

برای یک checkbox کنترل‌شده از کدام prop استفاده می‌شود؟

Accepted Answer

`checked` همراه با `onChange`

Answer

`value` همراه با `onChange`

Answer

`selected`

Answer

`defaultValue`

Question 43

`<input value="hello" />` بدون `onChange` چه رفتاری دارد؟

Accepted Answer

فقط‌خواندنی می‌شود و React هشدار می‌دهد

Answer

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

Answer

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

Answer

خطای کامپایل می‌دهد

Question 44

در React گزینه انتخاب‌شده `<select>` چگونه تعیین می‌شود؟

Accepted Answer

با prop `value` روی خود `<select>`

Answer

با `selected` روی `<option>` که الزامی است

Answer

با `checked` روی `<option>`

Answer

با `index` روی `<select>`

Question 45

کدام کار هنگام رندر یک کامپوننت (در بدنه تابع) مجاز است؟

Accepted Answer

محاسبه یک مقدار از props و state

Answer

ارسال درخواست `fetch`

Answer

تغییر یک متغیر global

Answer

تغییر مستقیم DOM

Question 46

چرا نباید یک کامپوننت را داخل بدنه کامپوننت دیگر تعریف کرد؟

Accepted Answer

در هر رندر نوع جدیدی ساخته شده و state فرزند reset می‌شود

Answer

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

Answer

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

Answer

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

Question 47

کدام کد قوانین Hooks را نقض می‌کند؟

Accepted Answer

`if (open) { const [x] = useState(0); }`

Answer

`const [x] = useState(open ? 1 : 0);`

Answer

`useEffect(() => { if (open) log(); }, [open]);`

Answer

`const v = useMemo(() => open && 1, [open]);`

Question 48

در React 19 اپلیکیشن کلاینت چگونه در DOM مونت می‌شود؟

Accepted Answer

`createRoot(el).render(<App />)`

Answer

`ReactDOM.render(<App />, el)`

Answer

`React.mount(<App />, el)`

Answer

`el.appendChild(<App />)`

Question 49

در React Testing Library کدام query برای یافتن دکمه پیشنهاد می‌شود؟

Accepted Answer

`getByRole("button", { name: /save/i })`

Answer

`container.querySelector(".btn")`

Answer

`getByTestId("btn")` به‌عنوان اولین انتخاب

Answer

دسترسی به state داخلی کامپوننت

Question 50

`useState` چه چیزی برمی‌گرداند؟

Accepted Answer

آرایه‌ای با مقدار فعلی و تابع setter

Answer

یک object با کلیدهای `value` و `set`

Answer

فقط مقدار فعلی state

Answer

یک Promise از مقدار state

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

JSX در نهایت به چه چیزی تبدیل می‌شود؟