Принципи React Hooks
Припиніть використовувати useEffect для всього підряд. Багато розробників неправильно використовують цей хук. Це створює баги та ускладнює читання коду.
Обмежуйте використання useEffect.
Намагайтеся використовувати лише один useEffect на сторінку. Використання багатьох хуків для одного й того самого стану викликає плутанину. Ви втрачаєте контроль над тим, який хук оновлює який стан.
Припиніть використовувати useEffect для подій користувача.
Не використовуйте useEffect для кліків або натискань. Замість цього використовуйте обробники подій.
- Погано: Використання useEffect для оновлення стану після кліку.
- Добре: Використовуйте функцію на кшталт onClickBar для оновлення стану.
Типи подій, які варто знати:
- Навігація по сторінках та початковий рендеринг.
- Зміни мережевого з'єднання.
- Оновлення через WebSocket або сервер у реальному часі.
Дії користувача, такі як кліки, не мають бути в useEffect. Використовуйте прямі обробники подій для таких дій.
Розділяйте компоненти за пропсами.
Якщо ви використовуєте булевий пропс для зміни логіки, розділіть свій компонент. Не створюйте один компонент, який одночасно відповідає і за створення, і за оновлення даних.
Один компонент з великою кількістю операторів "if" стає занадто великим. Це ускладнює підтримку додатка.
- Погано: Один компонент з пропсом "isAdd", який змінює поля форми.
- Добре: Створіть "RegisterComponent" та "UpdateComponent".
Маленькі компоненти легше тестувати. Вони працюють швидше. Вони залишаються чистими.
Джерело: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31