useState در مقابل useReducer

useState یک مقدار وضعیت ساده را نگه می‌دارد و به‌طور مستقیم با یک تابع Setter به‌روزرسانی می‌شود، در حالی که useReducer وضعیت را از طریق یک تابع Reducer و ارسال Action ها مدیریت می‌کند و برای وضعیت‌های پیچیده با چند فیلد مرتبط و منطق تغییر پیچیده‌تر مناسب‌تر است.

ویژگی	useState	useReducer
پیچیدگی وضعیت	ساده	پیچیده و چندفیلدی
الگوی به‌روزرسانی	Setter مستقیم	Dispatch با Action
قابلیت تست منطق تغییر	محدودتر	بالا (Reducer خالص)

کِی از useState استفاده کنیم؟

وقتی وضعیت ساده است، مثل یک مقدار بولی، رشته یا عدد که مستقل از سایر وضعیت‌ها تغییر می‌کند.

کِی از useReducer استفاده کنیم؟

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

مثال useState

const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>+</button>

مثال useReducer

function reducer(state, action) {
  switch (action.type) {
    case "increment": return { count: state.count + 1 };
    default: return state;
  }
}
const [state, dispatch] = useReducer(reducer, { count: 0 });

اشتباه رایج

اشتباه رایج استفاده از چند useState جداگانه برای وضعیت‌های به‌شدت به‌هم‌وابسته است؛ این کار باعث می‌شود همگام نگه‌داشتن آن‌ها در به‌روزرسانی‌های همزمان دشوار شود، در حالی که useReducer با یک منبع واحد وضعیت این مشکل را حل می‌کند.

جمع‌بندی

برای وضعیت‌های ساده و مستقل از useState و برای وضعیت‌های پیچیده و به‌هم‌وابسته با منطق تغییر روشن از useReducer استفاده کنید.