chore(life cycle): add comments where change is necessary

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.tsx

@@ -95,6 +95,7 @@ class Index extends Component<InnerProps, State> {
   }
 
   componentWillReceiveProps(nextProps: InnerProps) {
+    // @TODO: DidUpdate
     if (this.props.indexName !== nextProps.indexName) {
       this.props.contextValue.widgetsManager.update();
     }

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

@@ -175,7 +175,8 @@ class InstantSearch extends Component<Props, State> {
     };
   }
 
-  componentWillReceiveProps(nextProps: Props) {
+  componentWillReceiveProps(nextProps) {
+    // @TODO: DidUpdate
     validateNextProps(this.props, nextProps);
 
     if (this.props.indexName !== nextProps.indexName) {

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

@@ -101,6 +101,7 @@ export function createConnectorWithoutContext(
       };
 
       componentWillMount() {
+        // @TODO: constructor
         if (connectorDesc.getSearchParameters) {
           this.props.contextValue.onSearchParameters(
             connectorDesc.getSearchParameters.bind(this),
@@ -130,6 +131,7 @@ export function createConnectorWithoutContext(
       }
 
       componentWillReceiveProps(nextProps) {
+        // @TODO: split in Derived for state & DidUpdate
         if (!isEqual(this.props, nextProps)) {
           this.setState({
             providedProps: this.getProvidedProps(nextProps),

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

@@ -75,6 +75,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) {
@@ -89,6 +90,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 (${React.version})`);
         this.client.addAlgoliaAgent(`react-instantsearch (${version})`);
       }

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

@@ -12,12 +12,14 @@ class PanelCallbackHandler extends Component {
   };
 
   componentWillMount() {
+    // @TODO: didMount? -> really test this
     if (this.context.setCanRefine) {
       this.context.setCanRefine(this.props.canRefine);
     }
   }
 
   componentWillReceiveProps(nextProps) {
+    // @TODO: DidUpdate
     if (
       this.context.setCanRefine &&
       this.props.canRefine !== nextProps.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/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: {