Modernisation de React

Maîtrisez les mises à jour de version React, la migration de composants de classe à hooks, l'adoption des fonctionnalités concurrentes et les codemods pour la transformation automatisée.

Quand utiliser cette compétence

Upgrader des applications React vers les dernières versions
Migrer des composants de classe vers des composants fonctionnels avec hooks
Adopter les fonctionnalités concurrentes de React (Suspense, transitions)
Appliquer des codemods pour la refactorisation automatisée
Moderniser les modèles de gestion d'état
Mettre à jour vers TypeScript
Améliorer les performances avec les fonctionnalités de React 18+

Chemin de mise à jour des versions

React 16 → 17 → 18

Changements cassants par version :

React 17 :

Changements de délégation d'événements
Pas de pooling d'événements
Timing du nettoyage des effets
Transformation JSX (import React non nécessaire)

React 18 :

Batching automatique
Rendu concurrent
Changements de Strict Mode (double invocation)
Nouvelle API root
Suspense côté serveur

Migration de classe à hooks

Gestion d'état

// Avant : Composant de classe
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: "",
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// Après : Composant fonctionnel avec hooks
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Méthodes de cycle de vie à hooks

// Avant : Méthodes de cycle de vie
class DataFetcher extends React.Component {
  state = { data: null, loading: true };

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.id !== this.props.id) {
      this.fetchData();
    }
  }

  componentWillUnmount() {
    this.cancelRequest();
  }

  fetchData = async () => {
    const data = await fetch(`/api/${this.props.id}`);
    this.setState({ data, loading: false });
  };

  cancelRequest = () => {
    // Cleanup
  };

  render() {
    if (this.state.loading) return <div>Loading...</div>;
    return <div>{this.state.data}</div>;
  }
}

// Après : Hook useEffect
function DataFetcher({ id }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    const fetchData = async () => {
      try {
        const response = await fetch(`/api/${id}`);
        const result = await response.json();

        if (!cancelled) {
          setData(result);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error(error);
        }
      }
    };

    fetchData();

    // Cleanup function
    return () => {
      cancelled = true;
    };
  }, [id]); // Re-run when id changes

  if (loading) return <div>Loading...</div>;
  return <div>{data}</div>;
}

Context et HOCs à hooks

// Avant : Context consumer et HOC
const ThemeContext = React.createContext();

class ThemedButton extends React.Component {
  static contextType = ThemeContext;

  render() {
    return (
      <button style={{ background: this.context.theme }}>
        {this.props.children}
      </button>
    );
  }
}

// Après : Hook useContext
function ThemedButton({ children }) {
  const { theme } = useContext(ThemeContext);

  return <button style={{ background: theme }}>{children}</button>;
}

// Avant : HOC pour la récupération de données
function withUser(Component) {
  return class extends React.Component {
    state = { user: null };

    componentDidMount() {
      fetchUser().then((user) => this.setState({ user }));
    }

    render() {
      return <Component {...this.props} user={this.state.user} />;
    }
  };
}

// Après : Custom hook
function useUser() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser().then(setUser);
  }, []);

  return user;
}

function UserProfile() {
  const user = useUser();
  if (!user) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

Fonctionnalités concurrentes de React 18

Nouvelle API Root

// Avant : React 17
import ReactDOM from "react-dom";

ReactDOM.render(<App />, document.getElementById("root"));

// Après : React 18
import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("root"));
root.render(<App />);

Batching automatique

// React 18 : Toutes les mises à jour sont groupées
function handleClick() {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // Un seul re-render (groupé)
}

// Même en async :
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // Toujours groupé dans React 18 !
}, 1000);

// Désactiver si nécessaire
import { flushSync } from "react-dom";

flushSync(() => {
  setCount((c) => c + 1);
});
// Re-render se produit ici
setFlag((f) => !f);
// Un autre re-render

Transitions

import { useState, useTransition } from "react";

function SearchResults() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    // Urgent : Mettre à jour l'input immédiatement
    setQuery(e.target.value);

    // Non-urgent : Mettre à jour les résultats (peut être interrompu)
    startTransition(() => {
      setResults(searchResults(e.target.value));
    });
  };

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <Results data={results} />
    </>
  );
}

Suspense pour la récupération de données

import { Suspense } from "react";

// Récupération de données basée sur les ressources (avec React 18)
const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<Loading />}>
      <ProfileDetails />
      <Suspense fallback={<Loading />}>
        <ProfileTimeline />
      </Suspense>
    </Suspense>
  );
}

function ProfileDetails() {
  // Ceci va suspendre si les données ne sont pas prêtes
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

function ProfileTimeline() {
  const posts = resource.posts.read();
  return <Timeline posts={posts} />;
}

Codemods pour l'automatisation

Exécuter des codemods React

# Renommer les méthodes de cycle de vie non sûres
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js src/

# Mettre à jour les imports React (React 17+)
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/update-react-imports.js src/

# Ajouter des error boundaries
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/error-boundaries.js src/

# Pour les fichiers TypeScript
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --parser=tsx src/

# Exécution sans risque pour prévisualiser les changements
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --dry --print src/

# Classe vers Hooks (tiers)
npx codemod react/hooks/convert-class-to-function src/

Exemple de codemod personnalisé

// custom-codemod.js
module.exports = function (file, api) {
  const j = api.jscodeshift;
  const root = j(file.source);

  // Trouver les appels setState
  root
    .find(j.CallExpression, {
      callee: {
        type: "MemberExpression",
        property: { name: "setState" },
      },
    })
    .forEach((path) => {
      // Transformer en useState
      // ... transformation logic
    });

  return root.toSource();
};

// Exécuter : jscodeshift -t custom-codemod.js src/

Optimisation des performances

useMemo et useCallback

function ExpensiveComponent({ items, filter }) {
  // Mémoriser le calcul coûteux
  const filteredItems = useMemo(() => {
    return items.filter((item) => item.category === filter);
  }, [items, filter]);

  // Mémoriser le callback pour éviter les re-renders enfants
  const handleClick = useCallback((id) => {
    console.log("Clicked:", id);
  }, []); // Pas de dépendances, ne change jamais

  return <List items={filteredItems} onClick={handleClick} />;
}

// Composant enfant avec memo
const List = React.memo(({ items, onClick }) => {
  return items.map((item) => (
    <Item key={item.id} item={item} onClick={onClick} />
  ));
});

Code Splitting

import { lazy, Suspense } from "react";

// Charger les composants de manière différée
const Dashboard = lazy(() => import("./Dashboard"));
const Settings = lazy(() => import("./Settings"));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

Migration TypeScript

// Avant : JavaScript
function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

// Après : TypeScript
interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

function Button({ onClick, children }: ButtonProps) {
  return <button onClick={onClick}>{children}</button>;
}

// Composants génériques
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <>{items.map(renderItem)}</>;
}

Checklist de migration

### Avant la migration

- [ ] Mettre à jour les dépendances progressivement (pas tout à la fois)
- [ ] Examiner les changements cassants dans les notes de version
- [ ] Configurer une suite de tests
- [ ] Créer une branche de fonctionnalité

### Migration classe → hooks

- [ ] Identifier les composants de classe à migrer
- [ ] Commencer par les composants feuilles (sans enfants)
- [ ] Convertir l'état en useState
- [ ] Convertir le cycle de vie en useEffect
- [ ] Convertir context en useContext
- [ ] Extraire les custom hooks
- [ ] Tester complètement

### Upgrade React 18

- [ ] Mettre à jour vers React 17 d'abord (si nécessaire)
- [ ] Mettre à jour react et react-dom à la version 18
- [ ] Mettre à jour @types/react si vous utilisez TypeScript
- [ ] Changer vers l'API createRoot
- [ ] Tester avec StrictMode (double invocation)
- [ ] Résoudre les problèmes de rendu concurrent
- [ ] Adopter Suspense/Transitions où c'est bénéfique

### Performances

- [ ] Identifier les goulots d'étranglement de performance
- [ ] Ajouter React.memo où approprié
- [ ] Utiliser useMemo/useCallback pour les opérations coûteuses
- [ ] Implémenter le code splitting
- [ ] Optimiser les re-renders

### Tests

- [ ] Mettre à jour les utilitaires de test (React Testing Library)
- [ ] Tester avec les fonctionnalités de React 18
- [ ] Vérifier les avertissements en console
- [ ] Tests de performance

react-modernization