PROBLEM
Sometimes, wrapping a React component with multiple High Order Components (HOC) can get rather unwieldy and unreadable.
For example:-
import React from 'react';
import { withRouter } from 'react-router-dom';
import { withStyles } from 'material-ui/styles';
import withWidth from 'material-ui/utils/withWidth';
class MyComponent extends React.PureComponent {
// ...
}
export default withRouter(withStyles(styles)(withWidth()(MyComponent)));
SOLUTION
To fix this, we can leverage recompose library.
Now, we can rewrite the above example like this:-
import React from 'react';
import { withRouter } from 'react-router-dom';
import { withStyles } from 'material-ui/styles';
import withWidth from 'material-ui/utils/withWidth';
import compose from 'recompose/compose';
class MyComponent extends React.PureComponent {
// ...
}
export default compose(
withRouter,
withStyles(styles),
withWidth(),
)(MyComponent);
Keep in mind, the HOC order defined in compose(..) is important.
Leave a Reply