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

Question 1

Compound Components چه ویژگی‌ای دارند؟

Accepted Answer

کامپوننت‌های مرتبط که state را ضمنی share می‌کنند

Answer

فقط یک فایل CSS مشترک

Answer

عدم امکان nesting

Answer

اجباری بودن Redux

Question 2

در Controlled component منبع حقیقت کجاست؟

Accepted Answer

React state (`value` + `onChange`)

Answer

فقط DOM بدون React

Answer

فایل `.env`

Answer

CDN

Question 3

کدام نمونهٔ Observer در فرانت است؟

Accepted Answer

DOM events / store subscriptions / IntersectionObserver

Answer

فقط `border-radius`

Answer

فشرده‌سازی تصویر JPEG

Answer

DNS lookup

Question 4

چرا custom hook در اغلب موارد جایگزین HOC شده است؟

Accepted Answer

wrapper hell و تداخل نام props را ندارد و ترکیب ساده‌تر است

Answer

HOC در React 19 حذف شده است

Answer

hookها روی سرور اجرا نمی‌شوند

Answer

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

Question 5

الگوی Strategy چیست؟

Accepted Answer

الگوریتم‌های قابل تعویض پشت یک interface مشترک (مثل validatorها)

Answer

یک if/else بزرگ برای همه حالت‌ها

Answer

الگوی ساخت object

Answer

الگوی مسیریابی

Question 6

کاربرد Adapter در فرانت چیست؟

Accepted Answer

تبدیل shape پاسخ API به مدل مورد نیاز اپ

Answer

اتصال شارژر به لپ‌تاپ

Answer

رندر سریع‌تر لیست

Answer

ساخت انیمیشن

Question 7

الگوی Facade چیست؟

Accepted Answer

interface ساده روی یک زیرسیستم پیچیده

Answer

کپی کامل یک کلاس

Answer

الگوی تست

Answer

یک نوع کش

Question 8

الگوی Provider در React چیست؟

Accepted Answer

یک کامپوننت بالادستی مقدار را از طریق Context به همه زیردرخت می‌دهد

Answer

هر کامپوننت داده را از سرور می‌گیرد

Answer

الگوی ساخت route

Answer

یک نوع HOC اجباری

Question 9

تفاوت Pub/Sub با Observer کلاسیک؟

Accepted Answer

در Pub/Sub یک broker/channel واسط است و ناشر و مشترک همدیگر را نمی‌شناسند

Answer

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

Answer

Observer فقط در سرور است

Answer

Pub/Sub همگام اجباری است

Question 10

الگوی State Reducer در کامپوننت‌های قابل‌استفاده‌مجدد (مثل Downshift) چه امکانی می‌دهد؟

Accepted Answer

مصرف‌کننده یک `stateReducer` می‌دهد و می‌تواند تغییرات state داخلی را قبل از اعمال، بازنویسی کند

Answer

کامپوننت state خود را در Redux ذخیره می‌کند

Answer

state داخلی کاملاً غیرقابل‌تغییر و پنهان می‌ماند

Answer

reducer فقط برای کاهش حجم bundle استفاده می‌شود

Question 11

مزیت الگوی prop getters مثل `getToggleProps()` در یک hook headless چیست؟

Accepted Answer

props لازم (aria، handlerها) را برمی‌گرداند و handlerهای کاربر را با handlerهای داخلی ترکیب می‌کند

Answer

props را به‌صورت خودکار به state سراسری تبدیل می‌کند

Answer

جلوی re-render کامپوننت را به‌طور کامل می‌گیرد

Answer

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

Question 12

prop `as` در یک کامپوننت polymorphic مثل `<Text as="h2">` چه کاری می‌کند؟

Accepted Answer

المنت یا کامپوننت رندرشده را عوض می‌کند و استایل و رفتار را حفظ می‌کند

Answer

کامپوننت را به‌صورت lazy بارگذاری می‌کند

Answer

نوع TypeScript را به `any` تبدیل می‌کند

Answer

کامپوننت را فقط در سرور رندر می‌کند

Question 13

یک `Layout` به هدر، سایدبار و محتوا نیاز دارد. کدام رویکرد composition مناسب‌تر است؟

Accepted Answer

گرفتن چند prop از نوع `ReactNode` مثل `header` و `sidebar` (named slots)

Answer

گشتن در `children` با `React.Children` و تشخیص نوع بر اساس index

Answer

گرفتن رشته HTML و استفاده از `dangerouslySetInnerHTML`

Answer

ذخیره هر بخش در Context و خواندن آن در Layout

Question 14

چرا گاهی Context را به دو Context جدا برای state و dispatch تقسیم می‌کنند؟

Accepted Answer

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

Answer

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

Answer

برای اینکه state به‌صورت خودکار persist شود

Answer

چون React بیش از یک مقدار در Context را پشتیبانی نمی‌کند

Question 15

چه زمانی بهتر است custom hook به‌جای object، یک tuple مثل `[value, setValue]` برگرداند؟

Accepted Answer

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

Answer

وقتی hook بیش از پنج مقدار برمی‌گرداند

Answer

همیشه، چون object در hookها مجاز نیست

Answer

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

Question 16

استفاده از `useImperativeHandle` چه زمانی منطقی است؟

Accepted Answer

وقتی باید یک API محدود و imperative مثل `focus()` یا `scrollToItem()` را به والد بدهیم

Answer

برای جایگزینی همه propها با متدهای ref

Answer

برای اشتراک state بین کامپوننت‌های هم‌سطح

Answer

برای fetch داده در زمان mount

Question 17

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

Accepted Answer

خطاهای داخل event handlerها و کد async مثل `setTimeout`

Answer

خطاهای زمان render فرزندان

Answer

خطاهای lifecycle methodهای فرزندان

Answer

خطاهای constructor کامپوننت‌های فرزند

Question 18

در الگوی Optimistic UI، اگر درخواست سرور شکست بخورد چه باید کرد؟

Accepted Answer

تغییر را rollback کرده و state قبلی را برگردانیم و به کاربر خطا نشان دهیم

Answer

تغییر را نگه داریم چون کاربر آن را دیده است

Answer

صفحه را به‌صورت کامل reload کنیم

Answer

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

Question 19

الگوی Repository در لایه داده frontend چه مزیتی دارد؟

Accepted Answer

کامپوننت‌ها از جزئیات منبع داده (REST، GraphQL، cache) جدا می‌شوند

Answer

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

Answer

نیاز به مدیریت خطا از بین می‌رود

Answer

درخواست‌ها همیشه سریع‌تر اجرا می‌شوند

Question 20

چرا به‌جای فراخوانی مستقیم `fetch` در کامپوننت‌ها، یک API client مرکزی می‌سازند؟

Accepted Answer

برای متمرکز کردن base URL، هدرهای auth، مدیریت خطا و تبدیل پاسخ‌ها

Answer

چون `fetch` در کامپوننت‌های React کار نمی‌کند

Answer

برای اینکه درخواست‌ها هرگز شکست نخورند

Answer

تا نیاز به HTTPS از بین برود

Question 21

چرا `debounce(fn, 300)` که داخل بدنه کامپوننت تعریف شده بدون `useMemo` یا `useRef` درست کار نمی‌کند؟

Accepted Answer

در هر render یک تابع debounce جدید با تایمر جدا ساخته می‌شود

Answer

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

Answer

چون React به‌طور خودکار همه تایمرها را پاک می‌کند

Answer

چون `setTimeout` در مرورگر وجود ندارد

Question 22

یک تابع `memoize` ساده که از `JSON.stringify(args)` به‌عنوان کلید cache استفاده می‌کند، چه مشکلی می‌تواند داشته باشد؟

Accepted Answer

رشد بی‌حد cache و کلیدهای نادرست برای توابع، `undefined` یا ترتیب متفاوت propertyها

Answer

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

Answer

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

Answer

باعث می‌شود تابع async شود

Question 23

برای اتصال یک store خارجی مبتنی بر Observer (با `subscribe`) به React، API توصیه‌شده چیست؟

Accepted Answer

`useSyncExternalStore`

Answer

`useEffect` به همراه `forceUpdate` در class

Answer

`useLayoutEffect` بدون cleanup

Answer

`useId`

Question 24

Vue 3 و MobX چگونه از الگوی Proxy برای reactivity استفاده می‌کنند؟

Accepted Answer

get را برای ثبت وابستگی و set را برای trigger کردن به‌روزرسانی‌ها رهگیری می‌کنند

Answer

هر شیء را در هر تغییر به‌طور کامل deep clone می‌کنند

Answer

با polling هر ۱۰۰ms تغییرات را بررسی می‌کنند

Answer

DOM را مستقیماً با `innerHTML` بازنویسی می‌کنند

Question 25

چرا `status: "idle" | "loading" | "success" | "error"` از چند boolean مثل `isLoading` و `isError` بهتر است؟

Accepted Answer

حالت‌های غیرممکن (مثل loading و error هم‌زمان) را حذف می‌کند

Answer

چون boolean در TypeScript منسوخ شده است

Answer

چون حافظه رشته کمتر از boolean است

Answer

چون React فقط رشته را در state می‌پذیرد

Question 26

یک `Button` یا `href` می‌گیرد (لینک) یا `onClick` (دکمه)، نه هر دو. بهترین مدل‌سازی props چیست؟

Accepted Answer

یک discriminated union از دو نوع props که ترکیب نامعتبر را در compile time رد می‌کند

Answer

هر دو prop را اختیاری کرده و در runtime هشدار بدهیم

Answer

همه props را از نوع `any` تعریف کنیم

Answer

دو کامپوننت با کد کاملاً تکراری بسازیم

Question 27

برای پیاده‌سازی fluent interface مثل `schema.string().min(3).max(10)` هر متد چه چیزی باید برگرداند؟

Accepted Answer

همان شیء (`this`) یا یک نمونه جدید از همان نوع

Answer

همیشه `undefined`

Answer

یک Promise

Answer

یک رشته JSON

Question 28

امضای `store => next => action => {...}` در middleware ریداکس چه الگویی را پیاده می‌کند؟

Accepted Answer

Chain of Responsibility با currying؛ هر middleware می‌تواند action را تغییر دهد، متوقف کند یا به `next` بدهد

Answer

Singleton؛ فقط یک middleware مجاز است

Answer

Prototype؛ store را clone می‌کند

Answer

Flyweight؛ actionها را بین storeها به اشتراک می‌گذارد

Question 29

هسته اصلی معماری Flux چیست؟

Accepted Answer

جریان داده یک‌طرفه: action → dispatcher → store → view

Answer

data binding دوطرفه بین همه کامپوننت‌ها

Answer

اینکه viewها مستقیماً store را mutate کنند

Answer

حذف کامل state از اپلیکیشن

Question 30

چرا selectorی که `state.items.filter(...)` برمی‌گرداند باید با `createSelector` memoize شود؟

Accepted Answer

چون در هر فراخوانی آرایه جدیدی می‌سازد و باعث re-render غیرضروری می‌شود

Answer

چون `filter` بدون memoize خطا می‌دهد

Answer

چون Redux در غیر این صورت state را پاک می‌کند

Answer

چون selectorها باید async باشند

Question 31

مزیت normalize کردن state (مثلاً `{ ids: [], entities: {} }`) چیست؟

Accepted Answer

هر entity یک بار ذخیره می‌شود؛ به‌روزرسانی ساده و از ناسازگاری داده‌های تکراری جلوگیری می‌شود

Answer

حجم درخواست‌های شبکه را صفر می‌کند

Answer

نیاز به key در لیست‌ها را حذف می‌کند

Answer

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

Question 32

مزیت mock کردن در سطح شبکه با MSW نسبت به mock کردن ماژول `fetch` یا axios چیست؟

Accepted Answer

کد واقعی API client هم تست می‌شود و تست‌ها به کتابخانه HTTP وابسته نیستند

Answer

تست‌ها به سرور production وصل می‌شوند

Answer

دیگر نیازی به assertion نیست

Answer

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

Question 33

در Testing Library کدام query برای پیدا کردن یک دکمه ارجح است؟

Accepted Answer

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

Answer

`container.querySelector(".btn-primary")`

Answer

`getByTestId("submit-btn")` در همه موارد

Answer

پیدا کردن از طریق state داخلی کامپوننت

Question 34

الگوی Page Object در تست‌های E2E (مثل Playwright) چه مزیتی دارد؟

Accepted Answer

selectorها و تعاملات یک صفحه در یک کلاس متمرکز می‌شوند و تغییر UI فقط یک جا اصلاح می‌شود

Answer

تست‌ها را بدون مرورگر اجرا می‌کند

Answer

نیاز به انتظار برای المنت‌ها را حذف می‌کند

Answer

هر تست را به یک فایل HTML تبدیل می‌کند

Question 35

`vi.spyOn(obj, "method")` چه تفاوتی با جایگزین کردن کامل ماژول با `vi.mock` دارد؟

Accepted Answer

spy فراخوانی‌ها را ثبت می‌کند و به‌طور پیش‌فرض پیاده‌سازی اصلی را اجرا می‌کند

Answer

spy همیشه متد را حذف می‌کند

Answer

spy فقط روی توابع async کار می‌کند

Answer

spy نیازی به restore ندارد و تا آخر همه تست‌ها باقی می‌ماند

Question 36

چرا در تست‌ها از test data factory مثل `buildUser({ role: "admin" })` استفاده می‌شود؟

Accepted Answer

داده پیش‌فرض معتبر می‌سازد و هر تست فقط فیلدهای مهم برای خودش را override می‌کند

Answer

داده‌ها را از دیتابیس production می‌خواند

Answer

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

Answer

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

Question 37

مشکل رایج snapshot testهای بزرگ برای کامپوننت‌ها چیست؟

Accepted Answer

با هر تغییر جزئی می‌شکنند و توسعه‌دهندگان بدون بررسی آن‌ها را update می‌کنند

Answer

هیچ‌وقت شکست نمی‌خورند

Answer

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

Answer

نیاز به مرورگر واقعی دارند

Question 38

یک کامپوننت `IconButton` که دکمه بومی را wrap می‌کند، چگونه LSP را رعایت می‌کند؟

Accepted Answer

props بومی دکمه (`disabled`، `type`، `aria-*`، `ref`) را می‌پذیرد و به `<button>` پاس می‌دهد

Answer

همه props بومی را نادیده می‌گیرد تا API ساده بماند

Answer

`onClick` را به نام دیگری مثل `onPress` تغییر می‌دهد و `onClick` را رد می‌کند

Answer

همیشه `type="submit"` را hard-code می‌کند

Question 39

کامپوننت `Avatar` فقط به `imageUrl` و `name` نیاز دارد اما کل شیء `user` را می‌گیرد. چه اصلی نقض شده؟

Accepted Answer

Interface Segregation؛ کامپوننت به داده‌ای بیش از نیازش وابسته شده است

Answer

DRY؛ چون کد تکراری دارد

Answer

Law of Demeter؛ چون از hook استفاده می‌کند

Answer

هیچ اصلی نقض نشده است

Question 40

کامپوننت `ProductList` مستقیماً `fetch("/api/products")` را صدا می‌زند. اعمال DIP یعنی چه؟

Accepted Answer

کامپوننت به یک abstraction مثل `useProducts()` یا prop `products` وابسته شود و پیاده‌سازی داده جدا باشد

Answer

`fetch` را با `XMLHttpRequest` جایگزین کنیم

Answer

URL را در یک متغیر global بگذاریم

Answer

کامپوننت را به class component تبدیل کنیم

Question 41

در Atomic Design، ترتیب صحیح سطوح از کوچک به بزرگ کدام است؟

Accepted Answer

atoms → molecules → organisms → templates → pages

Answer

molecules → atoms → pages → organisms → templates

Answer

pages → templates → organisms → molecules → atoms

Answer

atoms → organisms → molecules → pages → templates

Question 42

در Feature-Sliced Design، قانون اصلی import بین لایه‌ها چیست؟

Accepted Answer

هر لایه فقط می‌تواند از لایه‌های پایین‌تر import کند

Answer

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

Answer

همه لایه‌ها آزادانه از هم import می‌کنند

Answer

import بین لایه‌ها کاملاً ممنوع است

Question 43

الگوی Null Object چه مشکلی را حل می‌کند؟

Accepted Answer

حذف چک‌های تکراری `if (x)` با ارائه یک پیاده‌سازی بی‌اثر مثل `noopLogger`

Answer

پاک کردن همه مقادیر `null` از دیتابیس

Answer

جلوگیری از garbage collection

Answer

تبدیل `undefined` به `null` در JSON

Question 44

چرا APIهای subscription مدرن (مثل `store.subscribe(fn)`) یک تابع unsubscribe برمی‌گردانند؟

Accepted Answer

تا cleanup ساده باشد و مستقیماً از `useEffect` برگردانده شود و از memory leak جلوگیری شود

Answer

تا subscription به‌صورت خودکار دو بار اجرا شود

Answer

چون JavaScript نمی‌تواند listener را با reference حذف کند

Answer

تا بتوان آن را serialize و در localStorage ذخیره کرد

Question 45

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

Accepted Answer

حالت دوم lazy initialization است و تابع فقط در render اول اجرا می‌شود

Answer

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

Answer

حالت دوم state را در هر render reset می‌کند

Answer

حالت اول خطای runtime می‌دهد

Question 46

اصل Command-Query Separation (CQS) در سطح توابع چه می‌گوید؟

Accepted Answer

تابع یا state را تغییر دهد (command) یا مقداری برگرداند (query)، نه هر دو

Answer

همه توابع باید async باشند

Answer

queryها فقط در SQL مجازند

Answer

هر تابع باید دقیقاً یک پارامتر داشته باشد

Question 47

تابع `transfer(fromId: string, toId: string, amount: number)` که آرگومان‌ها به‌اشتباه جابه‌جا پاس داده می‌شوند، نشانه کدام code smell است؟

Accepted Answer

Primitive Obsession؛ می‌توان از branded type یا value object استفاده کرد

Answer

Feature Envy

Answer

Dead Code

Answer

Shotgun Surgery

Question 48

کامپوننت `<Button primary secondary danger small large />` چه مشکل طراحی دارد و راه‌حل چیست؟

Accepted Answer

boolean props متضاد ترکیب‌های نامعتبر می‌سازند؛ از propهای enum مثل `variant` و `size` استفاده کنید

Answer

تعداد props زیاد است؛ همه را در Context بگذارید

Answer

boolean props کند هستند؛ از رشته JSON استفاده کنید

Answer

مشکلی ندارد و API ایده‌آلی است

Question 49

بهترین روش برای پیاده‌سازی feature flag در کد frontend چیست؟

Accepted Answer

خواندن flag از یک سرویس یا Context مرکزی و انتخاب پیاده‌سازی در یک نقطه مشخص

Answer

پخش کردن `if (process.env.X)` در ده‌ها فایل بدون مالک مشخص

Answer

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

Answer

ساخت یک branch جدا در Git برای هر کاربر

Question 50

یک تابع `withRetry(fn, { retries: 3 })` چه الگویی را پیاده می‌کند و چه نکته‌ای مهم است؟

Accepted Answer

Decorator روی تابع async؛ فقط خطاهای موقت (شبکه، 5xx) را retry کنید، نه 4xx

Answer

Singleton؛ تابع فقط یک بار اجرا می‌شود

Answer

Iterator؛ نتایج را یکی‌یکی برمی‌گرداند

Answer

Prototype؛ تابع را clone می‌کند

الگوهای طراحی · میدل · 50

Compound Components چه ویژگی‌ای دارند؟