Les Props VS Les States en React ?

Faut-il utiliser des props ou des states avec React ?

C'est une question que beaucoup de personnes se posent et il est intéressant de mieux comprendre ce sujet.

C'est quoi un state ?

Un state est un état interne à un composant. Il est une mémoire interne qui va stocker des informations qui vont être utilisées par le composant.

C'est quoi une props ?

Une props est un paramètre qui est passé d'un composant parent à un composant enfant.

Quelle est la différence entre un state et une props ?

Maintenant que tu as un peu compris les states, la question que tu te poses peut-être c'est :

Quelle est la différence entre une props et un state ?

Il faut bien comprendre que les props sont des données qui sont passées d'un composant parent à un composant enfant :

Cette props va permettre à notre enfant de réagir en fonction de ces props. Si je prends par exemple un Lego, on pourrait avoir différents types de props qui permettent de configurer mon Lego :

Ce qui permettrait de modifier notre composant Lego !

Ces props sont vraiment des paramètres pour notre composant...

Les states

Les states, contrairement aux props, vont avoir deux grosses différences :

• Un state va être "local" à ton composant
• Lors de changement, ils vont provoquer un re-render de ton composant, ce qui va permettre de mettre à jour ton composant

Il faut imaginer un state comme une mémoire interne à tes composants, comme une sorte de mini disque dur qui va stocker des informations qui vont ensuite être utilisées par ton composant.

Quand les informations changent, React s'occupe de synchroniser les informations avec le DOM.

Par exemple, si on voulait faire fonctionner notre composant Lego, on pourrait utiliser un useState dans le composant et incrémenter sa valeur lors du clic sur le bouton interne !

Alors, quel est le problème ?

Ce qui trouble fréquemment les étudiants, c'est le pattern récurrent de passer des state en props.

Et pire encore, parfois on passe la fonction setter du state à notre composant enfant.

Un peu comme ça :

Ici on peut se dire que nos props sont égales à notre state étant donné que quand les props changent notre composant est modifié.

Mais ce n'est pas à cause du changement de props que notre composant est modifié ! C'est parce que son parent possède un state qui est modifié et que notre composant est enfant de celui-ci.

J'en parle dans cette courte vidéo ou dans mon cours pour apprendre React de 0.

En résumé

Une props ne provoque jamais de render. Elle est utilisée pour paramétrer un élément. Par contre, si la props est passée depuis un composant qui est render et qui a un state modifié, ce state pourrait modifier le composant via les props.

Mais ce ne sont jamais les props qui modifient un composant, c'est toujours un state dans un parent.

Tu pourrais aussi être intéressé à savoir quand utiliser le useEffect ou comment utiliser le useRef

Ou rejoindre ma formation gratuite :