diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index a7a123ab..b10392c9 100644 --- a/content/docs/higher-order-components.md +++ b/content/docs/higher-order-components.md @@ -177,9 +177,9 @@ Resist the temptation to modify a component's prototype (or otherwise mutate it) ```js function logProps(InputComponent) { - InputComponent.prototype.componentWillReceiveProps = function(nextProps) { + InputComponent.prototype.componentDidUpdate = function(prevProps) { console.log('Current props: ', this.props); - console.log('Next props: ', nextProps); + console.log('Previous props: ', prevProps); }; // The fact that we're returning the original input is a hint that it has // been mutated. @@ -190,7 +190,7 @@ function logProps(InputComponent) { const EnhancedComponent = logProps(InputComponent); ``` -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. @@ -199,9 +199,9 @@ Instead of mutation, HOCs should use composition, by wrapping the input componen ```js function logProps(WrappedComponent) { return class extends React.Component { - componentWillReceiveProps(nextProps) { + componentDidUpdate(prevProps) { console.log('Current props: ', this.props); - console.log('Next props: ', nextProps); + console.log('Previous props: ', prevProps); } render() { // Wraps the input component in a container, without mutating it. Good!