5 пользовательских хуков, которые я копирую в каждый проект

Не из библиотеки. Не из учебника. Из продакшена.

Вот мой стартовый набор:

1. 𝘂𝘀𝗲𝗗𝗲𝗯𝗼𝘂𝗻𝗰𝗲() Поиск полей ввода, обработчики изменения размера, вызовы API — без шквала перерисовок. Я видел приложения, которые делают более 40 вызовов API за одно нажатие клавиши. Этот хук решает эту проблему.

2. 𝘂𝘀𝗲𝗣𝗿𝗲𝘃𝗶𝗼𝘂𝘀() Отслеживает предыдущее значение любого состояния или свойства. Незаменим для отладки перерисовок и построения логики «изменено с X на Y».

3. 𝘂𝘀𝗲𝗟𝗼𝗰𝗮𝗹𝗦𝘁𝗼𝗿𝗮𝗴𝗲() useState, но сохраняется. Выдерживает обновление страницы. Подводная точка, которую многие упускают: безопасность SSR. window не существует на сервере.

4. 𝘂𝘀𝗲𝗠𝗲𝗱𝗶𝗮𝗤𝘂𝗲𝗿𝘆() Адаптивная логика на JavaScript без CSS-хаков. Показать/скрыть компоненты, изменить макеты, настроить поведение — всё реактивно, всё чисто.

5. 𝘂𝘀𝗲𝗔𝗯𝗼𝗿𝘁𝗖𝗼𝗻𝘁𝗿𝗼𝗹𝗹𝗲𝗿() Автоматически отменяет запросы на получение данных при размонтировании компонента. Никто не пишет этот хук. Пока в 2 часа ночи в продакшене не возникнет ошибка гонки.

Заметка, которую я сделал за 8+ лет: Старшие инженеры не пишут больше кода. Они используют лучшие настройки по умолчанию. Эти 5 хуков занимают в общей сложности около 150 строк. Они предотвращают тысячи строк исправлений ошибок.

Что входит в ваш стартовый набор?

#React #JavaScript #TypeScript #CustomHooks #WebDevelopment #FrontendDevelopment #ReactHooks #CleanCode #SoftwareArchitecture #CodingTips

5 пользовательских хуков, которые я копирую в каждый проект | Сетка — социальная сеть от hh.ru