В чем разница между Hook и HOC

Hooks — это функции, которые позволяют использовать состояние и другие возможности React без написания классов. Они работают внутри функциональных компонентов (например, useState, useEffect).

HOC (Higher-Order Component) — это функция, которая принимает компонент и возвращает новый компонент с дополнительной логикой (например, connect из Redux).

Различия:

1. Синтаксис: Hooks — это функции, HOC — компоненты-обёртки.
2. Сложность: HOC могут создавать избыточную вложенность, хуки упрощают композицию.
3. Переиспользование: HOC часто требуют boilerplate-кода, хуки — нет.

Пример хука:

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Пример HOC:

function withCounter(Component) {
  return function WrappedComponent(props) {
    const [count, setCount] = useState(0);
    return <Component {...props} count={count} setCount={setCount} />;
  };
}