Що таке HOC (компонент вищого порядку) у React

HOC (Компонент вищого порядку) — це функція, яка приймає компонент і повертає новий компонент з додатковою логікою.

Це патерн повторного використання коду в React — він дозволяє обгортати базові компоненти, розширюючи їх функціональність без зміни вихідного коду.

Синтаксис

jsx

const withExtraLogic = (WrappedComponent) => {
  return function EnhancedComponent(props) {
    // Додаткова логіка
    return <WrappedComponent {...props} />;
  };
};

Приклад HOC: логування пропсів

jsx

function withLogger(WrappedComponent) {
  return function LoggerComponent(props) {
    console.log("Props:", props);
    return <WrappedComponent {...props} />;
  };
}

const Hello = ({ name }) => <h1>Hello, {name}</h1>;

const HelloWithLogger = withLogger(Hello);

// Використання
<HelloWithLogger name="World" />;

При кожному рендерингу ви побачите поточні пропси, передані компоненту, в консолі.

Де використовуються HOC

Часто використовуються для:

Авторизації (обгортання компонентів, доступних лише авторизованим користувачам)
З'єднання з Redux (connect)
Обгортання макетів (наприклад, з темами, мовами)
Додавання загальних обробників або побічних ефектів

Важливо пам'ятати

HOC не модифікує переданий компонент, а створює новий
Завжди копіюйте пропси за допомогою ...props, щоб передати їх далі
HOC можуть бути комбіновані, але важливо не ускладнювати ланцюг

Приклад HOC з useEffect

jsx

function withFetch(WrappedComponent, url) {
  return function ComponentWithData(props) {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch(url)
        .then((res) => res.json())
        .then(setData);
    }, [url]);

    return <WrappedComponent {...props} data={data} />;
  };
}

Тепер будь-який компонент може бути обгорнутий у withFetch, щоб отримати дані з API.

Висновок:

HOC — це потужний спосіб повторного використання логіки між компонентми без дублювання коду. Це особливо корисно при написанні функціональності, що охоплює кілька компонентів: логери, захист маршрутів, обробка даних тощо.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Що таке HOC (компонент вищого порядку) у React

#Синтаксис

#Приклад HOC: логування пропсів

#Де використовуються HOC

#Важливо пам'ятати