Comment fonctionnent les props et le state dans React Native ?

Question

Accepted Answer

**Props** et **state** sont des concepts React essentiels qui fonctionnent de manière identique dans React Native : **props** transmettent des données dans un composant (entrées en lecture seule), tandis que **state** contient des données qui peuvent changer au fil du temps (déclenchant des re-rendus). Les comprendre est fondamental. ## Props — données transmises (en lecture seule) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## State — données qui changent (via useState) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` State est une donnée interne et modifiable ; la mettre à jour (via le setter de `useState`) déclenche un re-rendu — c'est ainsi que l'UI reflète les changements. ## Props vs state ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## Pourquoi c'est important Comprendre props et state est fondamental pour React Native car ce sont des **concepts React essentiels au cœur de la façon dont les composants fonctionnent et comment les UIs se mettent à jour**, c'est une connaissance incontournable. **Props** (données en lecture seule transmises à un composant depuis son parent, qui circulent dans l'arborescence des composants) sont comment les composants reçoivent la configuration et les données de l'extérieur, permettant des composants réutilisables et composables. **State** (données internes et modifiables gérées via le hook `useState`, où la mise à jour déclenche un re-rendu) est comment les composants conservent et réagissent aux données qui changent au fil du temps (saisie utilisateur, bascules, données récupérées) — le mécanisme par lequel les UIs reflètent les changements. \ Comprendre la **distinction** — props transmises et en lecture seule (pour les données/configuration externes) versus state étant interne et modifiable (pour les données qui changent, déclenchant des re-rendus) — et le principe que **les données circulent vers le bas via props tandis que les changements de state déclenchent les mises à jour de l'UI** est fondamental pour construire les applications React Native (et React) correctement. Ce sont exactement les mêmes concepts que React pour le web, donc les comprendre se transfère directement et est essentiel pour quiconque construit des composants React Native. Bien maîtriser props et state (transmettre des données via props, gérer les données changeantes avec state, comprendre le flux de données unidirectionnel) est essentiel pour des composants fonctionnels et corrects. Comme props et state sont centraux à la façon dont les composants React Native (et React) fonctionnent — recevoir des données (props) et gérer les changements (state) pour piloter les mises à jour de l'UI — et les comprendre est fondamental pour construire correctement toute application React Native, comprendre props et state est une connaissance React Native essentielle et fondamentale — des concepts essentiels que tout développeur React Native doit comprendre, identiques à React web (donc la connaissance se transfère), et fondamentaux pour construire des composants qui reçoivent des données et réagissent aux changements, la mécanique de base du développement d'UI React Native.