Skip to content

Instantly share code, notes, and snippets.

Last active September 19, 2022 15:13
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={} />;
import { Enhance } from "./Enhance";
class MyComponent {
render() {
if (! return <div>Waiting...</div>;
return <div>{}</div>;
export default Enhance(MyComponent); // Enhanced component
Copy link

Musbell commented Jun 11, 2017

Thanks for the links 👍 @rwieruch @Ramyace4455

Copy link

is this the first ever written HOC ?

Copy link

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!!

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.

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