There are a few problems with this. One is that the input component cannot be reused separately from the enhanced component. More crucially, if you apply another HOC to `EnhancedComponent` that *also* mutates `componentWillReceiveProps`, the first HOC's functionality will be overridden! This HOC also won't work with function components, which do not have lifecycle methods.
There are a few problems with this. One is that the input component cannot be reused separately from the enhanced component. More crucially, if you apply another HOC to `EnhancedComponent` that *also* mutates `componentDidUpdate`, the first HOC's functionality will be overridden! This HOC also won't work with function components, which do not have lifecycle methods.
Mutating HOCs are a leaky abstraction—the consumer must know how they are implemented in order to avoid conflicts with other HOCs.
Mutating HOCs are a leaky abstraction—the consumer must know how they are implemented in order to avoid conflicts with other HOCs.
@ -199,9 +199,9 @@ Instead of mutation, HOCs should use composition, by wrapping the input componen
```js
```js
function logProps(WrappedComponent) {
function logProps(WrappedComponent) {
return class extends React.Component {
return class extends React.Component {
componentWillReceiveProps(nextProps) {
componentDidUpdate(prevProps) {
console.log('Current props: ', this.props);
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
console.log('Previous props: ', prevProps);
}
}
render() {
render() {
// Wraps the input component in a container, without mutating it. Good!
// Wraps the input component in a container, without mutating it. Good!