Les différences entre Props et State en React jouent un rôle crucial pour la gestion dynamique des composants en React. Comprendre comment utiliser correctement les Props et State peut considérablement améliorer la performance et la réactivité de vos applications React. Apprenons comment ils fonctionnent et comment les implémenter grâce à des exemples concrets de code.

Introduction aux Props et State en React

Les Props (courte forme de propriétés) et le State (état) sont deux concepts fondamentaux dans l’architecture de React. Bien qu’ils puissent sembler similaires, ils ont des rôles distincts. Les Props sont des paramètres envoyés aux composants pour paramétrer leur affichage, tandis que le State est utilisé pour gérer les données locales d’un composant qui peuvent changer au fil du temps. Voyons cela en détail.

Comprendre les Props en React

Les Props sont des arguments passés aux composants React. Ils sont utilisés pour passer des données de parent à enfant. Les composants enfants peuvent accéder aux props mais ne peuvent pas les modifier. Ceci garantit que les flux de données restent unidirectionnels, ce qui est une des bases de l’architecture React. Voici un exemple simple :


import React from 'react';

// Composant enfant affichant une prop
function Greeting(props) {
  return 
Bonjour, {props.name}!
;
}

// Composant parent passant une prop
function App() {
  return ;
}

export default App;

Comprendre le State en React

Le State est similaire aux props, mais il est géré à l’intérieur du composant. Le state peut changer au cours du temps et déclencher un re-render lorsqu’il change. Contrairement aux props, chaque composant est responsable de son propre state. Voici comment utiliser le state avec des hooks dans un composant fonctionnel :


import React, { useState } from 'react';

function Counter() {
  // Déclarer une nouvelle variable state, qu'on appellera "count"
  const [count, setCount] = useState(0);

  return (
    

      
Vous avez cliqué {count} fois

      
    

  );
}

export default Counter;

Différences Clés entre Props et State

Pour mieux comprendre les différences entre Props et State, voici un tableau comparatif :

Critère Props State
Origine Externe (passé par le composant parent) Interne (défini dans le composant lui-même)
Utilisation Initialisation et configuration de l’affichage Gestion dynamique des données du composant
Mutabilité Immuable (read-only) Mutable (modifiable via setState ou useState)
Accessibilité Passé aux composants enfants Local au composant

Cas d’Utilisation des Props

Les Props sont parfaits pour passer des données immuables. Par exemple, lors de la création d’un composant d’affichage d’utilisateur, vous pouvez facilement passer les données utilisateur comme props :


function UserCard(props) {
  return (
    

      
{props.user.name}

      
Email: {props.user.email}

    

  );
}

// Utilisation du composant

Cas d’Utilisation du State

Le State est idéal pour gérer les données qui changent au fil du temps. Un excellent exemple est un formulaire de connexion qui gère les entrées utilisateur :


import React, { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    // Traitement des informations de connexion ici
    console.log('Email:', email);
    console.log('Password:', password);
  };

  return (
    

      

        
         setEmail(e.target.value)} />
      

      

        
         setPassword(e.target.value)} />
      

      
    

  );
}

export default LoginForm;

Combiner Props et State

Dans de nombreux cas, les composants React utilisent à la fois des props et du state. Les props peuvent être utilisées pour initialiser le state local, ou pour transmettre des gestionnaires d’événements définis par le parent. Voici un exemple de composant Todo qui combine props et state :


import React, { useState } from 'react';

function TodoItem(props) {
  const [isCompleted, setIsCompleted] = useState(props.completed);

  return (
    

       setIsCompleted(!isCompleted)}
      />
      
        {props.title}
      
    

  );
}

function TodoList() {
  const todos = [
    { id: 1, title: 'Learn React', completed: false },
    { id: 2, title: 'Build a Todo App', completed: false }
  ];

  return (
    

      {todos.map(todo => (
        
      ))}
    

  );
}

export default TodoList;

Exemples Avancés de Props et State en React

Diverses fonctionnalités avancées de React tirent parti à la fois des props et du state. Voici quelques exemples pour illustrer leur utilisation complexe.

Utilisation des Props pour la Communication entre Composants

Les props servent souvent à la communication entre composants parents et enfants. Voici un exemple d’un composant parent qui met à jour le state du composant enfant via des props :


function ParentComponent() {
  const [message, setMessage] = useState('Bonjour!');

  const updateMessage = () => {
    setMessage('Bonjour, le monde!');
  };

  return (
    

      
      
    

  );
}

function ChildComponent(props) {
  return 
{props.message}
;
}

Utilisation du State pour la Gestion des Formulaires

Les formulaires interactifs en React montrent puissamment comment le state peut être utilisé pour gérer les entrées utilisateur et fournir une expérience utilisateur riche :


function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    // Traitement du formulaire ici
    console.log('Nom:', name);
    console.log('Email:', email);
    console.log('Message:', message);
  };

  return (
    

      

        
         setName(e.target.value)} />
      

      

        
         setEmail(e.target.value)} />