fix(compat): upgrade Panel lifecycle

examples/next/pages/index.js

@@ -50,6 +50,7 @@ export default class extends React.Component {
   }
 
   componentWillReceiveProps() {
+    // @TODO: probably derived state
     this.setState({ searchState: qs.parse(window.location.search.slice(1)) });
   }
 

examples/react-native/src/Home.js

@@ -121,8 +121,6 @@ class Home extends Component {
     };
   }
 
-  componentWillReceiveProps() {}
-
   onSearchStateChange = nextState => {
     this.setState({ searchState: { ...this.state.searchState, ...nextState } });
   };

examples/react-native/src/Price.js

@@ -81,6 +81,7 @@ class Range extends React.Component {
     };
   }
   componentWillReceiveProps(sliderState) {
+    // @TODO: derived state
     if (sliderState.canRefine) {
       this.setState({
         currentValues: {

examples/react-router-v3/src/App.js

@@ -25,6 +25,7 @@ class App extends Component {
   }
 
   componentWillReceiveProps() {
+    // @TODO: derived state
     this.setState({ searchState: qs.parse(this.props.router.location.query) });
   }
 

examples/react-router/src/App.js

@@ -32,6 +32,7 @@ class App extends Component {
   }
 
   componentWillReceiveProps(props) {
+    // @TODO: derived state
     if (props.location !== this.props.location) {
       this.setState({ searchState: urlToSearchState(props.location) });
     }

packages/react-instantsearch-core/src/components/Index.js

@@ -45,6 +45,7 @@ class Index extends Component {
   }
 
   componentWillMount() {
+    // @TODO: constructor
     this.context.ais.onSearchParameters(
       this.getSearchParameters.bind(this),
       this.getChildContext(),
@@ -53,6 +54,7 @@ class Index extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    // @TODO: DidUpdate
     if (this.props.indexName !== nextProps.indexName) {
       this.context.ais.widgetsManager.update();
     }

packages/react-instantsearch-core/src/components/InstantSearch.js

@@ -67,6 +67,7 @@ class InstantSearch extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    // @TODO: DidUpdate
     validateNextProps(this.props, nextProps);
 
     if (this.props.indexName !== nextProps.indexName) {

packages/react-instantsearch-core/src/core/createConnector.js

@@ -109,6 +109,7 @@ export default function createConnector(connectorDesc) {
       }
 
       componentWillMount() {
+        // @TODO: constructor
         if (connectorDesc.getSearchParameters) {
           this.context.ais.onSearchParameters(
             connectorDesc.getSearchParameters.bind(this),
@@ -141,6 +142,7 @@ export default function createConnector(connectorDesc) {
       }
 
       componentWillReceiveProps(nextProps) {
+        // @TODO: split in Derived for state & DidUpdate
         if (!isEqual(this.props, nextProps)) {
           this.setState({
             props: this.getProvidedProps({

packages/react-instantsearch-core/src/core/createInstantSearch.js

@@ -74,6 +74,7 @@ export default function createInstantSearch(defaultAlgoliaClient, root) {
     }
 
     componentWillReceiveProps(nextProps) {
+      // @TODO: DidUpdate, but might be too late? If needs to be before rendering: derived State for client
       const props = this.props;
 
       if (nextProps.searchClient) {
@@ -88,6 +89,7 @@ export default function createInstantSearch(defaultAlgoliaClient, root) {
       }
 
       if (typeof this.client.addAlgoliaAgent === 'function') {
+        // @TODO: maybe DidUpdate if that's not too late, otherwise side effect in derived state
         this.client.addAlgoliaAgent(`react-instantsearch ${version}`);
       }
     }

packages/react-instantsearch-dom/src/components/PanelCallbackHandler.js

@@ -11,18 +11,18 @@ class PanelCallbackHandler extends Component {
     setCanRefine: PropTypes.func,
   };
 
-  componentWillMount() {
+  componentDidMount() {
     if (this.context.setCanRefine) {
       this.context.setCanRefine(this.props.canRefine);
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     if (
       this.context.setCanRefine &&
-      this.props.canRefine !== nextProps.canRefine
+      prevProps.canRefine !== this.props.canRefine
     ) {
-      this.context.setCanRefine(nextProps.canRefine);
+      this.context.setCanRefine(this.props.canRefine);
     }
   }
 

packages/react-instantsearch-dom/src/components/RangeInput.js

@@ -33,6 +33,8 @@ export class RawRangeInput extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    // @TODO: Render, worst case in Derived State
+
     // In [email protected] 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.

packages/react-instantsearch-dom/src/components/SearchBox.js

@@ -116,6 +116,8 @@ class SearchBox extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    // @TODO: should component maybe be controlled, otherwise Derived
+
     // Reset query when the searchParameters query has changed.
     // This is kind of an anti-pattern (props in state), but it works here
     // since we know for sure that searchParameters having changed means a

packages/react-instantsearch-dom/src/components/__tests__/PanelCallbackHandler.js

@@ -20,7 +20,7 @@ describe('PanelCallbackHandler', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  describe('willMount', () => {
+  describe('didMount', () => {
     it('expect to call setCanRefine when the context is given', () => {
       const props = {
         canRefine: true,
@@ -57,7 +57,7 @@ describe('PanelCallbackHandler', () => {
     });
   });
 
-  describe('willReceiveProps', () => {
+  describe('didUpdate', () => {
     it('expect to call setCanRefine when the context is given', () => {
       const props = {
         canRefine: true,

packages/react-instantsearch-dom/src/widgets/RangeSlider.js

@@ -30,6 +30,7 @@ class Range extends React.Component {
   state = { currentValues: { min: this.props.min, max: this.props.max } };
 
   componentWillReceiveProps(sliderState) {
+    // @TODO: Derived State, maybe render
     if (sliderState.canRefine) {
       this.setState({
         currentValues: {

stories/3rdPartyIntegrations.stories.js

@@ -30,6 +30,7 @@ class Range extends Component {
   state = { currentValues: { min: this.props.min, max: this.props.max } };
 
   componentWillReceiveProps(sliderState) {
+    // @TODO: Derived State, maybe render
     if (sliderState.canRefine) {
       this.setState({
         currentValues: {

website/examples/tourism/App.js

@@ -292,6 +292,7 @@ class Range extends Component {
   state = { currentValues: { min: this.props.min, max: this.props.max } };
 
   componentWillReceiveProps(sliderState) {
+    // @TODO: derived state
     if (sliderState.canRefine) {
       this.setState({
         currentValues: {