From a8f0128f9c01bf654f1be2d27e6d3ebade911c45 Mon Sep 17 00:00:00 2001 From: Nathan Sankbeil <nathan.sankbeil@brandingbrand.com> Date: Mon, 30 Jul 2018 18:06:25 -0400 Subject: [PATCH] fix(fsproductindex): Fix infinite loop of requesting reviews Since the requestReviews method now alters the component's state rather than triggering an update that results in new props being passed in, the props/state commerceData in getDerivedStateFromProps were never equal. This caused the subsequent componentDidUpdate call to always request a new set of reviews. --- .../src/components/ProductIndexProvider.tsx | 29 +++---------------- 1 file changed, 4 insertions(+), 25 deletions(-) diff --git a/packages/fsproductindex/src/components/ProductIndexProvider.tsx b/packages/fsproductindex/src/components/ProductIndexProvider.tsx index c9a9f68738..7f2c87f7bd 100644 --- a/packages/fsproductindex/src/components/ProductIndexProvider.tsx +++ b/packages/fsproductindex/src/components/ProductIndexProvider.tsx @@ -132,33 +132,12 @@ function withProductIndexData< type ResultState = WithProductIndexState<ProductType, IdxType>; class ProductIndexProvider extends Component<ResultProps, ResultState> { - static getDerivedStateFromProps( - nextProps: ResultProps, - prevState: ResultState - ): Partial<ResultState> | null { - if (!isEqual(nextProps.commerceData, prevState.commerceData)) { - return { - commerceData: nextProps.commerceData, - commerceDataDirty: true - }; - } - - return null; - } - - constructor(props: ResultProps) { - super(props); - - this.state = { - commerceDataDirty: true - }; - } - /** - * Request new reviews if commerce data is dirty + * Request new reviews if commerce data has changed + * @param {ResultProps} prevProps - Previously set Props */ - componentDidUpdate(): void { - if (this.state.commerceDataDirty) { + componentDidUpdate(prevProps: ResultProps): void { + if (!isEqual(this.props.commerceData, prevProps.commerceData)) { if (!this.props.disableReviews) { this.requestReviews().catch(err => console.warn('Could not get reviews', err)); }