Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Higher-order Components
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {
return <ComposedComponent {...this.props} data={this.state.data} />;
}
};
import { Enhance } from "./Enhance";
class MyComponent {
render() {
if (!this.data) return <div>Waiting...</div>;
return <div>{this.data}</div>;
}
}
export default Enhance(MyComponent); // Enhanced component
@taijiweb
Copy link

taijiweb commented Mar 22, 2016

domcom(https://github.com/taijiweb/domcom) can have true inheritance.

@bySabi
Copy link

bySabi commented May 6, 2016

This are minimal skeleton for higher order components

If your higher order component need state or lifecycle methods use this:

const hoc = C => class _hoc extends React.Component {
    render() {
      return <C { ...this.props }/>;
    }
  }

For debugging purpose with React Tools I match function name with class name, Ex: hoc match _hoc. This way I know what is a "real" component and what a HOC, it looks like a function.

If you don´t need state or lifecycle methods on your HOC this snip is more functional:

const hoc = C => function _hoc(props) {
    return <C { ...props }/>;
  }

Same like first snip, I use a named function _hoc maching hoc for debugging purpose.

@mmollaverdi
Copy link

mmollaverdi commented May 11, 2016

I've written about some real world examples of higher order components we use in our application here:
http://techblog.realestate.com.au/reactjs-real-world-examples-of-higher-order-components/

Comments are more than welcome

@MerlinYu
Copy link

MerlinYu commented Jun 3, 2016

I use this way
var MyComponent = Enhance(class extends Component {
render() {
if (!this.data) return

Waiting...
;
return
{this.data}
;
}
});
export default MyComponent; // Enhanced component

But it meets a problem "Minified exception occurred;use the non-minfied dev environment for the full error message and additional helpful warnings." How to deal with this probleam?

@jeromepl
Copy link

jeromepl commented Jun 16, 2016

I created a forked showing how I used this with ES7 decorators: (Also fixes a few issue with this gist)
https://gist.github.com/jeromepl/2f7df563f273563261690221c22aa0af

@seeden
Copy link

seeden commented Jun 24, 2016

I created two packages which you can use for creating of high-order components.
With react-provide-props you can easily create high-order component which will add props to other components. It will create state-less high-order compoment.
Second package react-high-order-provider you can use for state-full high-order components where you can define your own logic.

Both libraries will create function compatible with ES7 decorators as well.

@Musbell
Copy link

Musbell commented Jul 9, 2016

Hey guys! you can checkout my example.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

let HOC = WrappedComponent => {
return class extends Component{
constructor(props){
super(props);
this.state = {
name : ' '
};
this.onNameChange = this.onNameChange.bind(this)
}
onNameChange(e){
this.setState({
name : e.target.value
})
}
render(){
const newProps = {
value : this.state.name,
onChange : this.onNameChange
};
return <WrappedComponent {...this.props} {...newProps} {...this.state}/>
}
}
};

let App = HOC((props) => {
return(
<div> <input type="text" {...props}/> <p>{props.name}</p> </div>
)
});

ReactDOM.render(
<App />,
document.getElementById('root')
);

@Musbell
Copy link

Musbell commented Jul 9, 2016

@seeden
I love the libraries, they are both great 👍

@stiofand
Copy link

stiofand commented May 4, 2017

Interesting examples, is there any particular advantage of attempting to enforce OO over HOC? Anyhow, fun to follow the thread. Pedantic point of note, why in all the ES6 / ES7 examples are there still references to "var"? Also arrow functions implicitly return whatever is after them, so if no multi-expressions are needed, then no need for the curlies!

Anyhow.. I digress....

@rwieruch
Copy link

rwieruch commented May 11, 2017

I love this gist, because it shows a simple example for a higher order component.

I am not sure if this is the perfect place, but maybe people are interested to read a more elaborated gentle introduction to higher order components when they come across this gist looking for HOC examples.

@Ramyace4455
Copy link

Ramyace4455 commented Jun 2, 2017

Hello everyone, I came across a good blog which is about React Higher Order components. It was completely awesome and explained in well manner. Have a look into it: Link
I hope you will learn knew content about React HOCs.
Regards,
ReactJS Online Training

@Musbell
Copy link

Musbell commented Jun 11, 2017

Thanks for the links 👍 @rwieruch @Ramyace4455

@kiransiluveru
Copy link

kiransiluveru commented Aug 15, 2018

is this the first ever written HOC ?

@danny-andrews-snap
Copy link

danny-andrews-snap commented Aug 21, 2018

Wow, the React community really flubbed on terminology here. In this gist, the component utilizing what we call the HoC is called the HoC, whereas the thing we call the HoC is called an "Enhancer." This makes way more sense, as a "HoC," as it is known today, is not itself a component at all. Sad!!

@ivenxu
Copy link

ivenxu commented Nov 24, 2018

Not quite see the difference between HoC and old decorator pattern. I would say HoC is a nice react implementation of decorator pattern.

@dexygen
Copy link

dexygen commented Jan 14, 2019

Your constructor needs super(props) as the first line

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment