Quelle est la différence entre les props et l'état dans React?

Les props (propriétés) et l'état (state) sont deux mécanismes clés pour gérer les données dans les composants React.

Props :

• Sont transmises du composant parent au composant enfant.
• Sont immuables à l'intérieur du composant enfant.
• Permettent l'interaction entre composants.
• Définissent l'apparence ou le comportement du composant en fonction des données d'entrée.

État :

• Appartient à un composant spécifique et est géré par lui.
• Est mutable à l'intérieur du composant.
• Représente des données qui peuvent changer au fil du temps et influencer le rendu du composant.
• La modification de l'état provoque la re-rendu du composant et de ses enfants.

Les principales différences peuvent être présentées sous forme de tableau :

Caractéristique	Props	État
Source	Composant parent	Le composant lui-même
Mutabilité	Immuables	Mutable
Gestion	Transmises de l'extérieur	Gérée à l'intérieur du composant
But	Afficher des données externes, configuration	Gérer l'état interne du composant
La modification provoque	Re-rendu lors d'une modification dans le parent	Re-rendu lors d'une modification dans le composant actuel

Exemple d'utilisation des props :

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Bonjour du parent!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Transmission de la prop "text" */}
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Utilisation de la prop "text" */}
  );
}

export default ChildComponent;

Exemple d'utilisation de l'état :

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Initialisation de l'état "count"

  const increment = () => {
    setCount(count + 1); // Modification de l'état
  };

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

export default Counter;