DEV Community

Timothy Fosteman
Timothy Fosteman

Posted on • Edited on

4

HOC React

This is my first post on dev.to
Warm hello to everyone!

There's an old saying "Don't Repeat Yourself". If applied to React codebase - a worthwhile challenge involving High Order Functions (HOF).

Before delving into code,
couple of HOF examples:

Array.map

[1, 2].map(el => el = el + 1);
// → [2, 3]
Enter fullscreen mode Exit fullscreen mode

Array​.prototype​.for​Each()

["A", "B"].forEach(l => console.log(l));
// → A
// → B
Enter fullscreen mode Exit fullscreen mode

Typical Math Abstraction

const multiply = (x) => (y) => x * y
multiply(1)(2) 
// -> 2
Enter fullscreen mode Exit fullscreen mode

Wild Caught oneliner

Function Composition
const composition = (...callbacks) => callbacks.reduce((a,b) => (...args) => a(b(...args)));
Enter fullscreen mode Exit fullscreen mode

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);
    console.log(fn(1)); // -> 4 addTwo(double(square(1)))
Enter fullscreen mode Exit fullscreen mode

HOC in React ...

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

Note, that HOC is an advanced pattern used in React, but not the part of API. You can use them to abstract functionality away but reuse it as opt-in functionality for multiple components. A higher order component takes a component and optional configuration as input and returns an enhanced version of the component. It builds up on the principle of higher order functions in JavaScript: A function that returns a function.

HOC are important later on, because you will be confronted with them when using Redux. (connect HOC in react-redux).
These are the means to abstract given React Components implementing logic and returning a freshly augmented Component

Prototype is this:

const AugmentedComponent = HOC(OriginalComponent);
Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

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

Thanks for reading!

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs