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

Question 1

چرا Zustand محبوب شد؟

Accepted Answer

API مینیمال، selector، کم‌boilerplate

Answer

اجباری بودن Provider پیچیده

Answer

حذف کامل React

Answer

فقط برای Vue

Question 2

Redux Toolkit چه چیزی را ساده کرد؟

Accepted Answer

ساخت slice/store و async با boilerplate کمتر

Answer

حذف کامل state

Answer

اجباری کردن class component

Answer

فقط استایل‌دهی

Question 3

server state معمولاً کجا بهتر مدیریت می‌شود؟

Accepted Answer

کتابخانه‌هایی مثل React Query / SWR / RTK Query

Answer

فقط در یک `useState` بدون cache

Answer

فقط CSS variables

Answer

هیچ‌وقت نباید cache شود

Question 4

کدام کار داخل reducer مجاز نیست؟

Accepted Answer

فراخوانی API یا `Math.random()`

Answer

برگرداندن object جدید

Answer

خواندن `action.payload`

Answer

switch روی `action.type`

Question 5

middleware در Redux چه نقشی دارد؟

Accepted Answer

رهگیری actionها بین dispatch و reducer برای async، logging و...

Answer

رندر کامپوننت‌ها

Answer

تعریف route

Answer

استایل‌دهی

Question 6

Optimistic update چیست؟

Accepted Answer

آپدیت UI قبل از تأیید سرور و rollback در صورت خطا

Answer

آپدیت فقط بعد از رفرش صفحه

Answer

نادیده گرفتن خطاهای سرور

Answer

کش کردن دائمی

Question 7

Immer چه کاری انجام می‌دهد؟

Accepted Answer

کد به سبک mutable می‌نویسید و خروجی immutable می‌گیرید

Answer

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

Answer

React را سریع‌تر compile می‌کند

Answer

actionها را تایپ می‌کند

Question 8

مدل atom در Jotai/Recoil چه ویژگی‌ای دارد؟

Accepted Answer

واحدهای کوچک state که فقط consumerهای خودشان را re-render می‌کنند

Answer

یک store بزرگ واحد اجباری

Answer

فقط برای server state

Answer

بدون امکان مشتق‌سازی

Question 9

استراتژی stale-while-revalidate چیست؟

Accepted Answer

داده cache را فوراً نشان بده و در پس‌زمینه دوباره fetch کن

Answer

همیشه منتظر داده تازه بمان

Answer

هرگز fetch مجدد نکن

Answer

cache را در هر رندر پاک کن

Question 10

Provider به شکل `<Ctx.Provider value={{ user, setUser }}>` نوشته شده و consumerها مدام re-render می‌شوند حتی وقتی `user` ثابت است. علت چیست؟

Accepted Answer

object جدید در هر رندر والد ساخته می‌شود؛ باید با `useMemo` پایدارش کرد

Answer

چون `setUser` در هر رندر تغییر می‌کند و نمی‌توان آن را پایدار کرد

Answer

چون Context همیشه هر ثانیه consumerها را رندر می‌کند

Answer

چون باید از `useCallback` روی `user` استفاده کرد

Question 11

در الگوی `useReducer` + Context، چرا `state` و `dispatch` را در دو Context جدا قرار می‌دهند؟

Accepted Answer

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

Answer

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

Answer

چون `dispatch` فقط در Context دوم کار می‌کند

Answer

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

Question 12

`createAsyncThunk("users/fetch", ...)` به‌طور خودکار چه actionهایی dispatch می‌کند؟

Accepted Answer

`users/fetch/pending`، `users/fetch/fulfilled` و `users/fetch/rejected`

Answer

`users/fetch/start` و `users/fetch/end`

Answer

فقط `users/fetch` بعد از پایان درخواست

Answer

`users/fetch/loading` و `users/fetch/error`

Question 13

کاربرد `extraReducers` در `createSlice` چیست؟

Accepted Answer

پاسخ به actionهایی که خارج از این slice تعریف شده‌اند (مثل thunkها)

Answer

تعریف action creatorهای جدید برای slice

Answer

اضافه کردن middleware به store

Answer

persist کردن slice

Question 14

`createEntityAdapter` در RTK چه چیزی فراهم می‌کند؟

Accepted Answer

ساختار normalized شامل `ids` و `entities` به‌همراه reducerهای CRUD و selectorهای آماده

Answer

اتصال خودکار به REST API

Answer

یک ORM برای پایگاه داده سرور

Answer

تولید فرم از روی schema

Question 15

در RTK Query، `providesTags` و `invalidatesTags` چه کاری انجام می‌دهند؟

Accepted Answer

queryها را برچسب‌گذاری می‌کنند و mutation با invalidate کردن تگ، refetch خودکار آن‌ها را راه می‌اندازد

Answer

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

Answer

هدرهای HTTP را تنظیم می‌کنند

Answer

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

Question 16

`useSelector(s => ({ a: s.a, b: s.b }))` چه مشکلی دارد؟

Accepted Answer

هر بار object جدید برمی‌گرداند و کامپوننت با هر dispatch رندر می‌شود

Answer

`useSelector` نمی‌تواند object برگرداند

Answer

باعث mutate شدن state می‌شود

Answer

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

Question 17

در Zustand v5، برای انتخاب چند فیلد مثل `s => ({ a: s.a, b: s.b })` بدون re-render اضافه چه می‌کنیم؟

Accepted Answer

selector را با `useShallow` بپوشانیم

Answer

از `JSON.stringify` روی خروجی استفاده کنیم

Answer

store را به دو store تقسیم کنیم

Answer

از `useMemo` روی کل store استفاده کنیم

Question 18

در middleware `persist` در Zustand، گزینه `partialize` چه کاری انجام می‌دهد؟

Accepted Answer

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

Answer

state را به چند تب تقسیم می‌کند

Answer

store را به چند slice تقسیم می‌کند

Answer

رمزنگاری داده ذخیره‌شده را فعال می‌کند

Question 19

چطور در Zustand خارج از کامپوننت (مثلاً در یک interceptor) state را بخوانیم یا تغییر دهیم؟

Accepted Answer

با `useStore.getState()` و `useStore.setState()`

Answer

فقط با صدا زدن `useStore()` در همان تابع

Answer

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

Answer

با ساختن یک Provider جدید

Question 20

در Zustand، کامپوننتی که `const { inc } = useStore()` می‌نویسد کی re-render می‌شود؟

Accepted Answer

با هر تغییری در هر بخش store، حتی اگر `inc` ثابت باشد

Answer

فقط وقتی `inc` تغییر کند

Answer

هرگز

Answer

فقط در mount اولیه

Question 21

`const doubled = atom((get) => get(countAtom) * 2)` در Jotai چیست؟

Accepted Answer

یک atom مشتق فقط‌خواندنی که با تغییر `countAtom` دوباره محاسبه می‌شود

Answer

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

Answer

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

Answer

یک کپی مستقل از `countAtom`

Question 22

در Jotai برای نگه داشتن مقدار یک atom در localStorage از چه استفاده می‌شود؟

Accepted Answer

`atomWithStorage` از `jotai/utils`

Answer

`atom.persist()`

Answer

`useAtom(atom, { save: true })`

Answer

Jotai به‌طور پیش‌فرض همه atomها را ذخیره می‌کند

Question 23

تفاوت `staleTime` و `gcTime` در React Query چیست؟

Accepted Answer

`staleTime` تعیین می‌کند داده تا کی تازه است؛ `gcTime` تعیین می‌کند cache بلااستفاده تا کی در حافظه بماند

Answer

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

Answer

`gcTime` فاصله polling را تعیین می‌کند

Answer

`staleTime` زمان timeout درخواست HTTP است

Question 24

بعد از موفقیت یک mutation برای افزودن todo، رایج‌ترین راه به‌روز کردن لیست چیست؟

Accepted Answer

`queryClient.invalidateQueries({ queryKey: ["todos"] })` در `onSuccess`

Answer

reload کردن کل صفحه

Answer

ساختن یک `QueryClient` جدید

Answer

افزایش `gcTime` به بی‌نهایت

Question 25

چرا متغیرهایی مثل `page` و `filter` باید داخل `queryKey` باشند؟

Accepted Answer

تا هر ترکیب cache جدا داشته باشد و تغییرشان fetch جدید را راه بیندازد

Answer

چون queryFn به آن‌ها دسترسی ندارد

Answer

برای اینکه درخواست سریع‌تر ارسال شود

Answer

فقط برای نمایش در DevTools

Question 26

برای query وابسته (مثلاً fetch پروژه‌ها فقط بعد از دریافت `userId`) چه می‌کنیم؟

Accepted Answer

گزینه `enabled: !!userId` را تنظیم می‌کنیم

Answer

`useQuery` را داخل یک `if` صدا می‌زنیم

Answer

از `setTimeout` برای تأخیر استفاده می‌کنیم

Answer

query دوم را در `useEffect` صدا می‌زنیم

Question 27

در صفحه‌بندی با React Query v5، چطور هنگام رفتن به صفحه بعد از نمایش loading خالی جلوگیری کنیم؟

Accepted Answer

`placeholderData: keepPreviousData` تا داده صفحه قبل تا رسیدن داده جدید بماند

Answer

`staleTime: 0`

Answer

`refetchOnWindowFocus: true`

Answer

`gcTime: 0`

Question 28

در `useInfiniteQuery`، تابع `getNextPageParam` چه نقشی دارد؟

Accepted Answer

از آخرین صفحه، پارامتر صفحه بعد را محاسبه می‌کند یا با `undefined` پایان را اعلام می‌کند

Answer

تعداد کل صفحات را از سرور می‌گیرد

Answer

صفحه قبلی را از cache حذف می‌کند

Answer

ترتیب صفحات را برعکس می‌کند

Question 29

وقتی سرور در پاسخ mutation، object کامل به‌روزشده را برمی‌گرداند، بهتر است چه کنیم؟

Accepted Answer

با `queryClient.setQueryData` همان پاسخ را مستقیم در cache بنویسیم

Answer

کل cache را با `queryClient.clear()` پاک کنیم

Answer

پاسخ را نادیده بگیریم و صفحه را reload کنیم

Answer

پاسخ را در `useState` جداگانه کپی کنیم

Question 30

در optimistic update با React Query، چرا در `onMutate` ابتدا `cancelQueries` صدا زده می‌شود؟

Accepted Answer

تا refetch در جریان، داده optimistic را با داده قدیمی بازنویسی نکند

Answer

تا mutation سریع‌تر به سرور برسد

Answer

چون بدون آن `setQueryData` کار نمی‌کند

Answer

تا cache کامل پاک شود

Question 31

تفاوت `isLoading` و `isFetching` در React Query چیست؟

Accepted Answer

`isLoading` فقط در fetch اول بدون داده true است؛ `isFetching` در هر fetch از جمله refetch پس‌زمینه

Answer

هر دو دقیقاً یکسان‌اند

Answer

`isFetching` فقط برای mutationهاست

Answer

`isLoading` در هر refetch true می‌شود

Question 32

گزینه `select` در `useQuery` چه مزیتی دارد؟

Accepted Answer

داده را تبدیل می‌کند و کامپوننت فقط با تغییر خروجی select رندر می‌شود

Answer

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

Answer

تعیین می‌کند کدام endpoint صدا زده شود

Answer

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

Question 33

رفتار پیش‌فرض React Query هنگام خطای یک query در کلاینت چیست؟

Accepted Answer

سه بار با تأخیر exponential دوباره تلاش می‌کند و سپس خطا را نشان می‌دهد

Answer

بلافاصله خطا را نشان می‌دهد

Answer

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

Answer

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

Question 34

در SWR، `mutate("/api/user")` بدون داده چه کاری انجام می‌دهد؟

Accepted Answer

cache آن key را revalidate می‌کند و داده را دوباره fetch می‌کند

Answer

cache آن key را برای همیشه حذف می‌کند

Answer

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

Answer

خطا می‌دهد چون داده لازم است

Question 35

اگر ده کامپوننت هم‌زمان `useSWR("/api/me")` را صدا بزنند، چند درخواست ارسال می‌شود؟

Accepted Answer

یک درخواست؛ SWR درخواست‌های با key یکسان را در بازه `dedupingInterval` ادغام می‌کند

Answer

ده درخواست

Answer

هیچ درخواستی تا رفرش صفحه

Answer

پنج درخواست

Question 36

`createListenerMiddleware` در RTK برای چه سناریویی مناسب است؟

Accepted Answer

اجرای side effect در واکنش به action یا تغییر state خاص

Answer

تعریف reducerهای جدید

Answer

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

Answer

ساختن selectorهای memo‌شده

Question 37

در redux-saga، `takeLatest` چه رفتاری دارد؟

Accepted Answer

با هر action جدید، task قبلی در حال اجرا را لغو می‌کند و فقط آخرین را اجرا می‌کند

Answer

همه actionها را به‌صورت موازی اجرا می‌کند

Answer

فقط اولین action را اجرا و بقیه را نادیده می‌گیرد

Answer

actionها را در صف قرار می‌دهد و یکی‌یکی اجرا می‌کند

Question 38

در یک case reducer در `createSlice`، کدام کار باعث خطا می‌شود؟

Accepted Answer

هم draft را mutate کنیم و هم یک object جدید return کنیم

Answer

فقط draft را mutate کنیم

Answer

فقط یک state جدید return کنیم

Answer

`action.payload` را بخوانیم

Question 39

در React Hook Form، چه زمانی از `Controller` به‌جای `register` استفاده می‌کنیم؟

Accepted Answer

برای کامپوننت‌های controlled کتابخانه‌های UI که ref به input بومی نمی‌دهند

Answer

برای همه inputهای متنی ساده

Answer

فقط برای ارسال فرم به سرور

Answer

برای غیرفعال کردن validation

Question 40

مزیت استفاده از schema (مثل Zod) با `zodResolver` در فرم‌ها چیست؟

Accepted Answer

قوانین validation یک‌جا تعریف و نوع TypeScript فرم هم از آن استنتاج می‌شود

Answer

دیگر نیازی به validation سمت سرور نیست

Answer

فرم بدون JavaScript کار می‌کند

Answer

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

Question 41

هنگام همگام کردن input جستجو با query string در هر تایپ، چرا `router.replace` بهتر از `router.push` است؟

Accepted Answer

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

Answer

چون `push` روی query string کار نمی‌کند

Answer

چون `replace` درخواست را به سرور نمی‌فرستد ولی `push` می‌فرستد

Answer

چون `replace` state را در localStorage ذخیره می‌کند

Question 42

هوک `useSyncExternalStore` برای چه طراحی شده است؟

Accepted Answer

subscribe امن به storeهای خارج از React در رندر concurrent

Answer

همگام کردن state بین سرور و پایگاه داده

Answer

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

Answer

ساختن Context سریع‌تر

Question 43

برای مدیریت یک store بزرگ در Zustand، الگوی رایج چیست؟

Accepted Answer

الگوی slices: هر بخش یک تابع `(set, get) => ({...})` است که در یک store ترکیب می‌شود

Answer

کپی کل store در هر کامپوننت

Answer

استفاده از یک Context جدا برای هر فیلد

Answer

قرار دادن همه منطق در یک تابع `set` واحد

Question 44

در Next.js، store با persist در localStorage باعث hydration mismatch می‌شود. علت چیست؟

Accepted Answer

سرور مقدار پیش‌فرض را رندر می‌کند ولی کلاینت در رندر اول مقدار ذخیره‌شده را می‌خواند

Answer

چون localStorage روی سرور مقدار متفاوتی دارد

Answer

چون JSON.parse روی سرور کار نمی‌کند

Answer

چون Next.js همه storeها را ممنوع کرده است

Question 45

وقتی شکل state ذخیره‌شده در storage تغییر می‌کند، کاربران قبلی چه مشکلی دارند و راه‌حل چیست؟

Accepted Answer

داده قدیمی با کد جدید ناسازگار است؛ باید `version` و تابع `migrate` تعریف کرد

Answer

مشکلی پیش نمی‌آید چون storage خودکار به‌روز می‌شود

Answer

مرورگر داده قدیمی را خودکار پاک می‌کند

Answer

باید از کاربران خواست مرورگر را دوباره نصب کنند

Question 46

در MobX، کامپوننت پیچیده‌شده با `observer` چگونه تشخیص می‌دهد کی رندر شود؟

Accepted Answer

observableهایی را که هنگام رندر خوانده، خودکار ردیابی می‌کند

Answer

باید dependency array دستی تعریف کرد

Answer

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

Answer

با هر تغییر در هر observable رندر می‌شود

Question 47

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

Accepted Answer

یک رندر؛ automatic batching همه جا اعمال می‌شود

Answer

به تعداد فراخوانی‌ها رندر

Answer

هیچ رندری

Answer

دو رندر ثابت

Question 48

چرا `const queryClient = new QueryClient()` نباید مستقیم در بدنه کامپوننت نوشته شود؟

Accepted Answer

در هر رندر client جدید و cache خالی ساخته می‌شود

Answer

چون `QueryClient` فقط روی سرور کار می‌کند

Answer

چون باید حتماً در فایل `.env` تعریف شود

Answer

چون هر اپ فقط یک query مجاز دارد

Question 49

در RTK Query، چطور اجرای `useGetUserQuery(id)` را تا وقتی `id` موجود نیست متوقف کنیم؟

Accepted Answer

پاس دادن `skipToken` به‌جای آرگومان یا گزینه `{ skip: !id }`

Answer

صدا زدن hook داخل یک شرط `if (id)`

Answer

پاس دادن `undefined` که خودکار skip می‌شود

Answer

حذف endpoint از API

Question 50

در Jotai، قرار دادن بخشی از درخت داخل یک `<Provider>` جدا چه اثری دارد؟

Accepted Answer

آن بخش store مستقل خود را دارد و مقادیر atomها از بیرون جدا می‌شوند

Answer

atomها در آن بخش فقط‌خواندنی می‌شوند

Answer

همه atomها در localStorage ذخیره می‌شوند

Answer

هیچ اثری ندارد چون Jotai همیشه سراسری است

مدیریت State · میدل · 50

چرا Zustand محبوب شد؟