Почему хуки появились и что они заменили?

Краткий ответ

Хуки появились в React для решения фундаментальных проблем классовых компонентов, таких как сложность повторного использования логики, запутанность жизненного цикла и трудности с пониманием this. Они заменили классовые компоненты, предоставляя более простой и декларативный способ управления состоянием и побочными эффектами в функциональных компонентах.

Основные причины появления хуков:

Повторное использование логики — сложность с HOC и render-props
Сложность классов — проблемы с this и жизненным циклом
Упрощение компонентов — более читаемый и компактный код
Лучшая оптимизация — возможности для улучшений в React

Полный ответ

Хуки были представлены в React 16.8 как решение ключевых проблем, с которыми сталкивались разработчики при работе с классовыми компонентами. Они кардинально изменили подход к написанию React-компонентов.

Проблемы классовых компонентов

1. Сложность повторного использования логики

Классовые компоненты не позволяли легко повторно использовать логику состояния:

// С HOC и render-props код становился громоздким
const EnhancedComponent = withSubscription(
  withMouseTracker(
    withTheme(
      withAuth(Component)
    )
  )
);

2. Запутанный жизненный цикл

Методы жизненного цикла часто содержали несвязанные логики:

// Логика размазана по разным методам жизненного цикла
componentDidMount() {
  // Подписка на данные
  // Настройка интервалов
  // Инициализация состояния
}
 
componentDidUpdate() {
  // Обновление подписок
  // Проверка изменений пропсов
}
 
componentWillUnmount() {
  // Очистка подписок
  // Остановка интервалов
}

Что заменили хуки

1. Class Components → Function Components

Хуки позволили использовать состояние и эффекты в функциональных компонентах:

// Вместо класса - функция с хуками
function Component() {
  const [state, setState] = useState(initialValue);
  useEffect(() => {
    // Эффекты
  }, []);
  
  return <div>{/* JSX */}</div>;
}

2. HOC и Render Props → Custom Hooks

Пользовательские хуки заменили паттерны высшего порядка и render-props:

// Вместо HOC - переиспользуемый хук
function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    // Логика инициализации
  });
  
  return [value, setValue];
}

Практические примеры

Пример миграции

// Классовый компонент
class Counter extends Component {
  state = { count: 0 };
  
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  
  render() {
    return (
      <button onClick={this.increment}>
        {this.state.count}
      </button>
    );
  }
}
 
// Функциональный компонент с хуками
function Counter() {
  const [count, setCount] = useState(0);
  
  const increment = () => setCount(count + 1);
  
  return (
    <button onClick={increment}>
      {count}
    </button>
  );
}

Пример пользовательского хука

// Переиспользуемая логика в виде хука
function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = useCallback(() => setValue(!value), [value]);
  
  return [value, toggle];
}

Распространенные ошибки

1. Прямая замена без понимания

// ❌ Механическая замена без понимания концепций
function BadComponent() {
  const [state1, setState1] = useState();
  const [state2, setState2] = useState();
  const [state3, setState3] = useState();
  // ... много useState подряд
}
 
// ✅ Группировка связанного состояния
function GoodComponent() {
  const [formState, setFormState] = useState({
    name: '',
    email: '',
    age: ''
  });
}

2. Игнорирование правил хуков

// ❌ Нарушение правил хуков
function Component({ condition }) {
  if (condition) {
    const [state, setState] = useState(); // Ошибка!
  }
}
 
// ✅ Соблюдение правил хуков
function Component({ condition }) {
  const [state, setState] = useState();
  if (condition) {
    // Логика внутри условия
  }
}

Лучшие практики

Используйте пользовательские хуки — для переиспользования логики
Группируйте связанное состояние — один useState для связанных данных
Соблюдайте правила хуков — вызывайте хуки на верхнем уровне
Разделяйте логику по хукам — один хук — одна ответственность
Оптимизируйте с useCallback/useMemo — когда это действительно нужно

Совместимость

Хуки полностью совместимы с существующим кодом и могут использоваться вместе с классовыми компонентами.

Ключевые преимущества хуков

Простота — более читаемый и компактный код
Повторное использование — легкая расшарка логики между компонентами
Лучшая композиция — хуки можно комбинировать
Меньше бойлерплейта — меньше шаблонного кода
Лучшая оптимизация — возможности для улучшений в React

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

Задача для проверки знаний

Задача

Какие проблемы решают хуки по сравнению с этим классовым компонентом?

class UserProfile extends Component {
  state = {
    user: null,
    loading: true,
    error: null
  };
 
  componentDidMount() {
    this.fetchUser();
  }
 
  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      this.fetchUser();
    }
  }
 
  componentWillUnmount() {
    // Очистка, если бы была нужна
  }
 
  fetchUser = async () => {
    try {
      this.setState({ loading: true, error: null });
      const user = await fetchUser(this.props.userId);
      this.setState({ user, loading: false });
    } catch (error) {
      this.setState({ error, loading: false });
    }
  };
 
  render() {
    const { user, loading, error } = this.state;
    
    if (loading) return <Loading />;
    if (error) return <Error message={error.message} />;
    if (!user) return <NotFound />;
    
    return <UserDetails user={user} />;
  }
}

Посмотреть ответ

Ответ: Хуки решают несколько ключевых проблем этого классового компонента:

Проблемы классового компонента:

Разрозненная логика — код для загрузки данных размазан по разным методам жизненного цикла
Сложность this — необходимость использования стрелочных функций и bind
Избыточное состояние — все состояния объединены в один объект
Сложность тестирования — тесная связь методов и состояния
Громоздкость — много шаблонного кода

Решение с хуками:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        setError(null);
        const userData = await fetchUser(userId);
        setUser(userData);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
 
    fetchUser();
  }, [userId]); // Автоматическая подписка на изменение userId
 
  if (loading) return <Loading />;
  if (error) return <Error message={error.message} />;
  if (!user) return <NotFound />;
  
  return <UserDetails user={user} />;
}

Преимущества решения с хуками:

Сгруппированная логика — вся логика загрузки данных в одном useEffect
Отсутствие this — не нужно заботиться о контексте
Разделенное состояние — каждое состояние отдельно
Простота тестирования — проще мокать отдельные хуки
Компактность — меньше шаблонного кода
Автоматическая подписка — зависимости эффекта явно указаны

Хуки делают код более декларативным и понятным, устраняя необходимость запоминать сложную иерархию методов жизненного цикла.

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪