Study of Higher Order Components (HOC's) in React, starting from https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e

Continuing with https://www.codingame.com/playgrounds/8595/reactjs-higher-order-components-tutorial

React's HOC page

Dan Abramov post on React Components, Elements, and Instances

A Higher Order Component is just a React component that wraps another one.

This pattern is usually implementd as a function which is basically a class factory with the following signature:

hocFactory:: W: React.Component => E: React.Component

Where W (WrappedComponent) is the React.Component being wrapped and E (Enhanced Component) is the new HOC React.Component being returned.

"Wrap" can mean one of two things:

1. Props proxy: the HOC manipulates the props being passed to the _WrappedComponent W_ or
2. Inheritance Inversion: The HOC extends the _WrappedComponent W_

At a high level, HOC enables:

• Code reuse, logic, and bootstrap abstraction
• Render highjacking
• State abstraction and manipulation
• Props manipulation

function ppHOC(WrappedComponent)
return class PP extends React.Component {
        render() {
            return <WrappedComponent {...this.props} />
        }
    }
}

The render method of the HOC returns a React Element of the type of the WrappedComponent. The props the HOC receives are also passed through, hence the name Props Proxy.

NOTE:

<WrappedComponent {...this.props} />
//is equivalent to
React.createElement(WrappedComponent, this.props, null)

They both create a React Element that describes what React should render in its reconcilliation process.

What can be done with Props Proxy?

• Manipulating props
• Accessing the instance via refs
• Abstracting State
• Wrapping the WrappedComponent with other elements

Manipulating Props You can read, add, edit and remove the props that are being passed to the WrappedCompnent. Be careful with deleting or editing important props.

Example:

function ppHOC(WrappedComponent) {
    return class PP extends React.Component {
        render() {
            const newProps = {
                user: currentLoggedInUser
            }
            return 
            return 
        }
    }
}

Accessing the instance via Refs You can access this (the instance of WrappedComponent) with a ref, but you will need a fill initial normal render of the WrappedComponent for the ref to be calculated. This means you need to return the WrappedComponent from the HOC render method and move React through the reconciliation process in order to create the ref.

function refsHOC(WrappedComponent) {
    return class RefsHOC extends React.Component {
        proc(wrappedComponentInstance) {
            wrappedComponentInstance.method()
        }

        render() {
            const props = Object.assign({}, this.props, {refs: this.proc.bind(this)})
        }
    }
}

When the Wrapped Component is rendered the ref callback will be executed, creating a reference to the WrappedComponent instance. This can be used for adding and reading instance props and calling instance methods.

State abstraction

Create a React app that subscribes to three different data sources.

1. Weather Report
2. Comments thread
3. Blog post

Use an HOC to manage data subscription for each.