Hands-On Design Patterns with React Native

Using HOCs instead

I believe that you can easily translate the preceding use case into HOC. Let's do this together, and then we will discuss why HOCs are better:

// Chapter 2_View patterns/ Example 13/ App.jsconst withLogger = (ComponentToEnrich, logText) =>    class WithLogger extends React.Component {        componentDidMount = () => console.log(            logText || 'Component has been rendered successfully!'        );        render = () => <ComponentToEnrich {...this.props} />;    };const App = () => (    <View style={styles.container}>        <Text>Some text in a component with mixin.</Text>    </View>);export default withLogger(withLogger(App), 'Some other log msg');

The first thing you will immediately spot is that HOCs stack on top of each other. HOCs literally compose with each ...