🔄 Data Fetching in React — useEffect, React Query & Best Practices

React doesn't ship a data-fetching API. Your options:

• useEffect + fetch — fine for simple cases
• React Query (TanStack Query) — caching, retries, dedup, refetch on focus — production default
• SWR — similar idea, simpler API
• RTK Query — if you already use Redux Toolkit
• React Router data APIs — loaders/actions tied to routes

🧪 The DIY pattern (useEffect)

function User({ id }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const ctrl = new AbortController();
    setLoading(true);
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.ok ? r.json() : Promise.reject(r.status))
      .then(setUser)
      .catch(e => { if (e.name !== 'AbortError') setError(e); })
      .finally(() => setLoading(false));
    return () => ctrl.abort();
  }, [id]);

  if (loading) return <Spinner />;
  if (error) return <ErrorBox err={error} />;
  return <Profile user={user} />;
}

⚠️ Race conditions

If id changes from A → B quickly, response A might land AFTER B's, overwriting the right data. Cancel with AbortController in cleanup.

💎 Why React Query wins for real apps

• Automatic caching + dedup
• Retries on failure
• Refetch on window focus / reconnect
• Built-in loading/error/success state
• Pagination + infinite scroll utilities

import { useQuery } from '@tanstack/react-query';
const { data, isLoading, error } = useQuery({
  queryKey: ['user', id],
  queryFn: () => fetch(`/api/users/${id}`).then(r => r.json()),
});