Quelle est la différence entre state et props ?

Question

Accepted Answer

**Props** sont des entrées **passées à** un composant par son parent (lecture seule du point de vue de l'enfant). **State** est une donnée qu'un composant **possède et gère en interne** (il peut la modifier). La distinction : les props proviennent de l'extérieur et ne changent pas au sein du composant ; le state est interne et mutable. ## Props — passées, lecture seule ```jsx function Greeting({ name }) { // `name` is a prop from the parent return

Hello, {name}

; // name = "Bob"; // ❌ a child must NOT modify its props } // parent supplies the prop ``` Les props s'écoulent **vers le bas** du parent vers l'enfant. L'enfant les lit mais ne peut pas les modifier — pour changer la valeur d'une prop, le parent doit en passer une nouvelle. ## State — possédé en interne, mutable ```jsx function Counter() { const [count, setCount] = useState(0); // `count` is this component's own state return ; // the component updates its OWN state via setCount } ``` Le state est créé et contrôlé *à l'intérieur* du composant ; le composant le modifie (via `setCount`/`setState`), et le modifier déclenche un re-rendu. ## Côte à côte ```text Props State Source passed from parent created in the component Mutable? read-only (in child) yes (via setter) Who controls it the parent the component itself Triggers render when the parent changes it when the component updates it Purpose configure/pass data in track changing internal data ``` ## Ils travaillent ensemble ```jsx function Parent() { const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent return ; // passed DOWN as a PROP } ``` Le **state** d'un composant est souvent passé à un enfant en tant que **prop**. Remonter le state et le passer vers le bas est exactement ce modèle — le parent possède le state, les enfants le reçoivent comme props. ## Pourquoi c'est important La distinction state-vs-props est fondamentale dans les frameworks basés sur les composants. Elle définit la propriété des données et leur flux : les props sont une configuration externe, de lecture seule (données vers le bas) ; le state est une donnée interne, mutable que le composant gère. Les confondre — muter des props, ou dupliquer des props dans le state — provoque des bugs classiques. Comprendre que les données s'écoulent vers le bas en tant que props tandis que chaque composant possède son propre state est le fondement de la conception des composants React/Vue/Angular.