🔖 4 пользовательских хука React: must-know

Упрощаем работу с React через кастомные хуки.


1️⃣ useMount

Задача: выполнить код только при первом рендере

Проблема: useEffect(() => {}, []) — непонятно, что выполняется один раз

Решение: useMount(() => {}) — явная семантика


2️⃣ useUnmount

Задача: выполнить код при размонтировании

Проблема: useEffect(() => { return () => {} }, []) — неочевидный cleanup

Решение: useUnmount(() => {}) — явная семантика


3️⃣ useUpdateEffect

Задача: выполнить код только при изменении зависимостей (не при монтировании)

Проблема: useEffect(() => {}, [count]) — выполняется и при первом рендере

Решение: useUpdateEffect(() => {}, [count]) — пропускает первый рендер


4️⃣ useSetState

Задача: упростить работу с объектами (как в классовых компонентах)

Проблема:

setPerson({ ...person, name: 'medium' })

Постоянное копирование объекта

Решение:

setPerson({ name: 'medium' })

Автоматическое слияние состояния


💡 Преимущества

✅ Читаемый самодокументируемый код
✅ Переиспользуемая логика
✅ Меньше ошибок и boilerplate
✅ Явная семантика


Итог ⬇️

Кастомные хуки решают типовые задачи и делают код понятнее. Эти 4 хука — must-have для React-разработчика.


📎 Статья

🎙 Новости

📝 База вопросов