diff --git a/packages/react-instantsearch-dom/src/components/RangeInput.js b/packages/react-instantsearch-dom/src/components/RangeInput.js index 09cc718238..1316ab73a2 100644 --- a/packages/react-instantsearch-dom/src/components/RangeInput.js +++ b/packages/react-instantsearch-dom/src/components/RangeInput.js @@ -32,24 +32,13 @@ export class RawRangeInput extends Component { this.state = this.normalizeStateForRendering(props); } - componentWillReceiveProps(nextProps) { - // @TODO: Render, worst case in Derived State - - // In react@16.0.0 the call to setState on the inputs trigger this lifecycle hook - // because the context has changed (for react). I don't think that the bug is related - // to react because I failed to reproduce it with a simple hierarchy of components. - // The workaround here is to check the differences between previous & next props in order - // to avoid to override current state when values are not yet refined. In the react documentation, - // they DON'T categorically say that setState never run componentWillReceiveProps. - // see: https://reactjs.org/docs/react-component.html#componentwillreceiveprops - + componentDidUpdate(prevProps) { if ( - nextProps.canRefine && - (this.props.canRefine !== nextProps.canRefine || - this.props.currentRefinement.min !== nextProps.currentRefinement.min || - this.props.currentRefinement.max !== nextProps.currentRefinement.max) + this.props.canRefine && + (prevProps.currentRefinement.min !== this.props.currentRefinement.min || + prevProps.currentRefinement.max !== this.props.currentRefinement.max) ) { - this.setState(this.normalizeStateForRendering(nextProps)); + this.setState(this.normalizeStateForRendering(this.props)); } } diff --git a/packages/react-instantsearch-dom/src/components/__tests__/RangeInput.js b/packages/react-instantsearch-dom/src/components/__tests__/RangeInput.js index 908c208a83..030b53b396 100644 --- a/packages/react-instantsearch-dom/src/components/__tests__/RangeInput.js +++ b/packages/react-instantsearch-dom/src/components/__tests__/RangeInput.js @@ -167,7 +167,7 @@ describe('RawRangeInput', () => { expect(component).toMatchSnapshot(); }); - describe('willReceiveProps', () => { + describe('didUpdate', () => { it('expect to update state when props have changed ', () => { const props = { canRefine: false,