How to replace mixins in React?

I recently saw two posts about this topic which I am interested in. The first post is: Mixins Are Dead.

And there I saw the suggestion that mixins could be replaced with high order components. I will copy the code from a gist so you can see it here:

//Enchanced component
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={} />;

//High order component
import { Enhance } from "./Enhance";
class MyComponent {
  render() {
    if (! return <div>Waiting...</div>;
    return <div>{}</div>;
export default Enhance(MyComponent); // Enhanced component


You may also like...