refactor(InstantSearch): migrate life cycles

package.json

@@ -69,7 +69,7 @@
     "conventional-changelog-cli": "2.0.12",
     "copy-webpack-plugin": "5.0.2",
     "css-loader": "2.1.1",
-    "enzyme": "3.9.0",
+    "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.12.1",
     "enzyme-to-json": "3.3.5",
     "eslint": "5.16.0",
@@ -129,7 +129,7 @@
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Connectors.min.js",
-      "maxSize": "41 kB"
+      "maxSize": "42 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Dom.min.js",

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

@@ -1,4 +1,4 @@
-import React, { Component, Children, ReactType } from 'react';
+import React, { Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import {
   InstantSearchConsumer,
@@ -7,13 +7,15 @@ import {
   IndexContext,
 } from '../core/context';
 
+function getIndexContext(props: Props): IndexContext {
+  return {
+    targetedIndex: props.indexId || props.indexName,
+  };
+}
+
 type Props = {
   indexName: string;
-  indexId: string;
-  root: {
-    Root: ReactType;
-    props: {};
-  };
+  indexId?: string;
 };
 
 type InnerProps = Props & { contextValue: InstantSearchContext };
@@ -29,7 +31,6 @@ type State = {
  * @kind widget
  * @name <Index>
  * @propType {string} indexName - index in which to search.
- * @propType {{ Root: string|function, props: object }} [root] - Use this to customize the root element. Default value: `{ Root: 'div' }`
  * @example
  * import React from 'react';
  * import algoliasearch from 'algoliasearch/lite';
@@ -58,36 +59,31 @@ type State = {
  */
 class Index extends Component<InnerProps, State> {
   static propTypes = {
-    // @TODO: These props are currently constant.
     indexName: PropTypes.string.isRequired,
-    indexId: PropTypes.string.isRequired,
+    indexId: PropTypes.string,
     children: PropTypes.node,
-    root: PropTypes.shape({
-      Root: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.func,
-        PropTypes.object,
-      ]),
-      props: PropTypes.object,
-    }).isRequired,
   };
 
-  unregisterWidget?: () => void;
+  static getDerivedStateFromProps(props: InnerProps) {
+    return {
+      indexContext: getIndexContext(props),
+    };
+  }
 
   state = {
-    indexContext: {
-      targetedIndex: this.props.indexId,
-    },
+    indexContext: getIndexContext(this.props),
   };
 
+  unregisterWidget?: () => void;
+
   constructor(props: InnerProps) {
     super(props);
 
     this.props.contextValue.onSearchParameters(
       this.getSearchParameters.bind(this),
       {
         ais: this.props.contextValue,
-        multiIndexContext: this.state.indexContext,
+        multiIndexContext: getIndexContext(props),
       },
       this.props
     );
@@ -99,18 +95,10 @@ class Index extends Component<InnerProps, State> {
     );
   }
 
-  componentWillReceiveProps(nextProps: InnerProps) {
-    // @TODO: DidUpdate
-    if (this.props.indexName !== nextProps.indexName) {
+  componentDidUpdate(prevProps: InnerProps) {
+    if (this.props.indexName !== prevProps.indexName) {
       this.props.contextValue.widgetsManager.update();
     }
-    if (this.props.indexId !== nextProps.indexId) {
-      this.setState({
-        indexContext: {
-          targetedIndex: nextProps.indexId,
-        },
-      });
-    }
   }
 
   componentWillUnmount() {
@@ -119,24 +107,21 @@ class Index extends Component<InnerProps, State> {
     }
   }
 
-  getSearchParameters(searchParameters, props) {
+  getSearchParameters(searchParameters, props: InnerProps) {
     return searchParameters.setIndex(
       this.props ? this.props.indexName : props.indexName
     );
   }
 
   render() {
     const childrenCount = Children.count(this.props.children);
-    const { Root, props } = this.props.root;
     if (childrenCount === 0) {
       return null;
     }
     return (
-      <Root {...props}>
-        <IndexProvider value={this.state.indexContext}>
-          {this.props.children}
-        </IndexProvider>
-      </Root>
+      <IndexProvider value={this.state.indexContext}>
+        {this.props.children}
+      </IndexProvider>
     );
   }
 }

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

@@ -1,19 +1,11 @@
-import React, { Component, Children, ReactType } from 'react';
+import React, { Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import createInstantSearchManager from '../core/createInstantSearchManager';
 import { InstantSearchProvider, InstantSearchContext } from '../core/context';
 import { Store } from '../core/createStore';
 
-function validateNextProps(props, nextProps) {
-  if (!props.searchState && nextProps.searchState) {
-    throw new Error(
-      "You can't switch <InstantSearch> from being uncontrolled to controlled"
-    );
-  } else if (props.searchState && !nextProps.searchState) {
-    throw new Error(
-      "You can't switch <InstantSearch> from being controlled to uncontrolled"
-    );
-  }
+function isControlled(props: Props) {
+  return Boolean(props.searchState);
 }
 
 // @TODO: move this to the helper?
@@ -61,14 +53,11 @@ type Props = {
     searchState: SearchState
   ) => void;
   stalledSearchDelay?: number;
-  root: {
-    Root: ReactType;
-    props: {};
-  };
   resultsState: SearchResults | { [indexId: string]: SearchResults };
 };
 
 type State = {
+  isControlled: boolean;
   contextValue: InstantSearchContext;
 };
 
@@ -113,6 +102,7 @@ type State = {
 class InstantSearch extends Component<Props, State> {
   static defaultProps = {
     stalledSearchDelay: 200,
+    refresh: false,
   };
 
   static propTypes = {
@@ -128,7 +118,7 @@ class InstantSearch extends Component<Props, State> {
 
     createURL: PropTypes.func,
 
-    refresh: PropTypes.bool.isRequired,
+    refresh: PropTypes.bool,
 
     searchState: PropTypes.object,
     onSearchStateChange: PropTypes.func,
@@ -137,77 +127,77 @@ class InstantSearch extends Component<Props, State> {
     resultsState: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 
     children: PropTypes.node,
-
-    root: PropTypes.shape({
-      Root: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.func,
-        PropTypes.object,
-      ]),
-      props: PropTypes.object,
-    }).isRequired,
-
     stalledSearchDelay: PropTypes.number,
   };
 
-  isControlled: boolean;
-  isUnmounting: boolean;
-  aisManager: InstantSearchManager;
-
-  constructor(props: Props) {
-    super(props);
-    this.isControlled = Boolean(props.searchState);
-    const initialState = this.isControlled ? props.searchState : {};
-    this.isUnmounting = false;
-
-    this.aisManager = createInstantSearchManager({
-      indexName: props.indexName,
-      searchClient: props.searchClient,
-      initialState,
-      resultsState: props.resultsState,
-      stalledSearchDelay: props.stalledSearchDelay,
-    });
-
-    this.state = {
+  static getDerivedStateFromProps(
+    nextProps: Props,
+    prevState: State
+  ): Partial<State> {
+    return {
       contextValue: {
-        onInternalStateUpdate: this.onWidgetsInternalStateUpdate.bind(this),
-        createHrefForState: this.createHrefForState.bind(this),
-        onSearchForFacetValues: this.onSearchForFacetValues.bind(this),
-        onSearchStateChange: this.onSearchStateChange.bind(this),
-        onSearchParameters: this.onSearchParameters.bind(this),
-        store: this.aisManager.store,
-        widgetsManager: this.aisManager.widgetsManager,
-        mainTargetedIndex: this.props.indexName,
+        ...prevState.contextValue,
+        mainTargetedIndex: nextProps.indexName,
       },
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    // @TODO: DidUpdate
-    validateNextProps(this.props, nextProps);
-
-    if (this.props.indexName !== nextProps.indexName) {
-      this.aisManager.updateIndex(nextProps.indexName);
-      this.setState(state => ({
-        contextValue: {
-          ...state.contextValue,
-          mainTargetedIndex: nextProps.indexName,
-        },
-      }));
+  isUnmounting: boolean = false;
+  aisManager: InstantSearchManager = createInstantSearchManager({
+    indexName: this.props.indexName,
+    searchClient: this.props.searchClient,
+    initialState: this.props.searchState || {},
+    resultsState: this.props.resultsState,
+    stalledSearchDelay: this.props.stalledSearchDelay,
+  });
+
+  state = {
+    isControlled: isControlled(this.props),
+    contextValue: {
+      onInternalStateUpdate: this.onWidgetsInternalStateUpdate.bind(this),
+      createHrefForState: this.createHrefForState.bind(this),
+      onSearchForFacetValues: this.onSearchForFacetValues.bind(this),
+      onSearchStateChange: this.onSearchStateChange.bind(this),
+      onSearchParameters: this.onSearchParameters.bind(this),
+      store: this.aisManager.store,
+      widgetsManager: this.aisManager.widgetsManager,
+      mainTargetedIndex: this.props.indexName,
+    },
+  };
+
+  componentDidUpdate(prevProps: Props) {
+    const nextIsControlled = isControlled(this.props);
+
+    if (!this.state.isControlled && nextIsControlled) {
+      throw new Error(
+        "You can't switch <InstantSearch> from being uncontrolled to controlled"
+      );
     }
 
-    if (this.props.refresh !== nextProps.refresh) {
-      if (nextProps.refresh) {
-        this.aisManager.clearCache();
-      }
+    if (this.state.isControlled && !nextIsControlled) {
+      throw new Error(
+        "You can't switch <InstantSearch> from being controlled to uncontrolled"
+      );
     }
 
-    if (this.props.searchClient !== nextProps.searchClient) {
-      this.aisManager.updateClient(nextProps.searchClient);
+    /*
+     * Clear cache when `refresh` changes to `true`.
+     * Prevents users to always clear the cache on render if they forget to revert it to `false`.
+     */
+    if (this.props.refresh !== prevProps.refresh && this.props.refresh) {
+      this.aisManager.clearCache();
     }
 
-    if (this.isControlled) {
-      this.aisManager.onExternalStateUpdate(nextProps.searchState);
+    if (this.state.isControlled) {
+      this.aisManager.onExternalStateUpdate(this.props.searchState);
+    }
+
+    if (prevProps.indexName !== this.props.indexName) {
+      this.aisManager.updateIndex(this.props.indexName);
+    }
+
+    if (prevProps.searchClient !== this.props.searchClient) {
+      this.aisManager.updateClient(this.props.searchClient);
     }
   }
 
@@ -218,7 +208,7 @@ class InstantSearch extends Component<Props, State> {
 
   createHrefForState(searchState: SearchState) {
     searchState = this.aisManager.transitionState(searchState);
-    return this.isControlled && this.props.createURL
+    return this.state.isControlled && this.props.createURL
       ? this.props.createURL(searchState, this.getKnownKeys())
       : '#';
   }
@@ -228,7 +218,7 @@ class InstantSearch extends Component<Props, State> {
 
     this.onSearchStateChange(searchState);
 
-    if (!this.isControlled) {
+    if (!this.state.isControlled) {
       this.aisManager.onExternalStateUpdate(searchState);
     }
   }
@@ -260,17 +250,14 @@ class InstantSearch extends Component<Props, State> {
   }
 
   render() {
-    const childrenCount = Children.count(this.props.children);
-    const { Root, props } = this.props.root;
-    if (childrenCount === 0) {
+    if (Children.count(this.props.children) === 0) {
       return null;
     }
+
     return (
-      <Root {...props}>
-        <InstantSearchProvider value={this.state.contextValue}>
-          {this.props.children}
-        </InstantSearchProvider>
-      </Root>
+      <InstantSearchProvider value={this.state.contextValue}>
+        {this.props.children}
+      </InstantSearchProvider>
     );
   }
 }

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

@@ -55,7 +55,8 @@ describe('Index', () => {
   it('calls update if indexName prop changes', () => {
     const context = createContext();
 
-    const wrapper = shallow(
+    // componentDidUpdate wasn't called on `shallow`
+    const wrapper = mount(
       <IndexComponentWithoutContext {...requiredProps} contextValue={context}>
         <div />
       </IndexComponentWithoutContext>