// ❌ НЕ РОБІТЬ ТАК
function BadComponent() {
  const data = axios.get('/api/data'); // 😱 Запит буде виконуватись при кожному рендері!

  return <div>{data.toString()}</div>;
}

import axios from 'axios';

// Створюємо єдиний екземпляр для всього додатку
export const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'https://api.escuelajs.co/api/v1',
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 10000, // 10 секунд
});

// Interceptor для додавання токена (якщо є)
apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Interceptor для глобальної обробки помилок
apiClient.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Логіка для розлогіну користувача
      console.warn('Unauthorized! Redirecting to login...');
      // window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

import { apiClient } from './axios.client';

export const ProductsService = {
  // Отримати всі продукти
  getAll: async (params, signal) => {
    const { data } = await apiClient.get('/products', { params, signal });
    return data;
  },

  // Отримати один за ID
  getById: async (id, signal) => {
    const { data } = await apiClient.get(`/products/${id}`, { signal });
    return data;
  },

  // Створити продукт
  create: async (productData) => {
    const { data } = await apiClient.post('/products', productData);
    return data;
  }
};

import { useState, useEffect, useRef } from 'react';
import axios from 'axios';

export function useFetch(fetchFn, dependencies = []) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Зберігаємо функцію у ref, щоб уникнути зайвих ререндерів
  const fetchFnRef = useRef(fetchFn);

  useEffect(() => {
    fetchFnRef.current = fetchFn;
  }, [fetchFn]);

  useEffect(() => {
    const controller = new AbortController();
    
    const fetchData = async () => {
      try {
        setLoading(true);
        setError(null);
        
        // Передаємо signal у функцію запиту
        const result = await fetchFnRef.current(controller.signal);
        
        setData(result);
      } catch (err) {
        if (!axios.isCancel(err)) {
          setError(err.response?.data?.message || err.message);
        }
      } finally {
        if (!controller.signal.aborted) {
          setLoading(false);
        }
      }
    };

    fetchData();

    return () => {
      controller.abort();
    };
  }, dependencies); // Залежить від переданих параметрів (наприклад, [categoryId])

  return { data, loading, error };
}

import { useFetch } from '../hooks/useFetch';
import { ProductsService } from '../api/products.service';

export function ProductList({ categoryId }) {
  // Хук бере на себе всю складність життєвого циклу
  // Важливо: обгортаємо виклик сервісу в стрілочну функцію, щоб передати signal
  const { data: products, loading, error } = useFetch(
    (signal) => ProductsService.getAll({ categoryId }, signal),
    [categoryId] // Перезавантажити, якщо змінилась категорія
  );

  if (loading) return <div className="skeleton">Loading...</div>;
  if (error) return <div className="error">{error}</div>;

  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

import { use, Suspense } from 'react';
import { apiClient } from '../api/axios.client';

// 1. Створення ресурсу (простий кеш або запит на рівні модуля)
// В реальності використовуйте бібліотеки типу TanStack Query
const productsPromise = apiClient.get('/products').then(res => res.data);

function ProductList() {
  // 2. Використання `use` для "розгортання" промісу
  // Це призупинить (suspend) компонент, доки дані не завантажаться
  const products = use(productsPromise);

  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

export function Page() {
  return (
    // 3. Suspense обробляє стан завантаження
    <Suspense fallback={<div>Loading products...</div>}>
      <ProductList />
    </Suspense>
  );
}

import { useState } from 'react';
import { apiClient } from '../api/axios.client';

export function LikeButton({ productId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [isLiked, setIsLiked] = useState(false);

  const handleLike = async () => {
    // 1. Оптимістичне оновлення (миттєве)
    const previousLikes = likes;
    const previousIsLiked = isLiked;

    setLikes(prev => isLiked ? prev - 1 : prev + 1);
    setIsLiked(!isLiked);

    try {
      // 2. Реальний запит у фоні
      await apiClient.post(`/products/${productId}/like`);
    } catch (error) {
      // 3. Відкат (Rollback) при помилці
      console.error('Like failed', error);
      setLikes(previousLikes);
      setIsLiked(previousIsLiked);
      alert('Не вдалося поставити лайк :(');
    }
  };

  return (
    <button onClick={handleLike} className={isLiked ? 'liked' : ''}>
      ❤️ {likes}
    </button>
  );
}