Сделали компоненты

src/components/list/product/index.jsx

@@ -1,50 +1,9 @@
-import React from 'react'
 import styles from './index.module.scss'
-
 import ProductCard from '../../card/product'
+import { useProducts } from '../../../hooks/useProducts'
 
 const ProductList = () => {
-	const [products, setProducts] = React.useState([])
-	const [loading, setLoading] = React.useState(true)
-	const [error, setError] = React.useState(null)
-
-	React.useEffect(() => {
-		let cancelled = false
-
-		const getProducts = async () => {
-			try {
-				setLoading(true)
-				setError(null)
-
-				const response = await fetch('http://localhost:8000/products')
-
-				if (!response.ok) {
-					throw new Error(`HTTP error! status: ${response.status}`)
-				}
-
-				const data = await response.json()
-
-				if (!cancelled) {
-					setProducts(data)
-				}
-			} catch (err) {
-				if (!cancelled) {
-					setError(err.message)
-					setProducts([])
-				}
-			} finally {
-				if (!cancelled) {
-					setLoading(false)
-				}
-			}
-		}
-
-		getProducts()
-
-		return () => {
-			cancelled = true
-		}
-	}, [])
+	const { products, loading, error } = useProducts()
 
 	if (loading) {
 		return <div className={styles.loading}>Загрузка продуктов...</div>