June 05, 2019

# High-Order Components

An old saying “Don’t Repeat Yourself” or DRY applied to a React codebase is a worthwhile challenge.

Before delving into React, let’s get a sense of High-Order Functions:

#### `Array.map`

``Array.prototype.map(callbackfn)``

#### `Array​.prototype​.for​Each()`

``````["A", "B"].forEach(l => console.log(l));
// → A
// → B``````

#### `Typical Math Abstraction`

``````const multiply = (x) => (y) => x * y
multiply(1)(2)
// -> 2``````

#### `Wild Caught oneliner`

##### Function Composition
``const composition = (...callbacks) => callbacks.reduce((a,b) => (...args) => a(b(...args)));``

Decodes as:

``````const compose = (...callbacks) => callbacks.reduce((a, b) => (...args) => a(b(...args)));
const addTwo = x => x + 2;
const double = x => x * 2;
const square = x => x * x;
const fn = compose(addTwo, double, square);

### HOC in React …

##### HOC is a pattern that emerges from React’s compositional nature.

Note, that HOC is an advanced technique in React, they are not part of React API.

These are the means to abstract over given React Components to implement piece of logic and return a freshly augmented Component

Prototype is this:

``const AugmentedComponent = HOC(OriginalComponent);``

To demonstrate, the following function returns component `<ReversedNameComponent>` with reversed innerText of originally passed `<OriginalNameComponent>`:

``````const reverse = ChildComponent =>
({ children, ...props }) =>
<ChildComponent {...props}>
{children.split("").reverse().join("")}
</ChildComponent>

const OriginalNameComponent = props => <span>{props.children}</span>

const ReversedNameComponent = reverse(OriginalNameComponent)``````

Receives `ChildComponent`, splits string on Array of characters, reverses the order, joins into new string, returns result back into Component’s `innerText`