From e3a6479989faee3e129c8386d0e5db9d12b81bde Mon Sep 17 00:00:00 2001 From: Tom Beckenhauer Date: Mon, 9 Mar 2020 09:16:24 -0400 Subject: [PATCH] Update legacy lifecycle methods (#2435) * Update legacy lifecycle methods componentWillReceiveProps -> componentDidUpdate * Update legacy lifecycle methods componentWillReceiveProps -> componentDidUpdate * Update higher-order-components.md Co-authored-by: Sunil Pai --- content/docs/higher-order-components.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md index a7a123abe..b10392c9b 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!