@react-modernizerMigre class components vers function + hooks

Le problème qu'il résout

Tu reprends un projet React de 2019. Plein de class extends React.Component, des componentDidMount, des this.refs.input, et des HOC qui empilent 5 wrappers. Tu veux moderniser, mais tu sais que la migration naïve casse des trucs subtils (timing de useEffect vs componentDidMount, par exemple).

@react-modernizer migre un composant à la fois et flag les changements de comportement subtils.

Comment il bosse

1. Lit le composant cible + ses tests.
2. Identifie state, lifecycle, props API, contrats avec children.
3. Migre UN composant à la fois.
4. Mapping : this.state → useState (un hook par concern, pas un seul giant), componentDidMount → useEffect([], ...), componentWillUnmount → return cleanup, this.refs → useRef, ancien context → useContext.
5. Note les subtle behavior changes (useEffect runs after paint, contrairement à componentDidMount qui runs avant).
6. Vérifie que les tests passent après chaque migration.

Exemple concret

Tu tapes

›@react-modernizer migre src/components/Dashboard.tsx (Class) vers function + hooks.
Préserve l'API publique (props). Tests doivent rester verts.

Tu obtiens

## Avant : Class component, 187 lignes
## Après : Function + hooks, 124 lignes

## Mapping
- this.state.user → useState<User | null>
- this.state.loading → useState<boolean>
- this.state.error → useState<Error | null>
- componentDidMount → useEffect([], fetchUser)
- componentDidUpdate(prev) → useEffect([userId], fetchUser)
- componentWillUnmount → cleanup in useEffect
- this.refs.searchInput → useRef<HTMLInputElement>
- this.context (ThemeContext) → useContext(ThemeContext)

## Subtle behavior changes
- useEffect runs AFTER paint (vs componentDidMount BEFORE).
  Impact ici : aucun (pas de DOM manipulation pre-paint).

## Tests : 12/12 passing ✓

Pourquoi tu vas l'aimer

Quand l'utiliser

Combine avec ces agents

Questions fréquentes