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

Question 1

normalize کردن state چه کمکی می‌کند؟

Accepted Answer

کاهش duplication و آپدیت ساده‌تر entity با id

Answer

افزایش عمدی duplication

Answer

حذف همه idها

Answer

فقط برای تصاویر

Question 2

selector چگونه re-render را کم می‌کند؟

Accepted Answer

کامپوننت فقط به slice لازم subscribe می‌شود

Answer

همه store را هر بار force می‌کند

Answer

React را خاموش می‌کند

Answer

فقط برای CSS

Question 3

برای Undo/Redo معمولاً چه نگه می‌داریم؟

Accepted Answer

پشته past / present / future از snapshot یا command

Answer

فقط یک boolean

Answer

هیچ تاریخی

Answer

فقط نام فایل

Question 4

مزیت اصلی state machine (مثل XState) چیست؟

Accepted Answer

حالت‌ها و transitionها صریح‌اند و حالت‌های غیرممکن حذف می‌شوند

Answer

حجم bundle را صفر می‌کند

Answer

جایگزین TypeScript است

Answer

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

Question 5

برای sync کردن state بین چند تب مرورگر از چه استفاده می‌شود؟

Accepted Answer

رویداد `storage` یا `BroadcastChannel`

Answer

`useState` مشترک

Answer

`sessionStorage`

Answer

متغیر global

Question 6

در SSR، store سمت کلاینت چگونه مقداردهی اولیه می‌شود؟

Accepted Answer

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

Answer

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

Answer

store بین همه کاربران روی سرور share می‌شود

Answer

از cookie کل store خوانده می‌شود

Question 7

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

Accepted Answer

هر بار آرایه جدید می‌سازد و باعث re-render بی‌دلیل می‌شود

Answer

چون filter در Redux ممنوع است

Answer

برای کاهش حجم bundle

Answer

نیازی به memo ندارد

Question 8

ایده اصلی Signals (Solid، Preact، Angular) چیست؟

Accepted Answer

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

Answer

re-render کل درخت در هر تغییر

Answer

حذف کامل state

Answer

فقط برای ارتباط با سرور

Question 9

اصل state colocation چه می‌گوید؟

Accepted Answer

state را تا حد ممکن نزدیک جایی که استفاده می‌شود نگه دار

Answer

همه state را در store سراسری بگذار

Answer

state را در CSS نگه دار

Answer

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

Question 10

«tearing» در رندر concurrent چیست و چگونه جلوگیری می‌شود؟

Accepted Answer

بخش‌های مختلف UI در یک رندر مقادیر متفاوتی از یک store خارجی نشان می‌دهند؛ با `useSyncExternalStore`

Answer

پاره شدن CSS هنگام انیمیشن؛ با `will-change`

Answer

نشت حافظه در Context؛ با `useMemo`

Answer

خطای hydration در SSR؛ با `suppressHydrationWarning`

Question 11

در Next.js App Router، چرا یک Server Component نمی‌تواند مقدار store سمت کلاینت (Redux/Zustand) را بخواند؟

Accepted Answer

Server Component روی سرور و قبل از کلاینت اجرا می‌شود و hook یا Context ندارد

Answer

چون Redux در Next.js پشتیبانی نمی‌شود

Answer

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

Answer

می‌تواند، به شرط اینکه store را import کند

Question 12

الگوی صحیح prefetch با React Query در SSR کدام است؟

Accepted Answer

برای هر request یک `QueryClient` جدید، `prefetchQuery`، سپس `dehydrate` و `HydrationBoundary` در کلاینت

Answer

یک `QueryClient` سراسری روی سرور برای همه کاربران

Answer

ارسال کل cache سرور در cookie

Answer

غیرفعال کردن cache در سرور و fetch دوباره در کلاینت

Question 13

با prefetch در SSR و `staleTime` پیش‌فرض (0)، بلافاصله بعد از hydration چه اتفاقی می‌افتد؟

Accepted Answer

داده فوراً stale است و کلاینت آن را دوباره fetch می‌کند؛ باید `staleTime` بیشتر از صفر تنظیم شود

Answer

هیچ fetchی رخ نمی‌دهد چون داده از سرور آمده

Answer

cache پاک می‌شود و صفحه خالی می‌ماند

Answer

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

Question 14

در جستجوی زنده با `useEffect` + `fetch`، نتیجه «re» گاهی بعد از «react» می‌رسد و جایگزینش می‌شود. راه‌حل مناسب؟

Accepted Answer

لغو درخواست قبلی با `AbortController` در cleanup یا نادیده گرفتن پاسخ‌های قدیمی

Answer

افزایش timeout درخواست‌ها

Answer

ذخیره همه پاسخ‌ها در یک آرایه

Answer

استفاده از `useLayoutEffect` به‌جای `useEffect`

Question 15

trade-off اصلی cache normalized (مثل Apollo) در برابر cache مبتنی بر query (مثل React Query) چیست؟

Accepted Answer

normalized با تغییر یک entity همه queryها را خودکار آپدیت می‌کند ولی پیچیده‌تر است؛ query-keyed ساده‌تر است ولی invalidation دستی لازم دارد

Answer

cache normalized همیشه سریع‌تر و بدون هزینه است

Answer

cache مبتنی بر query نمی‌تواند داده را نگه دارد

Answer

هیچ تفاوت عملی ندارند

Question 16

«structural sharing» در React Query بعد از refetch چه کاری انجام می‌دهد؟

Accepted Answer

referenceهای بخش‌های تغییرنکرده داده را حفظ می‌کند تا memo و selectorها بی‌دلیل اجرا نشوند

Answer

داده را بین چند تب به اشتراک می‌گذارد

Answer

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

Answer

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

Question 17

selector ساخته‌شده با `createSelector` که آرگومان `id` می‌گیرد، در لیستی با ۱۰۰ آیتم با `id`های مختلف استفاده می‌شود. در reselect با memoize کلاسیک (cache size = 1) چه مشکلی پیش می‌آید؟

Accepted Answer

هر فراخوانی با `id` متفاوت cache را باطل می‌کند و memo عملاً بی‌اثر می‌شود

Answer

selector فقط برای اولین آیتم اجرا می‌شود

Answer

Redux خطای circular dependency می‌دهد

Answer

هیچ مشکلی پیش نمی‌آید

Question 18

راهنمای سبک Redux توصیه می‌کند actionها چگونه نام‌گذاری شوند؟

Accepted Answer

به‌صورت رویداد (`orderSubmitted`) نه setter (`setOrderStatus`)

Answer

همیشه با پیشوند `SET_`

Answer

با نام کامپوننت ارسال‌کننده

Answer

با شماره ترتیبی

Question 19

دو mutation optimistic هم‌زمان روی یک لیست اجرا می‌شوند و اولی شکست می‌خورد. rollback ساده به snapshot چه مشکلی دارد؟

Accepted Answer

snapshot قدیمی تغییر optimistic mutation دوم را هم پاک می‌کند

Answer

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

Answer

mutation دوم هم به‌طور خودکار شکست می‌خورد

Answer

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

Question 20

در یک اپ offline-first، mutationهای انجام‌شده در حالت آفلاین چگونه مدیریت می‌شوند؟

Accepted Answer

در یک صف پایدار (مثلاً IndexedDB) ذخیره و پس از اتصال به ترتیب ارسال و تعارض‌ها حل می‌شوند

Answer

دور ریخته می‌شوند

Answer

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

Answer

در cookie ذخیره و با هر درخواست ارسال می‌شوند

Question 21

چرا برای ویرایش هم‌زمان چندکاربره (مثل Figma یا Google Docs) از CRDT استفاده می‌شود؟

Accepted Answer

تغییرات هم‌زمان بدون هماهنگی مرکزی به state یکسان همگرا می‌شوند

Answer

چون حجم داده را صفر می‌کنند

Answer

چون نیاز به شبکه را حذف می‌کنند

Answer

چون فقط آخرین تغییر را نگه می‌دارند و بقیه را دور می‌ریزند

Question 22

یک Context پرتغییر با صدها consumer باعث کندی شده است. کدام راه‌حل ریشه‌ای‌تر است؟

Accepted Answer

Context فقط reference یک store پایدار را منتقل کند و consumerها با selector از طریق `useSyncExternalStore` subscribe کنند

Answer

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

Answer

افزایش تعداد Providerهای تودرتو با همان value

Answer

استفاده از `useLayoutEffect` در Provider

Question 23

داده یک داشبورد با WebSocket به‌روز می‌شود و با React Query fetch شده است. رویکرد مناسب ادغام چیست؟

Accepted Answer

با هر پیام، cache مربوطه را با `setQueryData` آپدیت یا key مرتبط را invalidate کنیم و `staleTime` را بالا ببریم

Answer

پیام‌ها را در یک `useState` جدا نگه داریم و با داده query ادغام دستی کنیم

Answer

polling هر ۱۰۰ میلی‌ثانیه را هم فعال کنیم

Answer

WebSocket را کنار بگذاریم چون با cache سازگار نیست

Question 24

بعد از هر mutation کوچک، `invalidateQueries()` بدون فیلتر صدا زده می‌شود. پیامد آن چیست؟

Accepted Answer

همه queryهای فعال هم‌زمان refetch می‌شوند و بار شبکه و سرور جهش می‌کند

Answer

هیچ queryای refetch نمی‌شود

Answer

فقط query مرتبط با mutation refetch می‌شود

Answer

cache برای همیشه غیرفعال می‌شود

Question 25

مزیت «query key factory» (مثل `todoKeys.detail(id)`) در یک کدبیس بزرگ چیست؟

Accepted Answer

keyها یک‌جا و سلسله‌مراتبی تعریف می‌شوند تا خطای تایپی و invalidation ناقص رخ ندهد

Answer

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

Answer

نیاز به queryFn را حذف می‌کند

Answer

cache را در localStorage ذخیره می‌کند

Question 26

هنگام persist کردن cache با `persistQueryClient` و `maxAge` برابر ۲۴ ساعت، چرا باید `gcTime` را هم حداقل ۲۴ ساعت گذاشت؟

Accepted Answer

وگرنه queryهای بلااستفاده زودتر از حافظه حذف شده و دیگر در storage ذخیره یا بازیابی نمی‌شوند

Answer

چون `gcTime` تعیین می‌کند هر چند وقت داده refetch شود

Answer

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

Answer

الزامی نیست و هیچ اثری ندارد

Question 27

از نظر امنیتی، نگه داشتن access token در `localStorage` یا store قابل persist چه ریسکی دارد؟

Accepted Answer

هر اسکریپت XSS می‌تواند آن را بخواند؛ cookie با `HttpOnly` و `SameSite` از دسترس JS خارج است

Answer

localStorage بعد از هر رفرش پاک می‌شود

Answer

مرورگر token را به همه دامنه‌ها می‌فرستد

Answer

هیچ ریسکی ندارد چون localStorage رمزنگاری‌شده است

Question 28

فیلترها هم در Zustand و هم در URL نگه داشته شده و با دو effect دوطرفه همگام می‌شوند. مشکل اصلی چیست؟

Accepted Answer

دو منبع حقیقت؛ احتمال حلقه آپدیت و ناهمخوانی هنگام back/forward. بهتر است فیلتر فقط از URL مشتق شود

Answer

Zustand نمی‌تواند رشته نگه دارد

Answer

URL محدودیت طول ندارد

Answer

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

Question 29

در Next.js App Router، استفاده از `useSearchParams` در یک Client Component روی صفحه‌ای که static رندر می‌شود چه اثری دارد؟

Accepted Answer

درخت تا نزدیک‌ترین مرز `Suspense` فقط در کلاینت رندر می‌شود؛ باید آن را در `Suspense` پیچید

Answer

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

Answer

`useSearchParams` همیشه `null` برمی‌گرداند

Answer

هیچ اثری ندارد

Question 30

statechartها (حالت‌های تودرتو و موازی) چه مشکلی از state machineهای تخت را حل می‌کنند؟

Accepted Answer

انفجار تعداد حالت‌ها وقتی چند بُعد مستقل ترکیب می‌شوند

Answer

نیاز به JavaScript را حذف می‌کنند

Answer

ماشین را non-deterministic می‌کنند

Answer

transitionها را حذف می‌کنند

Question 31

در XState v5، مدل actor چه امکانی می‌دهد؟

Accepted Answer

spawn کردن actorهای مستقل با state خودشان که فقط با پیام (event) ارتباط دارند

Answer

اشتراک مستقیم state قابل‌تغییر بین ماشین‌ها

Answer

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

Answer

حذف نیاز به event

Question 32

در معماری micro-frontend، اشتراک state بین اپ‌های مستقل چگونه بهتر انجام می‌شود؟

Accepted Answer

با قرارداد حداقلی مثل custom eventها، URL یا یک API پیام‌رسانی، نه store مشترک

Answer

همه اپ‌ها مستقیم یک Redux store مشترک را import کنند

Answer

داده از DOM اپ دیگر خوانده شود

Answer

همه state در متغیرهای `window` سراسری قرار گیرد

Question 33

در یک feed بی‌نهایت که کاربر هزاران آیتم اسکرول می‌کند، refetch با `useInfiniteQuery` کند شده است. علت و راه‌حل؟

Accepted Answer

refetch همه صفحات را به ترتیب دوباره fetch می‌کند؛ `maxPages` و virtualization تعداد صفحات و DOM را محدود می‌کنند

Answer

`staleTime` را صفر کنیم

Answer

هر صفحه را در یک `useState` جدا نگه داریم

Answer

`getNextPageParam` را حذف کنیم

Question 34

آپدیت یک store خارجی (Redux/Zustand) داخل `startTransition` چه رفتاری دارد؟

Accepted Answer

React آن را non-blocking نمی‌کند؛ آپدیت‌های `useSyncExternalStore` به‌صورت همگام (blocking) انجام می‌شوند

Answer

مثل state داخلی React قابل قطع و اولویت‌بندی است

Answer

آپدیت کاملاً نادیده گرفته می‌شود

Answer

store به‌طور خودکار به Context تبدیل می‌شود

Question 35

در React 19، مقدار optimistic ساخته‌شده با `useOptimistic` کی به مقدار واقعی برمی‌گردد؟

Accepted Answer

وقتی action یا transition در جریان تمام شود؛ سپس state واقعی (پاس‌شده به hook) نمایش داده می‌شود

Answer

فقط وقتی دستی `revert()` صدا زده شود

Answer

بعد از رفرش صفحه

Answer

هرگز؛ مقدار optimistic دائمی است

Question 36

در Next.js با Server Actions، بعد از ذخیره یک پست، لیست پست‌ها چگونه به‌روز می‌شود بدون cache سمت کلاینت؟

Accepted Answer

فراخوانی `revalidatePath` یا `revalidateTag` در action تا داده سرور و RSC payload تازه شوند

Answer

کپی دستی پست در localStorage

Answer

صدا زدن `window.location.reload()` روی سرور

Answer

غیرممکن است و حتماً React Query لازم است

Question 37

در Valtio، قانون درست خواندن و نوشتن state چیست؟

Accepted Answer

در رندر از `useSnapshot(state)` بخوانید و در event handlerها خود proxy را mutate کنید

Answer

snapshot را mutate کنید تا UI آپدیت شود

Answer

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

Answer

از `setState` مثل React استفاده کنید

Question 38

هزینه یک آپدیت immutable روی فیلدی در عمق `state.a.b.c` با structural sharing چقدر است؟

Accepted Answer

فقط objectهای مسیر از ریشه تا آن فیلد کپی می‌شوند؛ بقیه reference خود را حفظ می‌کنند

Answer

کل درخت state به‌صورت deep clone کپی می‌شود

Answer

هیچ object جدیدی ساخته نمی‌شود

Answer

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

Question 39

در اپ Redux با ۵۰۰ کامپوننت متصل، چرا selectorهای سنگین (مثل sort بدون memo) حتی بدون re-render کند هستند؟

Accepted Answer

همه selectorهای subscribe‌شده بعد از هر dispatch اجرا می‌شوند تا تغییر بررسی شود

Answer

selectorها فقط یک‌بار در mount اجرا می‌شوند

Answer

Redux selectorها را روی سرور اجرا می‌کند

Answer

selectorها فقط هنگام رندر والد اجرا می‌شوند

Question 40

در یک store normalized، نتایج صفحه‌بندی‌شده با فیلترهای مختلف چگونه نگهداری می‌شوند؟

Accepted Answer

entityها یک‌بار در `entities` و برای هر query/صفحه یک لیست مرتب از idها

Answer

برای هر فیلتر یک کپی کامل از objectها

Answer

فقط آخرین صفحه نگه داشته می‌شود و بقیه حذف می‌شوند

Answer

همه entityها در یک آرایه بدون id

Question 41

`useEffect(() => { const id = setInterval(() => setCount(count + 1), 1000); return () => clearInterval(id); }, [])` چه باگی دارد؟

Accepted Answer

closure مقدار اولیه `count` را نگه می‌دارد و شمارنده روی 1 می‌ماند؛ از `setCount(c => c + 1)` استفاده کنید

Answer

interval هرگز پاک نمی‌شود

Answer

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

Answer

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

Question 42

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

Accepted Answer

reset همه storeها، `queryClient.clear()` و پاک کردن storage persist‌شده

Answer

فقط حذف token کافی است

Answer

فقط redirect به صفحه login

Answer

افزایش `staleTime` برای همه queryها

Question 43

تست‌ها به‌صورت جداگانه پاس می‌شوند ولی با هم شکست می‌خورند. با store سراسری module-level، علت احتمالی چیست؟

Accepted Answer

state بین تست‌ها نشت می‌کند؛ برای هر تست store جدید بسازید یا آن را reset کنید

Answer

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

Answer

store در محیط تست کار نمی‌کند

Answer

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

Question 44

چرا dispatch کردن هر keystroke یک فرم بزرگ به Redux معمولاً ضدالگو است؟

Accepted Answer

هر کاراکتر همه selectorها و middlewareها را اجرا می‌کند در حالی که این state موقت و محلی است

Answer

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

Answer

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

Answer

چون DevTools فقط ۱۰ action نگه می‌دارد

Question 45

backend با read replica و eventual consistency کار می‌کند؛ بعد از mutation، refetch ناشی از invalidate گاهی داده قدیمی برمی‌گرداند. راه‌حل مناسب سمت کلاینت؟

Accepted Answer

نوشتن پاسخ mutation مستقیم در cache با `setQueryData` و تأخیر یا شرط‌گذاری روی invalidate

Answer

حذف cache و fetch در هر رندر

Answer

افزایش `retry` به 10

Answer

نادیده گرفتن پاسخ mutation

Question 46

در ایجاد optimistic یک آیتم، چرا از شناسه موقت سمت کلاینت (مثل UUID) استفاده می‌شود و چه نکته‌ای دارد؟

Accepted Answer

برای key رندر و ارجاع قبل از پاسخ سرور؛ باید بعداً با id سرور جایگزین و ارجاع‌ها به‌روز شوند

Answer

چون سرور هرگز id برنمی‌گرداند

Answer

برای رمزنگاری آیتم

Answer

هیچ نکته‌ای ندارد و id موقت همیشگی است

Question 47

تیمی داده را با React Query fetch می‌کند و در `onSuccess` آن را در Redux هم کپی می‌کند. مشکل اصلی چیست؟

Accepted Answer

دو منبع حقیقت؛ refetch و invalidate فقط cache را آپدیت می‌کنند و Redux قدیمی می‌ماند

Answer

React Query نمی‌تواند داده را به Redux بدهد

Answer

Redux داده سرور را نمی‌پذیرد

Answer

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

Question 48

والد `user` را fetch می‌کند و فقط بعد از رسیدن آن، فرزند رندر شده و `posts` را fetch می‌کند. این الگو چه مشکلی دارد؟

Accepted Answer

waterfall درخواست‌ها؛ درخواست‌های مستقل باید موازی یا با prefetch در سطح route/loader ارسال شوند

Answer

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

Answer

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

Answer

React اجازه fetch در فرزند را نمی‌دهد

Question 49

`createSelector([s => s.items.map(i => i.id)], ids => ...)` چرا memo مؤثری ندارد؟

Accepted Answer

input selector هر بار آرایه جدید برمی‌گرداند، پس result function همیشه دوباره اجرا می‌شود

Answer

چون `createSelector` فقط با رشته کار می‌کند

Answer

چون result function نباید آرایه بگیرد

Answer

memo کاملاً مؤثر است

Question 50

دو کاربر هم‌زمان یک رکورد را ویرایش می‌کنند و ذخیره دومی تغییرات اولی را بی‌صدا پاک می‌کند. راه‌حل استاندارد؟

Accepted Answer

optimistic concurrency control: ارسال version یا ETag با `If-Match` و رد درخواست با 412 در صورت تغییر

Answer

قفل کردن کل پایگاه داده هنگام باز شدن فرم

Answer

ذخیره خودکار هر ۱۰ میلی‌ثانیه

Answer

پذیرفتن last-write-wins بدون اطلاع کاربر

مدیریت State · سینیور · 50

normalize کردن state چه کمکی می‌کند؟