SmarMaker - Documentation
Docs» 15_training:module4-react-avance:start

Module 4 : React Avancé

Ce module couvre les concepts avancés de React : optimisation des performances avec useMemo et useCallback, création de hooks personnalisés, et gestion d'état global avec Redux.

Prérequis

  • Module 3 complété (useState, useEffect, useRef, useContext)
  • Comprendre les closures JavaScript
  • Comprendre les références vs valeurs

Chapitres

# Chapitre Contenu
1 useCallback et useMemo Optimisation des performances et mémoïsation
2 Custom Hooks Créer vos propres hooks réutilisables
3 Redux et Redux Toolkit Gestion d'état global pour applications complexes

Objectifs du module

À la fin de ce module, vous saurez :

  • Optimiser les re-rendus avec useMemo et useCallback
  • Identifier quand l'optimisation est nécessaire
  • Créer des hooks personnalisés réutilisables
  • Comprendre le pattern Redux (actions, reducers, store)
  • Utiliser Redux Toolkit pour simplifier Redux

Quand utiliser ces concepts ?

Concept Cas d'usage
useMemo Calculs coûteux, transformation de données
useCallback Fonctions passées en props à des composants mémoïsés
Custom Hooks Logique réutilisable entre composants
Redux État partagé entre composants non reliés

Avertissement sur l'optimisation

**"Premature optimization is the root of all evil"** - Donald Knuth

N'optimisez pas par défaut. React est déjà rapide. Utilisez ces outils seulement quand vous constatez un problème de performance réel.

Commencer : useCallback et useMemo →

Previous Next

Made with ❤ by CAP-REL · SmartMaker · GNU AGPL v3+
Code source · Faire un don
SmarMaker - Documentation
Traductions de cette page:
  • Français
  • Deutsch
  • English
  • Español
  • Italiano
  • Nederlands

Table of Contents

Table des matières

  • Module 4 : React Avancé
    • Prérequis
    • Chapitres
    • Objectifs du module
    • Quand utiliser ces concepts ?
    • Avertissement sur l'optimisation
  • SmartAuth
  • SmartMaker - Back (PHP)
    • Mapping Dolibarr - React
  • SmartMaker - Front (React)
    • Animations de pages
    • Architecture
    • Astuces
    • Calendar
    • Composants et pages
    • Configuration du Provider
    • Debug et Logs
    • Hooks SmartCommon
    • PWA (Progressive Web App)
    • Requêtes API
    • Routage
    • SmartCommon
    • Stockage de données
    • Thèmes
    • Traductions
  • HowTo - Pas à pas - Votre première application
    • Développement PHP (back)
    • Développement React (front)
    • Première étape : Module Builder Dolibarr
    • SmartAuth
    • SmartBoot : Un "squelette" quasiment prêt à l'emploi
  • Formation SmartMaker
    • Module 1 : Fondamentaux JavaScript ES6+
      • Chapitre 1 : Variables et Scope
      • Chapitre 2 : Fonctions
      • Chapitre 3 : Programmation Asynchrone
      • Chapitre 4 : Modules ES6
    • Module 2 : Introduction à React
      • Chapitre 1 : Philosophie React
      • Chapitre 2 : JSX
      • Chapitre 3 : Composants
    • Module 3 : Hooks React Fondamentaux
      • Chapitre 1 : useState
      • Chapitre 2 : useEffect
      • Chapitre 3 : useRef
      • Chapitre 4 : useContext
    • Module 4 : React Avancé
      • Chapitre 1 : useCallback et useMemo
      • Chapitre 2 : Custom Hooks
      • Chapitre 3 : Redux et Redux Toolkit
    • Module 5 : Architecture SmartMaker
      • Chapitre 1 : Structure du projet
      • Chapitre 2 : Configuration
      • Chapitre 3 : Flux de données
    • Module 6 : SmartCommon - Composants
      • Chapitre 1 : Mise en page
      • Chapitre 2 : Navigation
      • Chapitre 3 : Formulaires
      • Chapitre 4 : Affichage
    • Module 7 : SmartCommon - Hooks
      • Chapitre 1 : useApi
      • Chapitre 2 : Gestion d'état
      • Chapitre 3 : Hooks utilitaires
    • Module 8 : Backend API (PHP)
      • Chapitre 1 : Routage
      • Chapitre 2 : Controllers
      • Chapitre 3 : Mappers
      • Extrafields et formulaires dynamiques
    • Module 9 : Intégration complète
      • Chapitre 1 : Backend
      • Chapitre 2 : Frontend
      • Chapitre 3 : Déploiement
    • Module 10 : Fonctionnalités avancées
      • Chapitre 1 : Mode offline
      • Chapitre 2 : Internationalisation (i18n)
      • Chapitre 3 : Autres fonctionnalités
    • Module 11 : Bonnes pratiques
  • Démonstration
  • Start
  • Composants et pages
  • Afficher le texte source
  • Anciennes révisions
  • Liens de retour
  • Haut de page