1. Czym jest HOC (Higher-Order-Component)?

Higher Order Component (HOC) to komponent, który jest opakowaniem na inny komponent. Pozwala na stworzenie np. wspólnych właściwości dla kilku komponentów, ustandaryzowanie przekazywanych do nich propsów lub przeprowadzenie operacji przed wyrenderowaniem komponentu.

W rzeczywistości jest to funkcja, która przyjmuje jako argument komponent A. Funkcja ta zwraca inny komponent B, który wykonuje operacje i renderuje przekazany wcześniej komponent A, wzbogacony o inne lub zmodyfikowane właściwości.

Funkcji tej można użyć do zadeklarowania nowego, opakowanego komponentu.

interface MyComponentProps {
    label: string
}
const MyComponent: FC<MyComponentProps> = ({label}) => {
    return <>Label: {label}</>;
}

const requiredComponent = (Component: FC): FC => ({label, ...props}) => {
    return <Component {...props} label={`${label}*`} />;
};

const RequiredComponent = requiredComponent(MyComponent);

<RequiredComponent label={"Email"} /> // Label: Email*

W powyższym przykładzie, każdy komponent opakowany w requiredComponent otrzyma gwiazdkę na końcu łańcucha znaków przekazanego do właściwości label. Częstym zastosowaniem HOC jest np. dodanie walidacji pól komponentów formularza lub inne uwspolnienie ich mechaniki,

HOC mogą być zarówno komponentami funkcyjnymi jak klasowymi.