Skip to content

Instantly share code, notes, and snippets.

@catalin-enache
Created January 11, 2016 11:15
Show Gist options
  • Save catalin-enache/90ba954a3d8312fc516e to your computer and use it in GitHub Desktop.
Save catalin-enache/90ba954a3d8312fc516e to your computer and use it in GitHub Desktop.
ES6 class decoration - aka Higher-Order Components
import React from 'react';
class MyComponent extends React.Component {
componentDidMount() {
console.log('MyComponent did mount - do specific stuff');
}
render() {
return (<div>MyComponent</div>);
}
}
let Decorator = ComposedComponent => {
return class extends ComposedComponent { // instead of class extends React.Component
componentDidMount() {
super.componentDidMount(); // allow ComposedComponent perform its stuff
console.log('Decorator did mount - do decorator stuff');
}
}
}
// decorate MyComponent with Decorator
MyComponent = Decorator(MyComponent);
let myComponent = new MyComponent();
myComponent.componentDidMount(); // simulate React lifecycle
// prints:
// MyComponent did mount - do specific stuff
// Decorator did mount - do decorator stuff
@rdewolff
Copy link

rdewolff commented Jul 3, 2016

Seems really a nice an elegant way.

Any known downsides from using decorators with React.js?

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