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, l'intégralité du composant est restituée, imaginez maintenant que nous devons mettre à jour les 6 états... oui, nous restituons 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 uniquement 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 entraîne 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 modifier que les parties de l'état qui doivent être modifiées, sans changer le reste.

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

Succès! ?