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

Question 1

چه زمانی state محلی کافی است؟

Accepted Answer

وقتی فقط یک کامپوننت/شاخه نزدیک به آن نیاز دارد

Answer

همیشه باید global باشد

Answer

فقط برای theme

Answer

هرگز نباید local باشد

Question 2

Context برای چه مناسب‌تر است؟

Accepted Answer

داده نسبتاً پایدار مثل theme/locale/auth

Answer

هر keystroke در یک input سنگین با صدها consumer

Answer

جایگزین کامل شبکه

Answer

فقط برای CSS

Question 3

جریان داده در Flux/Redux چگونه است؟

Accepted Answer

یک‌طرفه: View → Action → Store → View

Answer

دوطرفه آزاد بین همه لایه‌ها

Answer

فقط از Store به DOM بدون action

Answer

تصادفی

Question 4

Prop drilling یعنی چه؟

Accepted Answer

عبور props از چند لایه کامپوننت که خودشان به آن نیازی ندارند

Answer

حذف props بلااستفاده

Answer

ارسال props به سرور

Answer

تغییر مستقیم props در فرزند

Question 5

چرا نباید state را مستقیم mutate کرد (`state.items.push(x)`)؟

Accepted Answer

reference عوض نمی‌شود و React/selectorها تغییر را تشخیص نمی‌دهند

Answer

چون `push` در JS وجود ندارد

Answer

چون باعث خطای syntax می‌شود

Answer

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

Question 6

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

Accepted Answer

هنگام رندر محاسبه شود نه در state جدا

Answer

در state سوم ذخیره و با effect sync شود

Answer

در localStorage ذخیره شود

Answer

در یک ref نگه داشته شود

Question 7

اصل «Single source of truth» یعنی چه؟

Accepted Answer

هر داده فقط یک مالک و یک محل نگهداری داشته باشد

Answer

فقط یک کامپوننت در اپ باشد

Answer

فقط یک فایل در پروژه

Answer

همه داده در سرور باشد

Question 8

چرا فیلتر و صفحه‌بندی را در URL (query string) نگه داریم؟

Accepted Answer

قابل اشتراک، bookmark و سازگار با back/forward است

Answer

چون امن‌ترین محل برای رمز عبور است

Answer

چون از state سریع‌تر است

Answer

چون SEO را حذف می‌کند

Question 9

یک action در Redux چیست؟

Accepted Answer

یک object ساده با فیلد `type` (و معمولاً `payload`)

Answer

تابعی که مستقیماً state را تغییر می‌دهد

Answer

یک کامپوننت React

Answer

یک درخواست HTTP

Question 10

اگر در یک event handler سه بار `setCount(count + 1)` صدا زده شود و `count` برابر 0 باشد، نتیجه چیست و راه درست چیست؟

Accepted Answer

نتیجه 1 است؛ باید از `setCount(c => c + 1)` استفاده کرد

Answer

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

Answer

React خطا می‌دهد چون set چندبار صدا زده شده

Answer

نتیجه 1 است؛ باید از `useEffect` استفاده کرد

Question 11

چرا `console.log(name)` بلافاصله بعد از `setName("Ali")` هنوز مقدار قبلی را چاپ می‌کند؟

Accepted Answer

state در رندر بعدی آپدیت می‌شود و `name` در این رندر یک snapshot ثابت است

Answer

چون `setName` یک Promise برمی‌گرداند که باید await شود

Answer

چون `console.log` در React غیرفعال است

Answer

چون رشته‌ها در JS قابل تغییر نیستند

Question 12

دو کامپوننت هم‌سطح (sibling) باید یک مقدار مشترک را بخوانند و تغییر دهند. ساده‌ترین راه چیست؟

Accepted Answer

state را به نزدیک‌ترین والد مشترک ببریم و از طریق props پاس دهیم

Answer

در هر دو کامپوننت یک `useState` جدا بسازیم و با effect همگام کنیم

Answer

حتماً Redux نصب کنیم

Answer

مقدار را در یک متغیر global در ماژول نگه داریم

Question 13

input کنترل‌شده (controlled) چیست؟

Accepted Answer

inputی که `value` آن از state می‌آید و با `onChange` آپدیت می‌شود

Answer

inputی که فقط با `defaultValue` مقدار می‌گیرد

Answer

inputی که مقدارش با `ref` از DOM خوانده می‌شود

Answer

inputی که غیرفعال (disabled) است

Question 14

چه زمانی `useReducer` معمولاً از `useState` مناسب‌تر است؟

Accepted Answer

وقتی چند مقدار مرتبط با منطق آپدیت پیچیده داریم

Answer

وقتی فقط یک boolean ساده داریم

Answer

وقتی می‌خواهیم داده را از سرور cache کنیم

Answer

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

Question 15

اگر کامپوننتی `useContext(ThemeContext)` را صدا بزند ولی هیچ Provider بالای آن نباشد، چه برمی‌گردد؟

Accepted Answer

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

Answer

همیشه `null`

Answer

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

Answer

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

Question 16

وقتی `value` یک Context Provider تغییر کند، چه اتفاقی می‌افتد؟

Accepted Answer

همه کامپوننت‌هایی که آن Context را مصرف می‌کنند re-render می‌شوند

Answer

فقط کامپوننتی که فیلد تغییرکرده را می‌خواند re-render می‌شود

Answer

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

Answer

کل صفحه reload می‌شود

Question 17

در Redux، تنها راه تغییر state چیست؟

Accepted Answer

`dispatch` کردن یک action

Answer

تغییر مستقیم `store.getState()`

Answer

فراخوانی `store.setState()`

Answer

تغییر props کامپوننت

Question 18

امضای (signature) یک reducer کدام است؟

Accepted Answer

`(state, action) => newState`

Answer

`(action) => void`

Answer

`(state) => Promise<state>`

Answer

`(dispatch, getState) => void`

Question 19

هوک `useSelector` در react-redux چه کاری انجام می‌دهد؟

Accepted Answer

بخشی از state را از store می‌خواند و به تغییرات آن subscribe می‌کند

Answer

یک action را dispatch می‌کند

Answer

یک store جدید می‌سازد

Answer

یک reducer جدید ثبت می‌کند

Question 20

چرا اپ را با `<Provider store={store}>` در react-redux می‌پوشانیم؟

Accepted Answer

تا store در دسترس هوک‌هایی مثل `useSelector` و `useDispatch` قرار گیرد

Answer

تا state به‌صورت خودکار در سرور ذخیره شود

Answer

تا Redux بتواند CSS را مدیریت کند

Answer

تا reducerها به‌صورت async اجرا شوند

Question 21

`createSlice` در Redux Toolkit چه چیزی تولید می‌کند؟

Accepted Answer

reducer و action creatorها بر اساس نام reducerهای تعریف‌شده

Answer

فقط یک کامپوننت React

Answer

یک API client برای fetch

Answer

یک فایل CSS

Question 22

`configureStore` نسبت به `createStore` قدیمی چه چیزی به‌صورت پیش‌فرض اضافه می‌کند؟

Accepted Answer

thunk middleware، اتصال DevTools و چک‌های توسعه مثل تشخیص mutation

Answer

یک سرور GraphQL

Answer

ذخیره خودکار در localStorage

Answer

رندر سمت سرور

Question 23

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

Accepted Answer

چند reducer را ترکیب می‌کند تا هرکدام یک کلید از state را مدیریت کنند

Answer

چند store را در یک store ادغام می‌کند

Answer

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

Answer

reducerها را به middleware تبدیل می‌کند

Question 24

Redux معمولاً چند store را برای یک اپ توصیه می‌کند؟

Accepted Answer

یک store با چند slice

Answer

یک store برای هر کامپوننت

Answer

یک store برای هر صفحه

Answer

هیچ store؛ فقط Context

Question 25

کدام مقدار نباید در state یا action در Redux قرار گیرد؟

Accepted Answer

Promise، تابع یا class instance

Answer

یک رشته

Answer

یک آرایه از اعداد

Answer

یک object ساده

Question 26

کدام قابلیت Redux DevTools به دیباگ کمک زیادی می‌کند؟

Accepted Answer

مشاهده تاریخچه actionها و time-travel بین stateها

Answer

فشرده‌سازی خودکار bundle

Answer

تبدیل کد به TypeScript

Answer

اجرای تست‌های واحد

Question 27

در Zustand، `create((set) => ({ count: 0 }))` چه چیزی برمی‌گرداند؟

Accepted Answer

یک hook که بدون نیاز به Provider در کامپوننت‌ها استفاده می‌شود

Answer

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

Answer

یک reducer برای Redux

Answer

یک Context خام React

Question 28

در Zustand، `set({ count: 1 })` با بقیه فیلدهای state چه می‌کند؟

Accepted Answer

آن‌ها را حفظ می‌کند؛ merge سطحی (shallow) در سطح اول انجام می‌شود

Answer

همه را پاک می‌کند و فقط `count` می‌ماند

Answer

به‌صورت عمیق (deep) همه objectهای تودرتو را merge می‌کند

Answer

خطا می‌دهد چون باید کل state پاس شود

Question 29

چرا در Zustand بهتر است `useStore(s => s.count)` بنویسیم به‌جای `useStore()`؟

Accepted Answer

تا کامپوننت فقط با تغییر `count` re-render شود

Answer

چون `useStore()` بدون آرگومان خطا می‌دهد

Answer

چون selector داده را در localStorage ذخیره می‌کند

Answer

چون selector کد را async می‌کند

Question 30

در Jotai، `const countAtom = atom(0)` و `useAtom(countAtom)` چه می‌دهد؟

Accepted Answer

یک جفت `[value, setValue]` شبیه `useState` که بین کامپوننت‌ها مشترک است

Answer

یک store سراسری Redux

Answer

یک query برای fetch داده

Answer

یک ref که باعث re-render نمی‌شود

Question 31

نقش `queryKey` در `useQuery` چیست؟

Accepted Answer

شناسه یکتای داده در cache؛ کامپوننت‌های با key یکسان داده مشترک می‌گیرند

Answer

آدرس URL درخواست HTTP

Answer

کلید API برای احراز هویت

Answer

نام کامپوننت برای DevTools

Question 32

در اولین رندر `useQuery` (بدون cache)، مقدار `data` چیست؟

Accepted Answer

`undefined` و وضعیت `pending` است

Answer

یک آرایه خالی `[]`

Answer

`null` و وضعیت `success` است

Answer

یک Promise

Question 33

`useMutation` در React Query برای چه استفاده می‌شود؟

Accepted Answer

عملیات تغییر داده در سرور مثل POST، PUT و DELETE

Answer

خواندن و cache کردن داده با GET

Answer

mutate کردن مستقیم state محلی

Answer

تغییر استایل کامپوننت

Question 34

چرا وقتی به تب مرورگر برمی‌گردید، React Query داده را دوباره fetch می‌کند؟

Accepted Answer

گزینه `refetchOnWindowFocus` به‌طور پیش‌فرض برای داده‌های stale فعال است

Answer

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

Answer

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

Answer

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

Question 35

تفاوت اصلی server state با client state چیست؟

Accepted Answer

server state مالکش سرور است و ممکن است بدون اطلاع ما قدیمی (stale) شود

Answer

server state همیشه کوچک‌تر است

Answer

client state هرگز تغییر نمی‌کند

Answer

server state فقط در cookie ذخیره می‌شود

Question 36

برای ذخیره یک object در `localStorage` چه باید کرد؟

Accepted Answer

با `JSON.stringify` ذخیره و با `JSON.parse` خوانده شود

Answer

مستقیم object را با `setItem` ذخیره کرد

Answer

از `toString()` استفاده کرد

Answer

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

Question 37

تفاوت `sessionStorage` با `localStorage` چیست؟

Accepted Answer

`sessionStorage` به یک تب محدود است و با بستن تب پاک می‌شود

Answer

`sessionStorage` روی سرور ذخیره می‌شود

Answer

`sessionStorage` ظرفیت نامحدود دارد

Answer

`sessionStorage` بین همه تب‌ها مشترک است

Question 38

چرا خواندن `localStorage` در بدنه کامپوننت در Next.js ممکن است خطای `window is not defined` بدهد؟

Accepted Answer

چون کامپوننت روی سرور هم رندر می‌شود و آنجا `window` وجود ندارد

Answer

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

Answer

چون باید ابتدا `localStorage` را import کرد

Answer

چون `localStorage` فقط در Safari وجود دارد

Question 39

چطور state داخلی یک فرم را هنگام عوض شدن کاربر انتخاب‌شده به‌طور کامل reset کنیم؟

Accepted Answer

با دادن `key={userId}` به کامپوننت فرم

Answer

با reload کردن صفحه

Answer

با پاک کردن cache مرورگر

Answer

با تغییر نام کامپوننت

Question 40

React state یک کامپوننت را بر چه اساسی حفظ می‌کند؟

Accepted Answer

نوع کامپوننت و موقعیت آن در درخت رندر

Answer

نام متغیر state

Answer

آدرس فایل کامپوننت

Answer

ترتیب import‌ها

Question 41

تفاوت تغییر `ref.current` با فراخوانی setter در `useState` چیست؟

Accepted Answer

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

Answer

تغییر ref کل اپ را re-render می‌کند

Answer

ref بعد از هر رندر reset می‌شود

Answer

ref فقط برای عناصر DOM قابل استفاده است

Question 42

state برابر `{ name, age }` است. برای تغییر فقط `name` کدام درست است؟

Accepted Answer

`setUser({ ...user, name: "Sara" })`

Answer

`setUser({ name: "Sara" })`

Answer

`user.name = "Sara"; setUser(user)`

Answer

`setUser("Sara")`

Question 43

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

Accepted Answer

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

Answer

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

Answer

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

Answer

نسخه اول فقط یک‌بار اجرا می‌شود

Question 44

کدام روش یک آیتم را به‌صورت immutable از آرایه state حذف می‌کند؟

Accepted Answer

`setItems(items.filter(i => i.id !== id))`

Answer

`items.splice(index, 1); setItems(items)`

Answer

`delete items[index]; setItems(items)`

Answer

`items.pop(); setItems(items)`

Question 45

برای تغییر `done` یک todo خاص در آرایه state کدام روش درست است؟

Accepted Answer

`setTodos(todos.map(t => t.id === id ? { ...t, done: !t.done } : t))`

Answer

`todos.find(t => t.id === id).done = true; setTodos(todos)`

Answer

`setTodos(todos.forEach(t => t.done = true))`

Answer

`setTodos([...todos]); todos[0].done = true`

Question 46

اگر setter را با همان مقدار فعلی صدا بزنیم (`setCount(5)` وقتی `count` برابر 5 است)، چه می‌شود؟

Accepted Answer

React با مقایسه `Object.is` تشخیص می‌دهد و از re-render فرزندان صرف‌نظر می‌کند

Answer

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

Answer

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

Answer

مقدار به `undefined` تغییر می‌کند

Question 47

کدام مورد بهترین گزینه برای state سراسری (global) است؟

Accepted Answer

اطلاعات کاربر واردشده و تم اپ

Answer

مقدار تایپ‌شده در یک input جستجوی محلی

Answer

باز یا بسته بودن یک dropdown

Answer

hover بودن یک دکمه

Question 48

چرا React Hook Form در فرم‌های بزرگ re-render کمتری دارد؟

Accepted Answer

چون به‌طور پیش‌فرض از inputهای uncontrolled و ref استفاده می‌کند

Answer

چون فرم را روی سرور رندر می‌کند

Answer

چون validation را کاملاً حذف می‌کند

Answer

چون هر فیلد را در Redux ذخیره می‌کند

Question 49

کدام جمله درباره React Context دقیق‌تر است؟

Accepted Answer

Context ابزار انتقال مقدار در درخت است و state را خودش مدیریت نمی‌کند

Answer

Context یک کتابخانه کامل state management با middleware است

Answer

Context داده را به‌طور خودکار در localStorage ذخیره می‌کند

Answer

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

Question 50

در یک Client Component در Next.js، مقدار `?page=2` از URL را با کدام hook می‌خوانیم؟

Accepted Answer

`useSearchParams()` و سپس `searchParams.get("page")`

Answer

`useState("page")`

Answer

`useContext(URL)`

Answer

`useRef(window.page)`

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

چه زمانی state محلی کافی است؟