Éviter les rendus inutiles dans React avec plusieurs états

Il est courant d'utiliser des états pour contrôler différentes parties de l'interface. Cependant, s'ils ne sont pas bien gérés, plusieurs états peuvent provoquer des rendus inutiles, affectant les performances du système.

Problème : Trop d'états === Trop de rendus

Imaginons que nous ayons un composant qui gère les données d'un utilisateur. Nous pouvons déclarer ces états indépendamment, comme ceci :

const UserComponent = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [occupation, setOccupation] = useState('');

  // Funções de atualização dos estados
  const updateName = (newName) => setName(newName);
  const updateAge = (newAge) => setAge(newAge);
  // e assim por diante...

  return (
    ...
  );
};

Ici nous avons 6 états indépendants, chaque fois qu'un de ces états est mis à jour, le composant entier est restitué, imaginez maintenant que nous devons mettre à jour les 6 états... oui, nous rendons ce composant 6 fois.

Solution : Créer un seul état concernant les informations utilisateur

Une façon d'atténuer ce problème consiste à consolider tous les états en un seul objet. Au lieu d'avoir des états séparés, nous pouvons conserver toutes les informations utilisateur dans un seul état, cela ressemblerait à ceci :

const UserComponent = () => {
  const [user, setUser] = useState({
    name: '',
    age: 0,
    address: '',
    email: '',
    phone: '',
    occupation: ''
  });

  // Função para atualizar o estado do usuário
  const updateUser = (newData) => {
    setUser((prevState) => ({
      ...prevUser,
      ...newData,
    }));
  };

  return (
    ...
  );
};

Maintenant, au lieu d'avoir une fonction pour chaque état, nous avons la fonction updateUser, qui reçoit uniquement les modifications souhaitées et les combine avec l'état précédent à l'aide de l'opérateur spread (...). Cela vous permet de mettre à jour seulement une partie de l'état, tandis que le reste reste inchangé.

Si vous souhaitez modifier une seule information sur l'objet, procédez comme suit :

setUser((prevState) => ({...prevState, age: 25}))

Différence

Lorsque nous utilisons des états séparés, chaque changement d'état individuel provoque un nouveau rendu du composant. Lorsque nous consolidons tous les états en un seul objet, nous avons toujours un seul nouveau rendu, mais cela ne se produit qu'une seule fois, même si plusieurs parties de l'objet changent.

Avantages

- Réduction des nouveaux rendus : En consolidant les états, nous évitons plusieurs nouveaux rendus inutiles, améliorant ainsi les performances.
- Maintenance plus facile : Il est plus facile de gérer les informations utilisateur dans un seul état, simplifiant le code et le rendant plus lisible.
- Mises à jour partiellement contrôlées : Nous ne pouvons changer que les parties de l'état qui doivent être modifiées, sans toucher au reste.

C'est ça ! J'espère avoir aidé !!!
Bien que je sois encore en développement, mais voici mon portfolio : https://lucaslima.vercel.app (j'espère que lorsque vous y accéderez, il sera prêt hahhaha)

Succès ! ?

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!