Що таке React Hooks?

React Hooks - це функції, які дозволяють функціональним компонентам використовувати стан та інші можливості React без написання класового компонента.

Основні поняття

Що таке Hook?

Hook - це спеціальна функція, яка:

• Починається з префікса use
• Може викликати інші хуки
• Дозволяє "підключатися" до особливостей React

Основні вбудовані хуки

useState

Дозволяє додати локальний стан до функціонального компонента:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Ви натиснули {count} разів</p>
      <button onClick={() => setCount(count + 1)}>
        Натисніть мене
      </button>
    </div>
  );
}

useEffect

Дозволяє виконувати побічні ефекти у функціональних компонентах:

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]); // Залежність - ефект виконується при зміні userId

  return user ? <div>{user.name}</div> : <div>Завантаження...</div>;
}

Правила використання хуків

1. Викликайте хуки тільки на верхньому рівні - не всередині циклів, умов або вкладених функцій
2. Викликайте хуки тільки з React функцій - з функціональних компонентів або кастомних хуків

Переваги хуків

• Простіша логіка - менше шаблонного коду
• Кращий поділ коду - логіку можна виносити в кастомні хуки
• Легше тестування - функціональні компоненти простіше тестувати

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

Можна створювати власні хуки для повторного використання логіки:

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);
  
  return { count, increment, decrement, reset };
}

Поширені помилки

1. Порушення правил хуків - виклик всередині умов
2. Забування залежностей в useEffect
3. Безкінечні цикли через неправильні залежності

Хуки революціонізували розробку на React, зробивши код більш читабельним та повторно використовуваним.