Gestión de Estado del Servidor

// ❌ Problemas comunes:
// - Estado manual (loading, error, data)
// - No hay caché automático
// - Refetching manual
// - No hay reintentos automáticos
// - Race conditions posibles
// - Estados inconsistentes

const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

const fetchUsers = async () => {
  setLoading(true);
  setError(null);
  
  try {
    const response = await fetch('/api/users');
    if (!response.ok) {
      throw new Error('Error HTTP: ' + response.status);
    }
    const userData = await response.json();
    setData(userData);
  } catch (err) {
    setError(err.message);
    console.error('Error fetching:', err);
  } finally {
    setLoading(false);
  }
};

useEffect(() => {
  fetchUsers();
}, []);

useEffect(() => {
  if (error) {
    // Lógica de reintento manual...
    const timer = setTimeout(fetchUsers, 5000);
    return () => clearTimeout(timer);
  }
}, [error]);

// ✅ Ventajas:
// - Estados automáticos (isLoading, error, data)
// - Caché inteligente integrado
// - Refetching automático
// - Reintentos con backoff exponencial
// - Sincronización entre pestañas
// - Optimistic updates

const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  staleTime: 5 * 60 * 1000, // 5 min
  retry: 3,
  retryDelay: 1000
});

// ¡Eso es todo! No necesitas useEffect,
// useState, ni lógica de reintentos.