Free React For Beginners

Розбираємо реальний кейс, або косячать усі. ✍️ Трохи контексту: Вечір, п'ятниця, я дуже хочу закінчити функціонал і викласти його на ремоут. Завдання дуже просте - виставити юзеру статус (затверджений, відмовлений), оновити його на бекенді, і після цього…

Давайте розбиратися:

1️⃣ Першу помилку ви знайшли швидко: використання теоретично застарілого user-а з фронтенду, замість того щоб отримати його з бекенду після апдейту.

Це може бути проблемою, коли ми оновлюємо одне поле в об'єкті, але не оновлюємо інші, залежні від нього поля (наприклад тому що правила по яким треба перерахувати залежні поля, знає лише бекенд). В результаті ми отримаємо не коректний стан даних на фронтенді, ще й розсинхронізований з бекендом.

2️⃣ Другу помилку краще проілюструвати:

export default function App() {
  const [users, setUsers] = useState([{ name: "1" }]);
  const updateFirstUser = () => {
    users[0].name = "updated";
    setUsers([...users]);
  };

  return (
    <>
      {users.map((u, i) => (
        <User user={u} key={i} />
      ))}

      <button onClick={updateFirstUser}>Update first user</button>
    </>
  );
}

const User = ({ user }) => <p>name: {user.name}</p>;

Якщо ви запустите цей код, то все відпрацює нормально, і по кліку на кнопку ви побачите нове ім'я користувача на сторінці. Але, якщо ви використаєте memo для компоненту User, або заміните його на PureComponent, то ваш код, несподівано, перестане працювати!

Причина полягає в тому, що, хоча екземпляр масиву змінився, але екземпляр самого об'єкту юзер - ні! Відповідно, React, порівнюючи поточний і попередній пропси (а для не примітивних типів він робить це за посиланням) буде думати що нічого не змінилося і не перемалює ваш компонент.

І якщо першу проблему, ви, скоріше за все побачите відносно швидко, то друга є геть не очевидною і може принести вашому колезі трохи болю та страждань.

Висновок:

👉 Думайте як ваш код буде використовуватися в майбутньому,
👉 Робіть паузу для саморев'ю
👉 Не спішіть в п'ятицю :)

Всім гарного вечора!

👍24✍2

1.41K viewsedited 14:48