🤝 اگر تو پروژه‌های 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

کتابخونه 🐻 Zustand یه state manager مینیمال برای React هست که بدون ceremony اضافی، state سراسری رو برات حل می‌کنه.

مزیتش نسبت به Redux و بقیه چیه؟
• API خیلی ساده و مستقیم
• بدون providerهای تو در تو؛ فقط یک store
• performance عالی با رندر کم‌تر کامپوننت‌ها
• پشتیبانی از TypeScript بدون دردسر

یه مثال ساده:

npm install zustand

import { create } from 'zustand'

const useBearStore = create((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}))

function Counter() {
  const bears = useBearStore((state) => state.bears)
  const increase = useBearStore((state) => state.increase)

  return <button onClick={increase}>Bears: {bears}</button>
}

برای پروژه‌هایی که Redux براشون زیادی سنگینه، Zustand گزینه‌ایه که هم کد رو تمیز نگه می‌داره هم مقیاس‌پذیره. مخصوصاً برای dashboardها، panelهای ادمین و appهای data-heavy خیلی جواب می‌ده.

مستندات و سورس:
GitHub
Docs

یک بار تو یه پروژه واقعی تستش کن، معمولاً بعدش برگردوندنش به عقب سخته 😄

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

👤 Developix

💎 Channel: @DevelopixJavascript

💠 نسخه جدید سوپرست تایپ‌اسکریپت (Typescript) منتشر شده است

🔸 ارتقا از نسخه 6.0.3 به 7.0.2

🔹 لیست تغییرات این نسخه:


🔖 #typescript, #web, #js, #react, #vue, #release

💎 @DevelopixJavascript