Bonnes Pratiques

src/
├── components/
│   ├── ui/              # Composants génériques (Button, Input, Modal)
│   ├── layout/          # Header, Footer, Sidebar
│   └── features/        # Composants métier (CartItem, ProductCard)
├── pages/               # Pages de l'app (Home, About, Dashboard)
├── hooks/               # Custom hooks
├── contexts/            # Providers Context
├── services/            # Appels API (fetch, axios)
├── types/               # Types TypeScript partagés
├── utils/               # Fonctions utilitaires
└── App.tsx

// ❌ MAUVAIS : composant géant qui fait tout
function ProductPage() {
  // 20 lignes de state...
  // 15 lignes de useEffect...
  // 10 lignes de handlers...
  return (
    <div>
      {/* 200 lignes de JSX... */}
    </div>
  )
}

// ✅ BON : découpé en composants focalisés
function ProductPage() {
  const product = useProduct()
  return (
    <div>
      <ProductHeader product={product} />
      <ProductGallery images={product.images} />
      <ProductInfo product={product} />
      <AddToCartForm product={product} />
      <ProductReviews productId={product.id} />
    </div>
  )
}

// hooks/use-fetch.ts - Hook réutilisable
import { useState, useEffect } from 'react'

export function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    let cancelled = false

    async function fetchData() {
      try {
        setLoading(true)
        const res = await fetch(url)
        if (!res.ok) throw new Error(`Erreur ${res.status}`)
        const json = await res.json()
        if (!cancelled) setData(json)
      } catch (err) {
        if (!cancelled) setError(err instanceof Error ? err.message : 'Erreur')
      } finally {
        if (!cancelled) setLoading(false)
      }
    }

    fetchData()
    return () => { cancelled = true }
  }, [url])

  return { data, loading, error }
}

// Utilisation : ultra simple !
function Users() {
  const { data: users, loading, error } = useFetch<User[]>('/api/users')

  if (loading) return <p>Chargement...</p>
  if (error) return <p>Erreur : {error}</p>

  return users?.map(u => <p key={u.id}>{u.name}</p>)
}

// Règle d'or : state au plus proche
// ❌ State dans le parent → tout re-rend
function Page() {
  const [searchQuery, setSearchQuery] = useState("")
  return (
    <div>
      <SearchBar value={searchQuery} onChange={setSearchQuery} />
      <HeavyProductList />  {/* Re-rend à chaque frappe ! */}
      <Footer />             {/* Re-rend aussi ! */}
    </div>
  )
}

// ✅ State dans le composant qui l'utilise
function Page() {
  return (
    <div>
      <SearchBar />           {/* Gère son propre state */}
      <HeavyProductList />    {/* Tranquille */}
      <Footer />              {/* Tranquille */}
    </div>
  )
}