Mounting

Phase de Mounting

Le composant est initialisé et rendu pour la première fois dans le DOM.

Avec les classes

class MonComposant extends Component {
  constructor(props) {
    super(props);
    this.state = { data: null }; // 1. Initialisation du state
  }

  componentDidMount() {
    // 2. Appelé APRÈS le premier render (DOM disponible)
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data }));
  }

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

Avec les Hooks

function MonComposant() {
  const [data, setData] = useState(null); // Initialisation

  useEffect(() => {
    // Équivalent de componentDidMount (tableau vide = exécution unique)
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []); // [] = seulement au montage

  return <div>{data}</div>;
}

Ordre d'exécution au montage

1. La fonction du composant s'exécute (rendu initial)
2. React met à jour le DOM
3. Les effets (useEffect) s'exécutent