Avez-vous vraiment besoin de « useState » pour tout ? Explorer des alternatives

Lorsque vous plongez pour la première fois dans React, useState ressemble au sortilège magique qui fait que tout fonctionne. Vous voulez un bouton pour suivre les clics ? Utilisez useState. Besoin de basculer un modal ? useState à nouveau. Mais à mesure que vous approfondissez le développement de React, vous pourriez commencer à vous demander : useState est-il le bon choix pour chaque situation ?

La réponse, sans surprise, est non. Bien que useState soit polyvalent, React propose d'autres hooks et modèles qui pourraient mieux convenir en fonction de vos besoins spécifiques. Explorons quelques alternatives comme useRef, useReducer et useContext pour voir quand elles brillent.

Quand utiliser useRef au lieu de useState

Une erreur classique du débutant React consiste à utiliser useState pour des valeurs qui n'affectent pas réellement le rendu. useRef est un choix idéal lorsque vous devez conserver les données entre les rendus sans déclencher un nouveau rendu.

Un exemple pratique :

Imaginez que vous suivez le nombre de clics sur un bouton, mais que vous n'avez pas besoin que le composant soit restitué à chaque fois.

function ClickTracker() {
  const clickCount = useRef(0);

  const handleClick = () => {
    clickCount.current += 1;
    console.log(`Button clicked ${clickCount.current} times`);
  };

  return <button onClick={handleClick}>Click me</button>;
}

Dans ce cas, useRef conserve le nombre de clics sans provoquer de nouveaux rendus inutiles. Si vous utilisiez useState, le composant serait restitué à chaque clic, ce qui n'est pas nécessaire ici.

Quand choisir useRef :

• Suivi des valeurs qui n'ont pas besoin de déclencher une mise à jour de l'interface utilisateur.
• Stockage des références aux éléments DOM ou aux valeurs d'état précédentes.

---

Quand useReducer brille sur useState

Pour une logique d'état plus complexe, en particulier lorsque votre état implique plusieurs sous-valeurs ou actions, useReducer peut être une alternative puissante. useState peut commencer à sembler maladroit lorsque vous gérez plusieurs éléments d'État interdépendants.

Un scénario du monde réel :

Supposons que vous créez un formulaire dans lequel vous gérez plusieurs entrées telles que le nom, l'adresse e-mail et le mot de passe. Utiliser useState pour chaque entrée peut vite devenir fastidieux.

function formReducer(state, action) {
  switch (action.type) {
    case 'SET_NAME':
      return { ...state, name: action.payload };
    case 'SET_EMAIL':
      return { ...state, email: action.payload };
    case 'SET_PASSWORD':
      return { ...state, password: action.payload };
    default:
      return state;
  }
}

function SignupForm() {
  const [formState, dispatch] = useReducer(formReducer, {
    name: '',
    email: '',
    password: ''
  });

  return (
    <>
      <input
        value={formState.name}
        onChange={(e) => dispatch({ type: 'SET_NAME', payload: e.target.value })}
        placeholder="Name"
      />
      <input
        value={formState.email}
        onChange={(e) => dispatch({ type: 'SET_EMAIL', payload: e.target.value })}
        placeholder="Email"
      />
      <input
        value={formState.password}
        onChange={(e) => dispatch({ type: 'SET_PASSWORD', payload: e.target.value })}
        placeholder="Password"
      />
    </>
  );
}

Ici, useReducer centralise toutes les mises à jour d'état en une seule fonction, ce qui la rend plus facile à gérer que plusieurs appels useState.

Quand choisir useReducer :

• Gestion d'une logique d'état complexe avec plusieurs sous-valeurs ou actions.
• Lorsque les transitions d'état suivent un flux clair basé sur des actions (par exemple, SET, ADD, REMOVE).

---

Devriez-vous plutôt utiliser useContext ?

Si votre état est partagé entre de nombreux composants, le forage d'hélices peut rapidement devenir un cauchemar. C'est là qu'intervient useContext : il vous aide à partager l'état sans transmettre les accessoires à plusieurs niveaux.

Un exemple contextuel :

Imaginez que vous construisez un panier. Vous devez que l'état du panier (articles ajoutés, prix total, etc.) soit accessible dans différentes parties de l'application, peut-être l'en-tête, la page de paiement et l'aperçu du panier.

const CartContext = React.createContext();

function CartProvider({ children }) {
  const [cart, setCart] = useState([]);

  return (
    <CartContext.Provider value={{ cart, setCart }}>
      {children}
    </CartContext.Provider>
  );
}

function Header() {
  const { cart } = React.useContext(CartContext);
  return <div>Items in cart: {cart.length}</div>;
}

function App() {
  return (
    <CartProvider>
      <Header />
      {/* Other components */}
    </CartProvider>
  );
}

Dans ce scénario, useContext rend l'état du panier disponible à tout composant qui en a besoin sans passer manuellement d'accessoires.

Quand choisir useContext :

• Partage de l'état entre des composants profondément imbriqués.
• Éviter le forage accessoire pour les données globales couramment consultées (par exemple, authentification des utilisateurs, thèmes).

---

Une approche équilibrée

Bien que useState soit un excellent point de départ, l'écosystème de React propose d'autres outils puissants comme useRef, useReducer et useContext qui peuvent simplifier votre code et améliorer les performances. Au lieu d'utiliser useState par défaut, posez-vous quelques questions clés :

• Cet état doit-il déclencher un nouveau rendu ? (Sinon, pensez à useRef)
• Ma logique d'état devient-elle trop complexe pour useState ? (Essayez useReducer)
• Est-ce que je transmets les accessoires à travers trop de composants ? (Regardez dans useContext)

En choisissant le bon outil pour le travail, vous écrirez des composants React plus efficaces et maintenables sur lesquels il est plus facile de raisonner.

Donc, la prochaine fois que vous vous retrouverez par défaut sur useState, faites une pause un instant. Il existe peut-être une meilleure façon de gérer les choses !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!