🤝 اگر تو پروژه‌های React هنوز برای data fetching از useEffect + fetch استفاده می‌کنی، زمان آشنایی با TanStack Query (react-query) رسیده.

این لایبرری مشکل مدیریت state سرور (data از API) رو حل می‌کنه؛ مثل:
• کش‌کردن requestها
• refetch خودکار داده‌ها
• مدیریت loading / error
• همگام‌سازی دیتا بین تب‌ها و کامپوننت‌ها

نتیجه؟ کد کمتر، باگ کمتر، UX روان‌تر. مخصوصاً تو dashboardها، panelهای ادمین، یا هر جایی که چندین API call داری.

نصب:

npm install @tanstack/react-query

نمونه استفاده ساده:

import { QueryClient, QueryClientProvider,
  useQuery } from '@tanstack/react-query';

const queryClient = new QueryClient();

function Todos() {
  const { data, isLoading, error } = useQuery(['todos'], () =>
    fetch('/api/todos').then(r => r.json())
  );

  if (isLoading) return <span>Loading...</span>;
  if (error) return <span>Error!</span>;
  return <ul>{data.map(t => <li key={t.id}>{t.title}</li>)}</ul>;
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  );
}

مستندات رسمی و مثال‌های بیشتر:
Docs
GitHub

امتحانش کن تو پروژه بعدی‌ات؛ مخصوصاً جاهایی که چند بار از یک API استفاده می‌کنی یا نیاز به refetch هوشمند داری. 🚀

🔖 #Javascript #JS #جاوااسکریپت #JavaScript #React #TanStack_Query #Frontend #State_Management

👤 Developix

💎 Channel: @DevelopixJavascript