Состояния часто используются для управления различными частями интерфейса. Однако при неправильном управлении несколько состояний могут привести к ненужным повторным рендерингам, влияющим на производительность системы.

Проблема: слишком много состояний === Слишком много повторных рендерингов.

Представим, что у нас есть компонент, который управляет данными пользователя. Мы можем объявить эти состояния независимо, например так:

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

Здесь у нас есть 6 независимых состояний, каждый раз, когда одно из этих состояний обновляется, весь компонент перерисовывается, теперь представьте, что нам нужно обновить 6 состояний... да, мы рендерим этот компонент 6 раз.

Решение: создайте только 1 статус относительно информации о пользователе

Один из способов решения этой проблемы — объединить все состояния в один объект. Вместо отдельных состояний мы можем хранить всю информацию о пользователе в одном состоянии. Это будет выглядеть так:

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

Теперь вместо функции для каждого состояния у нас есть функция updateUser, которая получает только нужные изменения и объединяет их с предыдущим состоянием с помощью оператора распространения (...). Это позволяет обновлять только часть состояния, а остальное остаётся неизменным.

Если вы хотите изменить только 1 часть информации об объекте, сделайте следующее:

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

Разница

Когда мы используем отдельные состояния, каждое отдельное изменение состояния вызывает повторный рендеринг компонента. Когда мы объединяем все состояния в один объект, у нас по-прежнему есть один повторный рендеринг, но это происходит только один раз, даже если изменяются несколько частей объекта.

Преимущества

- Уменьшение количества повторных рендерингов: Консолидируя состояния, мы избегаем множественных ненужных повторных рендерингов, повышая производительность.
- Более простое обслуживание: Упрощается управление пользовательской информацией в едином состоянии, что упрощает код и делает его более читабельным.
- Частично контролируемые обновления: Мы можем изменить только те части состояния, которые необходимо изменить, не меняя остальные.

И это! Надеюсь, я помог!!!
Хотя я еще в разработке, но вот мое портфолио: https://lucaslima.vercel.app (надеюсь, когда вы к нему зайдете, оно будет готово, хахаха)

Успех! ?