Résumés des Principaux Concepts de React

Dans cet article, nous allons résumés les concepts essentiels de React, leur scénario d’utilisation, et comment les appliquer dans tes projets. Nous allons aborder les composants, props, useState, composants de classe, useEffect, useMemo, React.memo, et useContext / CreateContext.

1. Les Composants en React

Scénario :

Les composants sont la pierre angulaire de React. Ils permettent de découper une interface utilisateur complexe en unités réutilisables.

Quand les utiliser :

Utilise des composants pour structurer ton application en petites unités qui peuvent être réutilisées, gérées et testées indépendamment.

Exemple :

Créer un composant pour afficher une carte produit.

function ProductCard({ product }) {
  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h2>{product.name}</h2>
      <p>{product.description}</p>
    </div>
  );
}

2. Props

Scénario :

Les props permettent de transmettre des données d’un composant parent à un composant enfant.

Quand les utiliser :

Utilise les props lorsque tu veux passer des données simples (chaînes de caractères, nombres, objets, fonctions) d’un composant parent à un composant enfant.

Exemple :

Un parent passe une chaîne de caractères ou une fonction onClick à un enfant.

function Parent() {
  const name = "Alice";
  return <Child name={name} />;
}

function Child({ name }) {
  return <h1>Hello, {name}!</h1>;
}

3. useState

Scénario :

useState est utilisé pour gérer l’état local dans un composant fonctionnel.

Quand l’utiliser :

Utilise useState pour suivre l’état interne d’un composant, comme une saisie utilisateur ou l’état d’un bouton.

Exemple :

Suivre l’état d’une case à cocher.

function Checkbox() {
  const [checked, setChecked] = useState(false);

  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  );
}

4. Composant de classe (Class Component)

Scénario :

Les composants de classe permettent de gérer l’état et les cycles de vie dans des composants plus complexes.

Quand les utiliser :

Les composants de classe sont utiles dans des projets plus anciens ou si tu préfères encore utiliser les classes. Cependant, dans la majorité des cas modernes, les hooks comme useState et useEffect sont préférés.

Exemple :

Suivre un état avec un timer dans un composant de classe.

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <h1>Timer: {this.state.seconds}</h1>;
  }
}

5. useEffect

Scénario :

useEffect est utilisé pour exécuter des effets secondaires dans un composant fonctionnel après chaque rendu.

Quand l’utiliser :

Utilise useEffect lorsque tu as besoin de faire des actions après le rendu du composant, telles que des appels API, des abonnements, ou des timers.

Exemple :

Faire un appel API lors du montage du composant.

useEffect(() => {
  fetchData().then(data => setData(data));
}, []); // Le tableau vide [] signifie qu'on le fait qu'une fois, au montage.

6. useMemo

Scénario :

useMemo mémorise une valeur calculée afin d’éviter des recalculs coûteux à chaque rendu.

Quand l’utiliser :

Utilise useMemo lorsque tu as un calcul lourd qui dépend de certaines dépendances, et que tu veux éviter de recalculer à chaque rendu.

Exemple :

Filtrer une liste uniquement lorsque la recherche change (pas à chaque frappe).

const filteredItems = useMemo(() => {
  return items.filter(item => item.includes(query));
}, [query, items]);

7. React.memo

Scénario :

React.memo permet de mémoriser le rendu d’un composant fonctionnel pour éviter les rerendus inutiles.

Quand l’utiliser :

Utilise React.memo lorsque tu veux éviter de re-rendre un composant quand ses props n’ont pas changé.

Exemple :

Un composant qui ne change pas souvent, comme un bouton ou une carte produit.

const MyComponent = React.memo(function MyComponent({ name }) {
  return <div>{name}</div>;
});

8. useContext / CreateContext

Scénario :

useContext et CreateContext permettent de partager des données entre plusieurs composants sans avoir à les passer manuellement via les props, ce qui évite le “prop drilling”.

Quand les utiliser :

Utilise useContext et CreateContext lorsque tu as besoin de partager des données globales (comme le thème ou l’utilisateur authentifié) entre plusieurs composants.

Exemple :

Créer un contexte pour partager un thème.

// Créer le contexte
const ThemeContext = createContext('light');

// Fournir le contexte
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
    </ThemeContext.Provider>
  );
}

// Consommer le contexte
function Header() {
  const theme = useContext(ThemeContext);
  return <h1 style={{ color: theme === 'dark' ? 'white' : 'black' }}>Bienvenue</h1>;
}

💡 Résumé des Scénarios et Quand les Utiliser

Ces concepts forment les bases de la gestion d’état, de l’optimisation des performances et du partage de données dans React. Comprendre leur utilisation te permettra de créer des applications React plus performantes et modulaires.