Проблема

В більшості випадків, додаючи до коду хук, ми вирішуємо рівно 0 проблем.

Натомість ми можемо створити безліч нових.

Що таке хуки

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

Не всі хуки однаково корисні безглузді

Ми зосередимося на тих хуках, що найчастіше додають складності без користі.

disclaimer

Ці поради — не правила, а спосіб мислити. Майже завжди правильна відповідь:

It depends

useEffect

useEffect часто використовують як “звалище логіки після рендеру”. Але більшість ефектів узагалі не потрібні — вони лише маскують відсутність розуміння того, як працює React.

useEffect існує, щоб синхронізувати компонент із зовнішньою системою. Перед тим як додати ефект, спитайте себе: чому саме цей компонент має це робити — чи входить це до його зони відповідальності?

useState

Коли кожна дрібниця стає станом — компонент тоне у власних оновленнях. А ми — в тому, хто кого оновлює.

Якщо все — стан, то нічого не стан.

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

Тож головні питання: чи це справді треба змінювати? Чи це значення має жити між рендерами? І головне — чи саме цей компонент повинен за нього відповідати?

useMemo

Ми часто додаємо useMemo, аби здаватися уважними до швидкодії. Насправді ж ми створюємо лише ілюзію, яка може розвіятися у будь-яку мить.

Оптимізація без вимірювання — як село без церкви.

Задача useMemo — забезпечення stable reference між рендерами. То чи дійсно потрібне це стабільне посилання?

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

useCallback

Його часто додають “на всяк випадок” — щоб не “створювати функцію заново” або “оптимізувати” рендер. Насправді він взагалі нічого не оптимізує: функція створюється щоразу, а код стає складнішим і менш передбачуваним.

Головне питання — чи треба нам сталість посилання? Якщо ні — забудьте про useCallback.

Кастомні хуки

Ми додаємо кастомні хуки “щоб винести код”. Але якщо логіка не стає зрозумілішою, а лише ховається глибше — це не покращення коду, а приховування безладу.

Питайте в себе: чи справді ця логіка повторюється в кількох місцях? Чи стане компонент простішим, якщо винести це в хук? Чи можна в одному реченні пояснити, що робить цей хук і навіщо він існує?

use Less, do more

Пишіть код, а не хуки.

Не вирішуйте неіснуючих проблем.

Завжди питайте себе: “Чи відпаде у мене срака, якщо тут не буде useMemo?”.

Питайте шось

і підписуйтесь на Дивовижний світ веброзробки