دریافت صریح داده‌ها در React – کنترل درخواست‌های API با دکمه تأیید

مقدمه

در نسخه قبلی اپلیکیشن، هر بار که کاربر در فیلد جستجو تایپ می‌کرد، درخواست جدیدی به API ارسال می‌شد. این رفتار می‌تواند منجر به محدودیت نرخ (Rate Limiting) شود. برای جلوگیری از این مشکل، دریافت داده‌ها را به‌صورت صریح انجام می‌دهیم — یعنی فقط زمانی که کاربر روی دکمهٔ تأیید کلیک کند.

افزودن دکمهٔ تأیید

ابتدا یک دکمهٔ جدید برای تأیید جستجو اضافه می‌کنیم:

<button
  type="button"
  disabled={!searchTerm}
  onClick={handleSearchSubmit}
>
  Submit
</button>

تعریف دو وضعیت مجزا

از دو وضعیت استفاده می‌کنیم: یکی برای مقدار جاری فیلد جستجو (searchTerm) و دیگری برای مقدار تأییدشده که منجر به دریافت داده می‌شود (url):

const [searchTerm, setSearchTerm] = useStorageState('search', 'React');
const [url, setUrl] = React.useState(`${API_ENDPOINT}${searchTerm}`);

const handleSearchInput = (event) => {
  setSearchTerm(event.target.value);
};

const handleSearchSubmit = () => {
  setUrl(`${API_ENDPOINT}${searchTerm}`);
};

دریافت داده با useCallback و useEffect

تابع دریافت داده‌ها را با useCallback تعریف می‌کنیم تا فقط هنگام تغییر url اجرا شود:

const handleFetchStories = React.useCallback(() => {
  dispatchStories({ type: 'STORIES_FETCH_INIT' });
  fetch(url)
    .then((response) => response.json())
    .then((result) => {
      dispatchStories({
        type: 'STORIES_FETCH_SUCCESS',
        payload: result.hits,
      });
    })
    .catch(() =>
      dispatchStories({ type: 'STORIES_FETCH_FAILURE' })
    );
}, [url]);

React.useEffect(() => {
  handleFetchStories();
}, [handleFetchStories]);

مزایای دریافت صریح

• جلوگیری از ارسال درخواست‌های مکرر هنگام تایپ
• کاهش فشار روی API و جلوگیری از خطای محدودیت نرخ
• کنترل کامل بر زمان دریافت داده‌ها
• امکان افزودن debounce یا throttle در مراحل بعدی

جمع‌بندی

با استفاده از دریافت صریح داده‌ها در React، فقط زمانی که کاربر روی دکمهٔ Submit کلیک کند، درخواست به API ارسال می‌شود. این روش باعث افزایش پایداری اپلیکیشن، کاهش خطاهای API و بهبود تجربهٔ کاربری می‌شود.