Es común usar estados para controlar diferentes partes de la interfaz. Sin embargo, si no se gestionan bien, varios estados pueden provocar repeticiones innecesarias y afectar el rendimiento del sistema.

Problema: Demasiados estados === Demasiados renderizados

Imaginemos que tenemos un componente que gestiona los datos de un usuario. Podemos declarar estos estados de forma independiente, así:

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 (
    ...
  );
};

Aquí tenemos 6 estados independientes, cada vez que se actualiza uno de estos estados, se vuelve a renderizar todo el componente , ahora imagina que necesitamos actualizar los 6 estados... sí, renderizamos este componente 6 veces.

Solución: Crear solo 1 estado con respecto a la información del usuario

Una forma de mitigar este problema es consolidar todos los estados en un solo objeto. En lugar de tener estados separados, podemos mantener toda la información del usuario en un estado, se vería así:

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 (
    ...
  );
};

Ahora, en lugar de tener una función para cada estado, tenemos la función updateUser, que recibe solo los cambios deseados y los combina con el estado anterior usando el operador spread (...). Esto le permite actualizar solo una parte del estado, mientras que el resto permanece sin cambios.

Si desea cambiar solo 1 dato sobre el objeto, haga esto:

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

Diferencia

Cuando utilizamos estados separados, cada cambio de estado individual provoca una nueva representación del componente. Cuando consolidamos todos los estados en un solo objeto, todavía tenemos una única renderización, pero solo ocurre una vez, incluso si cambian varias partes del objeto.

Ventajas

- Reducción de re-renderizados: Al consolidar estados, evitamos múltiples re-renderizados innecesarios, mejorando el rendimiento.
- Mantenimiento más fácil: Es más fácil administrar la información del usuario en un solo estado, simplificando el código y haciéndolo más legible.
- Actualizaciones Parcialmente Controladas: Solo podemos cambiar las partes del estado que necesitemos modificar, sin cambiar el resto.

¡Y eso! Espero haber ayudado!!!
Aunque todavía estoy en desarrollo, pero aquí está mi portafolio: https://lucaslima.vercel.app (espero que cuando accedas esté listo jajajaja)

¡Éxito! ?