😢 Ще раз переконався, що багато хто любить ускладнювати собі життя і код за допомогою useEffect, тому давайте знову повернемось до цієї теми
👀 Наприклад, маємо якийсь кастомний хук, в якому є ім'я та прізвище користувача, а нам потрібне ще й його повне ім'я.
Типове і не правильне рішення - використати
useEffect та проміжний стейт:useEffect(() => {
setFullUserName(`${fName} ${sName}`);
}, [fName, sName]);
🤨 Такий код складніше читається, має більшу вірогідність помилки та на додачу ще й не ефективний оскільки викликає додатковий рендер.Насправді, все що нам треба - це вирахувати повне ім'я прямо в самому хуці (або компоненті)
const fullName =
${fName} ${sName}
👩🏫 Якщо дані користувача лежать в стейті, то як тільки вони зміняться - наш код буде викликаний знову і ми отримаємо нове повне ім'я. Все дуже просто і очевидно, але багато хто все одно додає зайвий effect 😊👉 Для того, щоб не повторювати цю помилку достатньо запам'ятати, що похідні дані (ті які ми вираховуємо) потрібно не тримати в стейті, а вираховувати прямо в самій функції. А якщо ви побачите, що це займає забагато часу (і поміряєте!) - тоді вам може стати в нагоді хук
useMemo
Чистого вам коду, бережіть себе і скоро побачимось!@reactbeginners