Ключові принципи оновлення стану в React: уникнення мутацій та коректне використання функцій оновлення

8 Березня 2024 в 20:08 45

При розробці застосунків з використанням бібліотеки React, одним із найважливіших аспектів є коректне оновлення стану компонентів. Хоча React надає ряд зручних інструментів для цього, неправильне використання може призвести до непередбачуваних проблем, зокрема, до втрати попередніх значень стану після оновлення. У цій статті ми розглянемо ситуацію, коли програміст спробував оновлювати стан без мутації, проте не отримував оновлені значення під час наступних рендерів компоненту.

У зазначеному випадку, розробник намагався додавати новий об’єкт до масиву кожні 2 секунди за допомогою функціоналу useEffect та setInterval. Він дотримувався правила React про уникнення мутацій стану, створюючи новий масив з попереднього стану та додаючи до нього новий об’єкт, а потім встановлюючи цей новий масив як стан. Однак, він зазнавав проблем із отриманням оновленого стану після кожного оновлення.

Рішенням цієї проблеми було використання функції оновлення стану, яка надається useState. Замість того, щоб просто встановлювати новий стан на основі попереднього, програміст використав функцію оновлення та передав у неї функцію, яка повертала оновлений стан, використовуючи попередній стан. Це дозволило коректно оновлювати стан і уникнути втрати даних після оновлення.

const [liveChats, setLiveChats] = useState([]);
useEffect(() => {
  const interval = setInterval(() => {
    setLiveChats((prevState) => [
      {
        name: generateRandomName(),
        message: generateRandomMessage(20),
      },
      ...prevState,
    ]);
  }, 2000);
  return () => clearInterval(interval);
}, []);