Ressources React | Formation React

🪝 Hooks — Référence rapide

useState

const [state, setState] = useState(initialValue)

État local. Déclenche un re-render à chaque changement.

useEffect

useEffect(() => { /* effet */ return cleanup; }, [deps])

Effets de bord. [] = une fois, [dep] = quand dep change, sans tableau = à chaque render.

useRef

const ref = useRef(null) → ref.current

Référence mutable sans re-render. DOM access ou valeur persistante.

useMemo / useCallback

useMemo(() => calcul, [deps]) | useCallback(fn, [deps])

Mémoïsation. useMemo = valeur, useCallback = fonction.

useReducer

const [state, dispatch] = useReducer(reducer, initialState)

État complexe avec actions. Préféré à useState quand ≥3 états liés.

useContext

const value = useContext(MonContext)

Consomme un Context sans prop drilling.

🧩 Patterns courants

Context + Custom Hook

const ThemeCtx = createContext(null);
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('dark');
  return <ThemeCtx.Provider value={{ theme, setTheme }}>{children}</ThemeCtx.Provider>;
}
function useTheme() {
  const ctx = useContext(ThemeCtx);
  if (!ctx) throw new Error('Missing ThemeProvider');
  return ctx;
}

Formulaire contrôlé

function Form() {
  const [data, setData] = useState({ nom: '', email: '' });
  const handle = (e) => setData(prev => ({ ...prev, [e.target.name]: e.target.value }));
  return <form><input name="nom" value={data.nom} onChange={handle} /></form>;
}

Fetch avec états

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    const ctrl = new AbortController();
    fetch(url, { signal: ctrl.signal })
      .then(r => r.json()).then(setData)
      .catch(e => { if (e.name !== 'AbortError') setError(e.message); })
      .finally(() => setLoading(false));
    return () => ctrl.abort();
  }, [url]);
  return { data, loading, error };
}

🗺️ React Router v6 — Référence

Composants

BrowserRouter — wrapper racine
Routes + Route — définir les routes
Link to="/" — navigation
NavLink — lien avec état actif
Navigate to="/" — redirection JSX
Outlet — routes enfants

Hooks

useNavigate() → navigate('/path')
useParams() → { id, slug }
useSearchParams() → [params, set]
useLocation() → { pathname, ... }

⚡ Performance — Quand utiliser quoi ?

Technique	Quand	Ne pas utiliser si
React.memo	Composant se re-rend souvent avec mêmes props	Props changent souvent
useMemo	Calcul coûteux (>1ms) avec dépendances stables	Calcul simple — overhead > gain
useCallback	Fonction passée à un composant mémoïsé	Composant enfant non mémoïsé
lazy + Suspense	Page/composant lourd non affiché au démarrage	Composant toujours visible
Virtualisation	Liste > 100 items	Petites listes

🔗 Liens utiles

Documentation officielle

react.dev — Documentation React officielle
reactrouter.com — React Router v6
tanstack.com — TanStack Query/Virtual

Outils recommandés

Vite — bundler ultra-rapide
React DevTools — extension Chrome/Firefox
TypeScript — typage statique
ESLint + react-hooks plugin

Librairies populaires

Zustand / Jotai — state management
TanStack Query — data fetching
React Hook Form — formulaires
shadcn/ui — composants UI

📚 Ressources & Cheatsheet React