Хук useState в React — это важный инструмент для управления состоянием функциональных компонентов, но с ним легко наткнуться на некоторые распространенные ошибки. Независимо от того, начинаете ли вы работать с React или уже какое-то время работаете с ним, избегание этих ошибок может уберечь вас от неожиданных ошибок и проблем с производительностью.

Давайте рассмотрим 10 частых ошибок и то, как их можно избежать, чтобы писать более чистый и эффективный код.

1. Неправильный тип начального состояния.

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

❌ Ошибка: несоответствие типа исходного состояния

const [count, setCount] = useState(0);
setCount("1"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

✔ Решение: используйте TypeScript или укажите тип явно.

const [count, setCount] = useState(0);
setCount(1); // No issues now.

2. Не использовать функциональные обновления

При обновлении состояния на основе предыдущего значения прямая ссылка на текущее состояние может привести к устаревшим значениям, особенно в асинхронных операциях.

❌ Ошибка: прямое использование текущего состояния

setCount(count   1); // Can cause bugs in async scenarios.

✔ Решение: используйте функциональную форму для безопасных обновлений.

setCount((prevCount) => prevCount   1); // Ensures you always have the latest value.

3. Сохранение производного состояния

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

❌ Ошибка: сохранение производного состояния

const [count, setCount] = useState(0);
const [doubleCount, setDoubleCount] = useState(count * 2);

✅ Решение: извлекайте значение во время рендеринга вместо использования состояния.

const [count, setCount] = useState(0);
const doubleCount = count * 2; // No need to store this in state.

4. Обновления состояния на этапе рендеринга

Вызов setState на этапе рендеринга — это рецепт бесконечных циклов и проблем с производительностью.

❌ Ошибка: установка состояния во время рендеринга

const [count, setCount] = useState(0);
setCount(1); // Infinite loop!

✅ Решение: вызвать изменение состояния в обработчиках событий или эффектах.

const handleClick = () => setCount(1);

5. Непосредственное мутирующее состояние

React не обнаружит изменения, если вы измените состояние напрямую, особенно с массивами или объектами.

❌ Ошибка: прямое изменение состояния

const [items, setItems] = useState([1, 2, 3]);
items.push(4); // Mutation happens here, React won’t re-render!

✅ Решение: верните новый массив или объект, чтобы запустить повторный рендеринг.

setItems((prevItems) => [...prevItems, 4]); // Spread to create a new array.

6. Неопределенные или неверные типы для сложного состояния

При работе со сложным состоянием отсутствие определения правильных типов может вызвать проблемы и путаницу во время выполнения.

❌ Ошибка: неявные типы могут привести к ошибкам

const [user, setUser] = useState({ name: "", age: 0 });
setUser({ name: "John", age: "thirty" }); // Type error: Age should be a number.

✔ Решение: определите форму состояния с помощью правильных типов.

type User = { name: string; age: number };
const [user, setUser] = useState({ name: "", age: 0 });

7. Использование состояния для изменяемых значений (например, таймеров)

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

❌ Ошибка: использование состояния для изменяемых значений

const [timerId, setTimerId] = useState(null);

✅ Решение: используйте useRef для изменяемых значений, которые не требуют повторной визуализации.

const timerIdRef = useRef(null);

8. Неправильное объединение государственных объектов

В отличие от компонентов класса, useState не объединяет обновления автоматически. Если вы забудете об этом, некоторые части вашего состояния могут быть перезаписаны.

❌ Ошибка: перезапись состояния вместо слияния

const [user, setUser] = useState({ name: '', age: 0 });
setUser({ age: 25 }); // The 'name' field is now lost!

✔ Решение: используйте оператор распространения для объединения обновлений состояния.

setUser((prevUser) => ({ ...prevUser, age: 25 })); // Merges with existing state.

9. Использование состояния для частого обновления

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

❌ Ошибка: использование состояния для частых обновлений

const [size, setSize] = useState(window.innerWidth);
window.addEventListener("resize", () => setSize(window.innerWidth));

✅ Решение: используйте useRef или debounce, чтобы уменьшить падение производительности.

const sizeRef = useRef(window.innerWidth);
useEffect(() => {
  const handleResize = () => {
    sizeRef.current = window.innerWidth;
  };
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

10. Предполагая, что обновления состояний синхронны

Обновление состояния React происходит асинхронно, но многие разработчики ошибочно полагают, что изменения применяются немедленно.

❌ Ошибка: предполагать, что изменения состояния произойдут немедленно

setCount(count   1);
console.log(count); // Logs the old value, not the updated one!

✅ Решение: используйте useEffect для отслеживания изменений состояния и обеспечения использования самого последнего значения.

useEffect(() => {
  console.log(count); // Logs the updated value after re-render.
}, [count]);

Заключительные мысли?

Избежание этих ошибок useState сделает ваш код React более надежным, читаемым и производительным. Понимание того, как работает механизм состояний React, и знание лучших практик сэкономят вам время на отладку и улучшат общий опыт разработки.

Есть ли у вас какие-либо советы или ошибки в useState, которыми вы могли бы поделиться? Оставьте их в комментариях ниже! ?