From 5efaac1f2fc38cce6508344d6657af4aeb862820 Mon Sep 17 00:00:00 2001
From: vvo <vincent.voyer@algolia.com>
Date: Wed, 10 Feb 2016 16:59:36 +0100
Subject: [PATCH] perf(React, widgets): implement shouldComponentUpdate, reduce
 bind

changes:
- stop computing static things in every render() call
- avoid using bind and creating too much function references
- leverage static properties (no bind) and use shouldComponentUpdate
were relevant
---
 src/components/ClearAll/ClearAll.js           |  14 +-
 .../CurrentRefinedValues.js                   |   5 +
 src/components/Hits.js                        |   8 ++
 src/components/Pagination/Pagination.js       |  28 ++--
 src/components/Pagination/PaginationLink.js   |  19 ++-
 .../Pagination/__tests__/Pagination-test.js   |   8 +-
 src/components/PoweredBy/PoweredBy.js         |   4 +
 src/components/PriceRanges/PriceRanges.js     |  26 ++--
 src/components/PriceRanges/PriceRangesForm.js |  10 +-
 .../PriceRanges/__tests__/PriceRanges-test.js |  38 +-----
 .../RefinementList/RefinementList.js          |  34 +++--
 .../RefinementList/RefinementListItem.js      |  49 +++++++
 .../__tests__/RefinementList-test.js          | 129 +++++++++---------
 .../__tests__/RefinementListItem-test.js      |  58 ++++++++
 src/components/Selector.js                    |  12 +-
 src/components/Slider/Slider.js               |  12 +-
 src/components/Stats/Stats.js                 |   5 +
 src/components/Template.js                    |  66 +++++----
 src/decorators/headerFooter.js                |  26 ++--
 src/lib/InstantSearch.js                      |   8 +-
 .../clear-all/__tests__/clear-all-test.js     |   1 +
 src/widgets/clear-all/clear-all.js            |  36 +++--
 .../__tests__/current-refined-values-test.js  |  74 +++++++---
 .../current-refined-values.js                 |   7 +-
 .../__tests__/hierarchical-menu-test.js       |  77 ++++++-----
 .../hierarchical-menu/hierarchical-menu.js    |  86 ++++++------
 .../__tests__/hits-per-page-selector-test.js  |  14 +-
 .../hits-per-page-selector.js                 |  23 ++--
 src/widgets/hits/__tests__/hits-test.js       |   1 +
 src/widgets/hits/hits.js                      |   9 +-
 src/widgets/menu/menu.js                      |  66 +++++----
 .../__tests__/numeric-refinement-list-test.js |  36 +++--
 .../numeric-refinement-list.js                |  62 ++++-----
 .../__tests__/numeric-selector-test.js        |   6 +-
 .../numeric-selector/numeric-selector.js      |  34 +++--
 .../pagination/__tests__/pagination-test.js   |   3 +
 src/widgets/pagination/pagination.js          |  53 ++++---
 .../__tests__/price-ranges-test.js            |  30 ++--
 src/widgets/price-ranges/price-ranges.js      |  98 ++++++-------
 .../__tests__/range-slider-test.js            |   1 +
 src/widgets/range-slider/range-slider.js      |  27 ++--
 .../__tests__/refinement-list-test.js         |  11 +-
 .../refinement-list/refinement-list.js        |  60 ++++----
 .../__tests__/sort-by-selector-test.js        |   6 +-
 .../sort-by-selector/sort-by-selector.js      |  27 ++--
 .../star-rating/__tests__/star-rating-test.js |  33 +++--
 src/widgets/star-rating/star-rating.js        |  45 +++---
 src/widgets/stats/stats.js                    |  27 ++--
 src/widgets/toggle/__tests__/toggle-test.js   |  45 +++---
 src/widgets/toggle/toggle.js                  |  58 ++++----
 50 files changed, 927 insertions(+), 688 deletions(-)
 create mode 100644 src/components/RefinementList/RefinementListItem.js
 create mode 100644 src/components/RefinementList/__tests__/RefinementListItem-test.js

diff --git a/src/components/ClearAll/ClearAll.js b/src/components/ClearAll/ClearAll.js
index 671d205a04..3e58b1594d 100644
--- a/src/components/ClearAll/ClearAll.js
+++ b/src/components/ClearAll/ClearAll.js
@@ -3,6 +3,15 @@ import Template from '../Template.js';
 import {isSpecialClick} from '../../lib/utils.js';
 
 class ClearAll extends React.Component {
+  componentWillMount() {
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.url !== nextProps.url ||
+      this.props.hasRefinements !== nextProps.hasRefinements;
+  }
+
   handleClick(e) {
     if (isSpecialClick(e)) {
       // do not alter the default browser behavior
@@ -14,16 +23,15 @@ class ClearAll extends React.Component {
   }
 
   render() {
-    const className = this.props.cssClasses.link;
     const data = {
       hasRefinements: this.props.hasRefinements
     };
 
     return (
       <a
-        className={className}
+        className={this.props.cssClasses.link}
         href={this.props.url}
-        onClick={this.handleClick.bind(this)}
+        onClick={this.handleClick}
       >
         <Template
           data={data}
diff --git a/src/components/CurrentRefinedValues/CurrentRefinedValues.js b/src/components/CurrentRefinedValues/CurrentRefinedValues.js
index f30e529051..71f2957619 100644
--- a/src/components/CurrentRefinedValues/CurrentRefinedValues.js
+++ b/src/components/CurrentRefinedValues/CurrentRefinedValues.js
@@ -5,8 +5,13 @@ import Template from '../Template.js';
 import {isSpecialClick} from '../../lib/utils.js';
 import map from 'lodash/collection/map';
 import cloneDeep from 'lodash/lang/cloneDeep';
+import {isEqual} from 'lodash';
 
 class CurrentRefinedValues extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props.refinements, nextProps.refinements);
+  }
+
   _clearAllElement(position, requestedPosition) {
     if (requestedPosition !== position) {
       return undefined;
diff --git a/src/components/Hits.js b/src/components/Hits.js
index 270c9781a9..8907b5f228 100644
--- a/src/components/Hits.js
+++ b/src/components/Hits.js
@@ -3,7 +3,15 @@ import map from 'lodash/collection/map';
 
 import Template from './Template.js';
 
+import {isEqual} from 'lodash';
+
 class Hits extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return this.props.results.hits.length === 0 ||
+      this.props.results.hits.length !== nextProps.results.hits.length ||
+      !isEqual(this.props.results.hits, nextProps.results.hits);
+  }
+
   renderWithResults() {
     let renderedHits = map(this.props.results.hits, hit => {
       return (
diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js
index 7d2444c8b5..aaba8f38a5 100644
--- a/src/components/Pagination/Pagination.js
+++ b/src/components/Pagination/Pagination.js
@@ -11,21 +11,10 @@ import cx from 'classnames';
 class Pagination extends React.Component {
   constructor(props) {
     super(defaultsDeep(props, Pagination.defaultProps));
-  }
-
-  handleClick(pageNumber, event) {
-    if (isSpecialClick(event)) {
-      // do not alter the default browser behavior
-      // if one special key is down
-      return;
-    }
-    event.preventDefault();
-    this.props.setCurrentPage(pageNumber);
+    this.handleClick = this.handleClick.bind(this);
   }
 
   pageLink({label, ariaLabel, pageNumber, additionalClassName = null, isDisabled = false, isActive = false, createURL}) {
-    let handleClick = this.handleClick.bind(this, pageNumber);
-
     let cssClasses = {
       item: cx(this.props.cssClasses.item, additionalClassName),
       link: cx(this.props.cssClasses.link)
@@ -42,9 +31,10 @@ class Pagination extends React.Component {
       <PaginationLink
         ariaLabel={ariaLabel}
         cssClasses={cssClasses}
-        handleClick={handleClick}
-        key={label}
+        handleClick={this.handleClick}
+        key={label + pageNumber}
         label={label}
+        pageNumber={pageNumber}
         url={url}
       />
     );
@@ -113,6 +103,16 @@ class Pagination extends React.Component {
     return pages;
   }
 
+  handleClick(pageNumber, event) {
+    if (isSpecialClick(event)) {
+      // do not alter the default browser behavior
+      // if one special key is down
+      return;
+    }
+    event.preventDefault();
+    this.props.setCurrentPage(pageNumber);
+  }
+
   render() {
     let pager = new Paginator({
       currentPage: this.props.currentPage,
diff --git a/src/components/Pagination/PaginationLink.js b/src/components/Pagination/PaginationLink.js
index 761e790bc6..8a2fe0017b 100644
--- a/src/components/Pagination/PaginationLink.js
+++ b/src/components/Pagination/PaginationLink.js
@@ -1,8 +1,22 @@
 import React from 'react';
 
+import {isEqual} from 'lodash';
+
 class PaginationLink extends React.Component {
+  componentWillMount() {
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props, nextProps);
+  }
+
+  handleClick(e) {
+    this.props.handleClick(this.props.pageNumber, e);
+  }
+
   render() {
-    let {cssClasses, label, ariaLabel, handleClick, url} = this.props;
+    let {cssClasses, label, ariaLabel, url} = this.props;
 
     return (
       <li className={cssClasses.item}>
@@ -11,7 +25,7 @@ class PaginationLink extends React.Component {
           className={cssClasses.link}
           dangerouslySetInnerHTML={{__html: label}}
           href={url}
-          onClick={handleClick}
+          onClick={this.handleClick}
         ></a>
       </li>
     );
@@ -32,6 +46,7 @@ PaginationLink.propTypes = {
     React.PropTypes.string,
     React.PropTypes.number
   ]).isRequired,
+  pageNumber: React.PropTypes.number,
   url: React.PropTypes.string
 };
 
diff --git a/src/components/Pagination/__tests__/Pagination-test.js b/src/components/Pagination/__tests__/Pagination-test.js
index 36804d6671..9ed8fede40 100644
--- a/src/components/Pagination/__tests__/Pagination-test.js
+++ b/src/components/Pagination/__tests__/Pagination-test.js
@@ -62,6 +62,7 @@ describe('Pagination', () => {
     let createURL = sinon.stub().returns('/page');
     let out = new Pagination({cssClasses: {}}).pageLink({
       label: 'test',
+      pageNumber: 8,
       createURL
     });
 
@@ -70,8 +71,9 @@ describe('Pagination', () => {
         ariaLabel={undefined}
         cssClasses={{item: '', link: ''}}
         handleClick={() => {}}
-        key="test"
+        key="test8"
         label="test"
+        pageNumber={8}
         url="/page"
       />);
     expect(createURL.calledOnce).toBe(true, 'createURL should be called once');
@@ -82,6 +84,7 @@ describe('Pagination', () => {
     let out = new Pagination({cssClasses: {}}).pageLink({
       label: 'test',
       isDisabled: true,
+      pageNumber: 8,
       createURL
     });
 
@@ -90,8 +93,9 @@ describe('Pagination', () => {
         ariaLabel={undefined}
         cssClasses={{item: '', link: ''}}
         handleClick={() => {}}
-        key="test"
+        key="test8"
         label="test"
+        pageNumber={8}
         url="#"
       />);
     expect(createURL.called).toBe(false, 'createURL should not be called');
diff --git a/src/components/PoweredBy/PoweredBy.js b/src/components/PoweredBy/PoweredBy.js
index 4d7d9a344e..f881d8396d 100644
--- a/src/components/PoweredBy/PoweredBy.js
+++ b/src/components/PoweredBy/PoweredBy.js
@@ -1,6 +1,10 @@
 import React from 'react';
 
 class PoweredBy extends React.Component {
+  shouldComponentUpdate() {
+    return false;
+  }
+
   render() {
     return (
       <div className={this.props.cssClasses.root}>
diff --git a/src/components/PriceRanges/PriceRanges.js b/src/components/PriceRanges/PriceRanges.js
index 1a3ec4464a..99fc4c1d84 100644
--- a/src/components/PriceRanges/PriceRanges.js
+++ b/src/components/PriceRanges/PriceRanges.js
@@ -3,8 +3,18 @@ import React from 'react';
 import Template from '../Template.js';
 import PriceRangesForm from './PriceRangesForm.js';
 import cx from 'classnames';
+import {isEqual} from 'lodash';
 
 class PriceRanges extends React.Component {
+  componentWillMount() {
+    this.form = this.getForm();
+    this.refine = this.refine.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props.facetValues, nextProps.facetValues);
+  }
+
   getForm() {
     let labels = {
       currency: this.props.currency,
@@ -15,24 +25,16 @@ class PriceRanges extends React.Component {
       <PriceRangesForm
         cssClasses={this.props.cssClasses}
         labels={labels}
-        refine={this.refine.bind(this)}
+        refine={this.refine}
       />
     );
   }
 
-  getURLFromFacetValue(facetValue) {
-    if (!this.props.createURL) {
-      return '#';
-    }
-    return this.props.createURL(facetValue.from, facetValue.to, facetValue.isRefined);
-  }
-
   getItemFromFacetValue(facetValue) {
     let cssClassItem = cx(
       this.props.cssClasses.item,
       {[this.props.cssClasses.active]: facetValue.isRefined}
     );
-    let url = this.getURLFromFacetValue(facetValue);
     let key = facetValue.from + '_' + facetValue.to;
     let handleClick = this.refine.bind(this, facetValue.from, facetValue.to);
     let data = {
@@ -43,7 +45,7 @@ class PriceRanges extends React.Component {
       <div className={cssClassItem} key={key}>
         <a
           className={this.props.cssClasses.link}
-          href={url}
+          href={facetValue.url}
           onClick={handleClick}
         >
           <Template data={data} templateKey="item" {...this.props.templateProps} />
@@ -62,7 +64,6 @@ class PriceRanges extends React.Component {
   }
 
   render() {
-    let form = this.getForm();
     return (
       <div>
         <div className={this.props.cssClasses.list}>
@@ -70,14 +71,13 @@ class PriceRanges extends React.Component {
             return this.getItemFromFacetValue(facetValue);
           })}
         </div>
-        {form}
+        {this.form}
       </div>
     );
   }
 }
 
 PriceRanges.propTypes = {
-  createURL: React.PropTypes.func.isRequired,
   cssClasses: React.PropTypes.shape({
     active: React.PropTypes.string,
     button: React.PropTypes.string,
diff --git a/src/components/PriceRanges/PriceRangesForm.js b/src/components/PriceRanges/PriceRangesForm.js
index 3fc7880ae7..599bc78188 100644
--- a/src/components/PriceRanges/PriceRangesForm.js
+++ b/src/components/PriceRanges/PriceRangesForm.js
@@ -1,6 +1,14 @@
 import React from 'react';
 
 class PriceRangesForm extends React.Component {
+  componentWillMount() {
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
   getInput(type) {
     return (
       <label className={this.props.cssClasses.label}>
@@ -19,7 +27,7 @@ class PriceRangesForm extends React.Component {
   render() {
     let fromInput = this.getInput('from');
     let toInput = this.getInput('to');
-    let onSubmit = this.handleSubmit.bind(this);
+    let onSubmit = this.handleSubmit;
     return (
       <form className={this.props.cssClasses.form} onSubmit={onSubmit} ref="form">
         {fromInput}
diff --git a/src/components/PriceRanges/__tests__/PriceRanges-test.js b/src/components/PriceRanges/__tests__/PriceRanges-test.js
index 2174d2f785..53f7ea78b6 100644
--- a/src/components/PriceRanges/__tests__/PriceRanges-test.js
+++ b/src/components/PriceRanges/__tests__/PriceRanges-test.js
@@ -58,46 +58,11 @@ describe('PriceRanges', () => {
       stubMethod('render');
     });
 
-    context('getURLFromFacetValue', () => {
-      it('should be a # if no createURL method passed', () => {
-        // Given
-        let component = getComponentWithMockRendering({
-          createURL: null
-        });
-
-        // When
-        let url = component.getURLFromFacetValue();
-
-        // Then
-        expect(url).toEqual('#');
-      });
-      it('should call the createURL method passed with the facetValue', () => {
-        // Given
-        let mockCreateURL = sinon.spy();
-        let component = getComponentWithMockRendering({
-          createURL: mockCreateURL
-        });
-        let facetValue = {
-          from: 6,
-          to: 8,
-          isRefined: true
-        };
-
-        // When
-        component.getURLFromFacetValue(facetValue);
-
-        // Then
-        expect(mockCreateURL.called).toBe(true);
-        expect(mockCreateURL.calledWith(6, 8, true)).toBe(true);
-      });
-    });
-
     context('getItemFromFacetValue', () => {
       let props;
       let facetValue;
 
       beforeEach(() => {
-        stubMethod('getURLFromFacetValue', 'url');
         props = {
           cssClasses: {
             item: 'item',
@@ -109,7 +74,8 @@ describe('PriceRanges', () => {
         facetValue = {
           from: 1,
           to: 10,
-          isRefined: false
+          isRefined: false,
+          url: 'url'
         };
       });
 
diff --git a/src/components/RefinementList/RefinementList.js b/src/components/RefinementList/RefinementList.js
index 948dd3d927..e718e81a3d 100644
--- a/src/components/RefinementList/RefinementList.js
+++ b/src/components/RefinementList/RefinementList.js
@@ -3,6 +3,8 @@ import cx from 'classnames';
 import {isSpecialClick} from '../../lib/utils.js';
 
 import Template from '../Template.js';
+import RefinementListItem from './RefinementListItem.js';
+import {isEqual} from 'lodash';
 
 class RefinementList extends React.Component {
   constructor(props) {
@@ -10,6 +12,11 @@ class RefinementList extends React.Component {
     this.state = {
       isShowMoreOpen: false
     };
+    this.handleItemClick = this.handleItemClick.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return nextState !== this.state || !isEqual(this.props.facetValues, nextProps.facetValues);
   }
 
   refine(value) {
@@ -17,10 +24,10 @@ class RefinementList extends React.Component {
   }
 
   _generateFacetItem(facetValue) {
-    let subList;
+    let subItems;
     let hasChildren = facetValue.data && facetValue.data.length > 0;
     if (hasChildren) {
-      subList = (
+      subItems = (
         <RefinementList
           {...this.props}
           depth={this.props.depth + 1}
@@ -28,11 +35,6 @@ class RefinementList extends React.Component {
         />
       );
     }
-    let data = facetValue;
-
-    if (this.props.createURL) {
-      data.url = this.props.createURL(facetValue[this.props.attributeNameKey]);
-    }
 
     let templateData = {...facetValue, cssClasses: this.props.cssClasses};
 
@@ -48,15 +50,18 @@ class RefinementList extends React.Component {
     if (facetValue.count !== undefined) {
       key += '/' + facetValue.count;
     }
+
     return (
-      <div
-        className={cssClassItem}
+      <RefinementListItem
+        facetValue={facetValue[this.props.attributeNameKey]}
+        handleClick={this.handleItemClick}
+        itemClassName={cssClassItem}
         key={key}
-        onClick={this.handleItemClick.bind(this, facetValue[this.props.attributeNameKey])}
-      >
-        <Template data={templateData} templateKey="item" {...this.props.templateProps} />
-        {subList}
-      </div>
+        subItems={subItems}
+        templateData={templateData}
+        templateKey="item"
+        templateProps={this.props.templateProps}
+      />
     );
   }
 
@@ -141,7 +146,6 @@ class RefinementList extends React.Component {
 RefinementList.propTypes = {
   Template: React.PropTypes.func,
   attributeNameKey: React.PropTypes.string,
-  createURL: React.PropTypes.func.isRequired,
   cssClasses: React.PropTypes.shape({
     active: React.PropTypes.string,
     depth: React.PropTypes.string,
diff --git a/src/components/RefinementList/RefinementListItem.js b/src/components/RefinementList/RefinementListItem.js
new file mode 100644
index 0000000000..20c5805e72
--- /dev/null
+++ b/src/components/RefinementList/RefinementListItem.js
@@ -0,0 +1,49 @@
+import React from 'react';
+
+import Template from '../Template.js';
+import {isEqual} from 'lodash';
+
+class RefinementListItem extends React.Component {
+  componentWillMount() {
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props, nextProps);
+  }
+
+  handleClick(e) {
+    this.props.handleClick(this.props.facetValue, e);
+  }
+
+  render() {
+    return (
+      <div
+        className={this.props.itemClassName}
+        onClick={this.handleClick}
+      >
+        <Template
+          data={this.props.templateData}
+          templateKey={this.props.templateKey}
+          {...this.props.templateProps}
+        />
+        {this.props.subItems}
+      </div>
+    );
+  }
+}
+
+RefinementListItem.propTypes = {
+  facetValue: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.number
+  ]).isRequired,
+  handleClick: React.PropTypes.func.isRequired,
+  itemClassName: React.PropTypes.string,
+  subItems: React.PropTypes.object,
+  templateData: React.PropTypes.object.isRequired,
+  templateKey: React.PropTypes.string.isRequired,
+  templateProps: React.PropTypes.object.isRequired
+};
+
+export default RefinementListItem;
diff --git a/src/components/RefinementList/__tests__/RefinementList-test.js b/src/components/RefinementList/__tests__/RefinementList-test.js
index 6bbe544f98..cf08077915 100644
--- a/src/components/RefinementList/__tests__/RefinementList-test.js
+++ b/src/components/RefinementList/__tests__/RefinementList-test.js
@@ -4,7 +4,7 @@ import React from 'react';
 import expect from 'expect';
 import TestUtils from 'react-addons-test-utils';
 import RefinementList from '../RefinementList';
-import Template from '../../Template';
+import RefinementListItem from '../RefinementListItem';
 
 import expectJSX from 'expect-jsx';
 expect.extend(expectJSX);
@@ -13,47 +13,54 @@ describe('RefinementList', () => {
   let renderer;
   let parentListProps;
   let itemProps;
-  let templateProps;
 
   beforeEach(() => {
     let {createRenderer} = TestUtils;
-    parentListProps = {
-      className: 'list'
+    let cssClasses = {
+      list: 'list',
+      item: 'item',
+      active: 'active'
     };
-    itemProps = {
-      className: 'item',
-      onClick: () => {}
-    };
-    templateProps = {
+    let templateData = {cssClasses};
+    let commonItemProps = {
+      handleClick: () => {},
+      itemClassName: 'item',
+      subItems: undefined,
       templateKey: 'item',
-      data: {
-        cssClasses: {
-          list: 'list',
-          item: 'item',
-          active: 'active'
-        }
-      }
+      templateProps: {}
     };
+
+    parentListProps = {className: 'list'};
+    itemProps = [{
+      ...commonItemProps,
+      facetValue: 'facet1',
+      templateData: {
+        ...templateData,
+        name: 'facet1'
+      }
+    }, {
+      ...commonItemProps,
+      facetValue: 'facet2',
+      templateData: {
+        ...templateData,
+        name: 'facet2'
+      }
+    }];
     renderer = createRenderer();
   });
 
 
   it('should render default list', () => {
     let out = render();
+
     expect(out).toEqualJSX(
       <div {...parentListProps}>
-        <div {...itemProps}>
-          <Template
-            {...templateProps}
-            data={{...templateProps.data, name: 'facet1'}}
-          />
-        </div>
-        <div {...itemProps}>
-          <Template
-            {...templateProps}
-            data={{...templateProps.data, name: 'facet2'}}
-          />
-        </div>
+        <RefinementListItem
+          {...itemProps[0]}
+        />
+        <RefinementListItem
+          {...itemProps[1]}
+        />
       </div>
     );
     expect(out.props.children[0][0].key).toEqual('facet1');
@@ -62,17 +69,17 @@ describe('RefinementList', () => {
 
   it('should render default list highlighted', () => {
     let out = render({facetValues: [{name: 'facet1', isRefined: true, count: 42}]});
-    let activeTemplateProp = {...templateProps};
-    activeTemplateProp.data.count = 42;
-    activeTemplateProp.data.isRefined = true;
+    itemProps[0].templateData = {
+      ...itemProps[0].templateData,
+      count: 42,
+      isRefined: true
+    };
+    itemProps[0].itemClassName += ' active';
     expect(out).toEqualJSX(
       <div {...parentListProps}>
-        <div className="item active" onClick={itemProps.onClick}>
-          <Template
-            {...activeTemplateProp}
-            data={{...templateProps.data, name: 'facet1'}}
-          />
-        </div>
+        <RefinementListItem
+          {...itemProps[0]}
+        />
       </div>
     );
     expect(out.props.children[0][0].key).toEqual('facet1/true/42');
@@ -98,7 +105,7 @@ describe('RefinementList', () => {
   });
 
   context('sublist', () => {
-    it('uses autoHideContainer() and headerFooter()', () => {
+    it('works', () => {
       let customProps = {
         cssClasses: {
           depth: 'depth',
@@ -118,40 +125,26 @@ describe('RefinementList', () => {
       parentListProps = {
         className: 'list depth0'
       };
-      itemProps = {
-        className: 'item',
-        onClick: () => {}
-      };
-      templateProps = {
-        templateKey: 'item',
-        data: {
-          cssClasses: {
-            depth: 'depth',
-            list: 'list',
-            item: 'item'
-          }
-        }
+      itemProps[0].templateData.cssClasses = customProps.cssClasses;
+      itemProps[0].templateData = {
+        ...itemProps[0].templateData,
+        data: customProps.facetValues[0].data
       };
+      itemProps[0].subItems = (
+        <RefinementList
+          attributeNameKey="name"
+          cssClasses={customProps.cssClasses}
+          depth={1}
+          facetValues={customProps.facetValues[0].data}
+          templateProps={{}}
+        />
+      );
       let out = render(customProps);
       expect(out).toEqualJSX(
         <div {...parentListProps}>
-          <div {...itemProps}>
-            <Template
-              {...templateProps}
-              data={{
-                ...templateProps.data,
-                name: 'facet1',
-                data: customProps.facetValues[0].data
-              }}
-            />
-            <RefinementList
-              {...templateProps.data}
-              attributeNameKey="name"
-              depth={1}
-              facetValues={customProps.facetValues[0].data}
-              templateProps={{}}
-            />
-          </div>
+          <RefinementListItem
+            {...itemProps[0]}
+          />
         </div>
       );
     });
diff --git a/src/components/RefinementList/__tests__/RefinementListItem-test.js b/src/components/RefinementList/__tests__/RefinementListItem-test.js
new file mode 100644
index 0000000000..267b51f853
--- /dev/null
+++ b/src/components/RefinementList/__tests__/RefinementListItem-test.js
@@ -0,0 +1,58 @@
+/* eslint-env mocha */
+
+import React from 'react';
+import expect from 'expect';
+import {createRenderer} from 'react-addons-test-utils';
+import RefinementListItem from '../RefinementListItem';
+import Template from '../../Template';
+import sinon from 'sinon';
+
+import expectJSX from 'expect-jsx';
+expect.extend(expectJSX);
+describe('RefinementListItem', () => {
+  let renderer;
+  let props;
+
+  beforeEach(() => {
+    props = {
+      facetValue: 'Hello',
+      handleClick: sinon.spy(),
+      itemClassName: 'item class',
+      templateData: {template: 'data'},
+      templateKey: 'item key',
+      templateProps: {template: 'props'},
+      subItems: <div/>
+    };
+    renderer = createRenderer();
+  });
+
+  it('renders an item', () => {
+    let out = render(props);
+
+    expect(out).toEqualJSX(
+      <div
+        className={props.itemClassName}
+        onClick={props.handleClick}
+      >
+        <Template
+          data={props.templateData}
+          templateKey={props.templateKey}
+          {...props.templateProps}
+        />
+        {props.subItems}
+      </div>
+    );
+  });
+
+  it('calls the right function', () => {
+    let out = render(props);
+    out.props.onClick();
+    expect(props.handleClick.calledOnce).toBe(true);
+  });
+
+  function render(askedProps) {
+    renderer.render(<RefinementListItem {...askedProps} />);
+    return renderer.getRenderOutput();
+  }
+});
+
diff --git a/src/components/Selector.js b/src/components/Selector.js
index dfce2e5d63..12439e5d06 100644
--- a/src/components/Selector.js
+++ b/src/components/Selector.js
@@ -1,6 +1,14 @@
 import React from 'react';
 
 class Selector extends React.Component {
+  componentWillMount() {
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
   handleChange(event) {
     this.props.setValue(event.target.value);
   }
@@ -8,13 +16,11 @@ class Selector extends React.Component {
   render() {
     let {currentValue, options} = this.props;
 
-    let handleChange = this.handleChange.bind(this);
-
     return (
       <select
         className={this.props.cssClasses.root}
         defaultValue={currentValue}
-        onChange={handleChange}
+        onChange={this.handleChange}
       >
         {options.map((option) => {
           return <option className={this.props.cssClasses.item} key={option.value} value={option.value}>{option.label}</option>;
diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js
index 32ef383c58..fc97976592 100644
--- a/src/components/Slider/Slider.js
+++ b/src/components/Slider/Slider.js
@@ -4,7 +4,17 @@ import Nouislider from 'react-nouislider';
 
 let cssPrefix = 'ais-range-slider--';
 
+import {isEqual} from 'lodash';
+
 class Slider extends React.Component {
+  componentWillMount() {
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props.range, nextProps.range) ||
+      !isEqual(this.props.start, nextProps.start);
+  }
 
   // we are only interested in rawValues
   handleChange(formattedValues, handleId, rawValues) {
@@ -36,7 +46,7 @@ class Slider extends React.Component {
         behaviour={'snap'}
         connect
         cssPrefix={cssPrefix}
-        onChange={this.handleChange.bind(this)}
+        onChange={this.handleChange}
         pips={pips}
       />
     );
diff --git a/src/components/Stats/Stats.js b/src/components/Stats/Stats.js
index 7d6e079314..d0ba863216 100644
--- a/src/components/Stats/Stats.js
+++ b/src/components/Stats/Stats.js
@@ -3,6 +3,11 @@ import React from 'react';
 import Template from '../Template.js';
 
 class Stats extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return this.props.nbHits !== nextProps.hits ||
+      this.props.processingTimeMS !== nextProps.processingTimeMS;
+  }
+
   render() {
     let data = {
       hasManyResults: this.props.nbHits > 1,
diff --git a/src/components/Template.js b/src/components/Template.js
index 5ad8f8685c..40c462c574 100644
--- a/src/components/Template.js
+++ b/src/components/Template.js
@@ -8,42 +8,54 @@ import mapValues from 'lodash/object/mapValues';
 
 import hogan from 'hogan.js';
 
-function Template(props) {
-  const useCustomCompileOptions = props.useCustomCompileOptions[props.templateKey];
-  const compileOptions = useCustomCompileOptions ? props.templatesConfig.compileOptions : {};
-
-  const content = renderTemplate({
-    templates: props.templates,
-    templateKey: props.templateKey,
-    compileOptions: compileOptions,
-    helpers: props.templatesConfig.helpers,
-    data: transformData(props.transformData, props.templateKey, props.data)
-  });
+import {isEqual} from 'lodash';
+
+class Template extends React.Component {
+  constructor(props) {
+    super(props);
+  }
 
-  if (content === null) {
-    // Adds a noscript to the DOM but virtual DOM is null
-    // See http://facebook.github.io/react/docs/component-specs.html#render
-    return null;
+  shouldComponentUpdate(nextProps) {
+    return !isEqual(this.props.data, nextProps.data);
   }
 
-  const otherProps = omit(props, keys(Template.propTypes));
+  render() {
+    const useCustomCompileOptions = this.props.useCustomCompileOptions[this.props.templateKey];
+    const compileOptions = useCustomCompileOptions ? this.props.templatesConfig.compileOptions : {};
+
+    const content = renderTemplate({
+      templates: this.props.templates,
+      templateKey: this.props.templateKey,
+      compileOptions: compileOptions,
+      helpers: this.props.templatesConfig.helpers,
+      data: transformData(this.props.transformData, this.props.templateKey, this.props.data)
+    });
+
+    if (content === null) {
+      // Adds a noscript to the DOM but virtual DOM is null
+      // See http://facebook.github.io/react/docs/component-specs.html#render
+      return null;
+    }
+
+    const otherProps = omit(this.props, keys(Template.propTypes));
+
+    if (React.isValidElement(content)) {
+      return (
+        <div
+          {...otherProps}
+          className={this.props.cssClass}
+        >{content}</div>
+      );
+    }
 
-  if (React.isValidElement(content)) {
     return (
       <div
         {...otherProps}
-        className={props.cssClass}
-      >{content}</div>
+        className={this.props.cssClass}
+        dangerouslySetInnerHTML={{__html: content}}
+      />
     );
   }
-
-  return (
-    <div
-      {...otherProps}
-      className={props.cssClass}
-      dangerouslySetInnerHTML={{__html: content}}
-    />
-  );
 }
 
 Template.propTypes = {
diff --git a/src/decorators/headerFooter.js b/src/decorators/headerFooter.js
index f965e2e007..97e2576ee3 100644
--- a/src/decorators/headerFooter.js
+++ b/src/decorators/headerFooter.js
@@ -9,6 +9,15 @@ import Template from '../components/Template.js';
 
 function headerFooter(ComposedComponent) {
   class HeaderFooter extends React.Component {
+    componentWillMount() {
+      // Only add header/footer if a template is defined
+      this._header = this.getTemplate('header');
+      this._footer = this.getTemplate('footer');
+      this._classNames = {
+        root: cx(this.props.cssClasses.root),
+        body: cx(this.props.cssClasses.body)
+      };
+    }
     getTemplate(type) {
       let templates = this.props.templateProps.templates;
       if (!templates || !templates[type]) {
@@ -24,22 +33,13 @@ function headerFooter(ComposedComponent) {
       );
     }
     render() {
-      let classNames = {
-        root: cx(this.props.cssClasses.root),
-        body: cx(this.props.cssClasses.body)
-      };
-
-      // Only add header/footer if a template is defined
-      let header = this.getTemplate('header');
-      let footer = this.getTemplate('footer');
-
       return (
-        <div className={classNames.root}>
-          {header}
-          <div className={classNames.body}>
+        <div className={this._classNames.root}>
+          {this._header}
+          <div className={this._classNames.body}>
             <ComposedComponent {...this.props} />
           </div>
-          {footer}
+          {this._footer}
         </div>
       );
     }
diff --git a/src/lib/InstantSearch.js b/src/lib/InstantSearch.js
index b4e789b2ba..8757827443 100644
--- a/src/lib/InstantSearch.js
+++ b/src/lib/InstantSearch.js
@@ -144,7 +144,13 @@ Usage: instantsearch({
     const {_onHistoryChange, templatesConfig} = this;
     forEach(this.widgets, function(widget) {
       if (widget.init) {
-        widget.init({state, helper, templatesConfig, onHistoryChange: _onHistoryChange});
+        widget.init({
+          state,
+          helper,
+          templatesConfig,
+          createURL: this._createURL,
+          onHistoryChange: _onHistoryChange
+        });
       }
     }, this);
   }
diff --git a/src/widgets/clear-all/__tests__/clear-all-test.js b/src/widgets/clear-all/__tests__/clear-all-test.js
index daf1695089..0575e7bdd7 100644
--- a/src/widgets/clear-all/__tests__/clear-all-test.js
+++ b/src/widgets/clear-all/__tests__/clear-all-test.js
@@ -67,6 +67,7 @@ describe('clearAll()', () => {
       },
       url: '#all-cleared'
     };
+    widget.init({helper});
   });
 
   it('configures nothing', () => {
diff --git a/src/widgets/clear-all/clear-all.js b/src/widgets/clear-all/clear-all.js
index 871452d303..0ceb3dbda0 100644
--- a/src/widgets/clear-all/clear-all.js
+++ b/src/widgets/clear-all/clear-all.js
@@ -58,35 +58,31 @@ function clearAll({
     ClearAll = autoHideContainerHOC(ClearAll);
   }
 
-  return {
-    render: function({results, helper, state, templatesConfig, createURL}) {
-      let hasRefinements = getRefinements(results, state).length !== 0;
+  let cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    header: cx(bem('header'), userCssClasses.header),
+    body: cx(bem('body'), userCssClasses.body),
+    footer: cx(bem('footer'), userCssClasses.footer),
+    link: cx(bem('link'), userCssClasses.link)
+  };
 
-      let cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        header: cx(bem('header'), userCssClasses.header),
-        body: cx(bem('body'), userCssClasses.body),
-        footer: cx(bem('footer'), userCssClasses.footer),
-        link: cx(bem('link'), userCssClasses.link)
-      };
+  return {
+    init({helper, templatesConfig}) {
+      this._clearRefinementsAndSearch = clearRefinementsAndSearch.bind(null, helper);
+      this._templateProps = prepareTemplateProps({defaultTemplates, templatesConfig, templates});
+    },
 
+    render: function({results, state, createURL}) {
+      let hasRefinements = getRefinements(results, state).length !== 0;
       let url = createURL(clearRefinementsFromState(state));
 
-      let handleClick = clearRefinementsAndSearch.bind(null, helper);
-
-      let templateProps = prepareTemplateProps({
-        defaultTemplates,
-        templatesConfig,
-        templates
-      });
-
       ReactDOM.render(
         <ClearAll
-          clearAll={handleClick}
+          clearAll={this._clearRefinementsAndSearch}
           cssClasses={cssClasses}
           hasRefinements={hasRefinements}
           shouldAutoHideContainer={!hasRefinements}
-          templateProps={templateProps}
+          templateProps={this._templateProps}
           url={url}
         />,
         containerNode
diff --git a/src/widgets/current-refined-values/__tests__/current-refined-values-test.js b/src/widgets/current-refined-values/__tests__/current-refined-values-test.js
index c1454e9efe..50125747eb 100644
--- a/src/widgets/current-refined-values/__tests__/current-refined-values-test.js
+++ b/src/widgets/current-refined-values/__tests__/current-refined-values-test.js
@@ -538,7 +538,7 @@ describe('currentRefinedValues()', () => {
 
     it('should render twice <CurrentRefinedValues ... />', () => {
       const widget = currentRefinedValues(parameters);
-
+      widget.init({helper});
       widget.render(renderParameters);
       widget.render(renderParameters);
 
@@ -557,7 +557,9 @@ describe('currentRefinedValues()', () => {
 
         parameters.container = '#testid';
 
-        currentRefinedValues(parameters).render(renderParameters);
+        const widget = currentRefinedValues(parameters);
+        widget.init({helper});
+        widget.render(renderParameters);
         expect(ReactDOM.render.calledOnce).toBe(true);
         expect(ReactDOM.render.firstCall.args[0]).toEqualJSX(<CurrentRefinedValues {...expectedProps} />);
         expect(ReactDOM.render.firstCall.args[1]).toBe(element);
@@ -568,7 +570,9 @@ describe('currentRefinedValues()', () => {
 
         parameters.container = element;
 
-        currentRefinedValues(parameters).render(renderParameters);
+        const widget = currentRefinedValues(parameters);
+        widget.init({helper});
+        widget.render(renderParameters);
         expect(ReactDOM.render.calledOnce).toBe(true);
         expect(ReactDOM.render.firstCall.args[0]).toEqualJSX(<CurrentRefinedValues {...expectedProps} />);
         expect(ReactDOM.render.firstCall.args[1]).toBe(element);
@@ -586,7 +590,9 @@ describe('currentRefinedValues()', () => {
 
           refinements.splice(0, 0, {type: 'facet', attributeName: 'extraFacet', name: 'extraFacet-val1', count: 42, exhaustive: true});
 
-          currentRefinedValues(parameters).render(renderParameters);
+          const widget = currentRefinedValues(parameters);
+          widget.init({helper});
+          widget.render(renderParameters);
 
           setRefinementsInExpectedProps();
           expectedProps.attributes = {};
@@ -600,7 +606,9 @@ describe('currentRefinedValues()', () => {
 
           refinements.splice(0, 0, {type: 'facet', attributeName: 'extraFacet', name: 'extraFacet-val1', count: 42, exhaustive: true});
 
-          currentRefinedValues(parameters).render(renderParameters);
+          const widget = currentRefinedValues(parameters);
+          widget.init({helper});
+          widget.render(renderParameters);
 
           setRefinementsInExpectedProps();
           expectedProps.attributes = {};
@@ -624,7 +632,9 @@ describe('currentRefinedValues()', () => {
             return ['facet', 'facetExclude', 'disjunctiveFacet'].indexOf(refinement.attributeName) !== -1;
           });
 
-          currentRefinedValues(parameters).render(renderParameters);
+          const widget = currentRefinedValues(parameters);
+          widget.init({helper});
+          widget.render(renderParameters);
 
           setRefinementsInExpectedProps();
           expectedProps.attributes = {
@@ -656,7 +666,9 @@ describe('currentRefinedValues()', () => {
 
           refinements.splice(0, 0, {type: 'facet', attributeName: 'extraFacet', name: 'extraFacet-val1', count: 42, exhaustive: true});
 
-          currentRefinedValues(parameters).render(renderParameters);
+          const widget = currentRefinedValues(parameters);
+          widget.init({helper});
+          widget.render(renderParameters);
 
           setRefinementsInExpectedProps();
           expectedProps.attributes = {};
@@ -670,7 +682,9 @@ describe('currentRefinedValues()', () => {
 
           refinements.splice(0, 0, {type: 'facet', attributeName: 'extraFacet', name: 'extraFacet-val1', count: 42, exhaustive: true});
 
-          currentRefinedValues(parameters).render(renderParameters);
+          const widget = currentRefinedValues(parameters);
+          widget.init({helper});
+          widget.render(renderParameters);
 
           setRefinementsInExpectedProps();
           expectedProps.attributes = {};
@@ -699,7 +713,9 @@ describe('currentRefinedValues()', () => {
           });
           refinements = [].concat(firstRefinements).concat(otherRefinements);
 
-          currentRefinedValues(parameters).render(renderParameters);
+          const widget = currentRefinedValues(parameters);
+          widget.init({helper});
+          widget.render(renderParameters);
 
           setRefinementsInExpectedProps();
           expectedProps.attributes = {
@@ -746,7 +762,9 @@ describe('currentRefinedValues()', () => {
           });
           refinements = [].concat(firstRefinements).concat(otherRefinements);
 
-          currentRefinedValues(parameters).render(renderParameters);
+          const widget = currentRefinedValues(parameters);
+          widget.init({helper});
+          widget.render(renderParameters);
 
           setRefinementsInExpectedProps();
           expectedProps.attributes = {
@@ -773,7 +791,9 @@ describe('currentRefinedValues()', () => {
       it('should pass it as clearAllPosition', () => {
         parameters.clearAll = 'before';
 
-        currentRefinedValues(parameters).render(renderParameters);
+        const widget = currentRefinedValues(parameters);
+        widget.init({helper});
+        widget.render(renderParameters);
 
         expectedProps.clearAllPosition = 'before';
 
@@ -786,7 +806,9 @@ describe('currentRefinedValues()', () => {
       it('should pass it in templateProps', () => {
         parameters.templates.item = 'MY CUSTOM TEMPLATE';
 
-        currentRefinedValues(parameters).render(renderParameters);
+        const widget = currentRefinedValues(parameters);
+        widget.init({helper});
+        widget.render(renderParameters);
 
         expectedProps.templateProps.templates.item = 'MY CUSTOM TEMPLATE';
 
@@ -810,7 +832,9 @@ describe('currentRefinedValues()', () => {
         it('shouldAutoHideContainer should be true with autoHideContainer = true', () => {
           parameters.autoHideContainer = true;
 
-          currentRefinedValues(parameters).render(renderParameters);
+          const widget = currentRefinedValues(parameters);
+          widget.init({helper});
+          widget.render(renderParameters);
 
           expect(ReactDOM.render.calledOnce).toBe(true);
           expect(ReactDOM.render.firstCall.args[0]).toEqualJSX(<CurrentRefinedValues {...expectedProps} />);
@@ -819,7 +843,9 @@ describe('currentRefinedValues()', () => {
         it('shouldAutoHideContainer should be true with autoHideContainer = false', () => {
           parameters.autoHideContainer = false;
 
-          currentRefinedValues(parameters).render(renderParameters);
+          const widget = currentRefinedValues(parameters);
+          widget.init({helper});
+          widget.render(renderParameters);
 
           expect(ReactDOM.render.calledOnce).toBe(true);
           expect(ReactDOM.render.firstCall.args[0]).toEqualJSX(<CurrentRefinedValues {...expectedProps} />);
@@ -830,7 +856,9 @@ describe('currentRefinedValues()', () => {
         it('shouldAutoHideContainer should be false with autoHideContainer = true', () => {
           parameters.autoHideContainer = true;
 
-          currentRefinedValues(parameters).render(renderParameters);
+          const widget = currentRefinedValues(parameters);
+          widget.init({helper});
+          widget.render(renderParameters);
 
           expectedProps.shouldAutoHideContainer = false;
 
@@ -841,7 +869,9 @@ describe('currentRefinedValues()', () => {
         it('shouldAutoHideContainer should be false with autoHideContainer = false', () => {
           parameters.autoHideContainer = false;
 
-          currentRefinedValues(parameters).render(renderParameters);
+          const widget = currentRefinedValues(parameters);
+          widget.init({helper});
+          widget.render(renderParameters);
 
           expectedProps.shouldAutoHideContainer = false;
 
@@ -855,7 +885,9 @@ describe('currentRefinedValues()', () => {
       it('should be passed in the cssClasses', () => {
         parameters.cssClasses.body = 'custom-passed-body';
 
-        currentRefinedValues(parameters).render(renderParameters);
+        const widget = currentRefinedValues(parameters);
+        widget.init({helper});
+        widget.render(renderParameters);
 
         expectedProps.cssClasses.body = 'ais-current-refined-values--body custom-passed-body';
 
@@ -866,7 +898,9 @@ describe('currentRefinedValues()', () => {
       it('should work with an array', () => {
         parameters.cssClasses.body = ['custom-body', 'custom-body-2'];
 
-        currentRefinedValues(parameters).render(renderParameters);
+        const widget = currentRefinedValues(parameters);
+        widget.init({helper});
+        widget.render(renderParameters);
 
         expectedProps.cssClasses.body = 'ais-current-refined-values--body custom-body custom-body-2';
 
@@ -888,7 +922,9 @@ describe('currentRefinedValues()', () => {
         });
         refinements = [].concat(firstRefinements).concat(secondRefinements).concat(otherRefinements);
 
-        currentRefinedValues(parameters).render(renderParameters);
+        const widget = currentRefinedValues(parameters);
+        widget.init({helper});
+        widget.render(renderParameters);
 
         setRefinementsInExpectedProps();
         expectedProps.attributes = {
diff --git a/src/widgets/current-refined-values/current-refined-values.js b/src/widgets/current-refined-values/current-refined-values.js
index 31a5babb74..73d96038e4 100644
--- a/src/widgets/current-refined-values/current-refined-values.js
+++ b/src/widgets/current-refined-values/current-refined-values.js
@@ -140,6 +140,10 @@ function currentRefinedValues({
   }, {});
 
   return {
+    init({helper}) {
+      this._clearRefinementsAndSearch = clearRefinementsAndSearch.bind(null, helper, restrictedTo);
+    },
+
     render: function({results, helper, state, templatesConfig, createURL}) {
       let cssClasses = {
         root: cx(bem(null), userCssClasses.root),
@@ -160,7 +164,6 @@ function currentRefinedValues({
       });
 
       const clearAllURL = createURL(clearRefinementsFromState(state, restrictedTo));
-      let clearAllClick = clearRefinementsAndSearch.bind(null, helper, restrictedTo);
 
       const refinements = getFilteredRefinements(results, state, attributeNames, onlyListedAttributes);
       let clearRefinementURLs = refinements.map((refinement) => createURL(clearRefinementFromState(state, refinement)));
@@ -171,7 +174,7 @@ function currentRefinedValues({
       ReactDOM.render(
         <CurrentRefinedValues
           attributes={attributesObj}
-          clearAllClick={clearAllClick}
+          clearAllClick={this._clearRefinementsAndSearch}
           clearAllPosition={clearAll}
           clearAllURL={clearAllURL}
           clearRefinementClicks={clearRefinementClicks}
diff --git a/src/widgets/hierarchical-menu/__tests__/hierarchical-menu-test.js b/src/widgets/hierarchical-menu/__tests__/hierarchical-menu-test.js
index 0914012e31..4fdf81e7d2 100644
--- a/src/widgets/hierarchical-menu/__tests__/hierarchical-menu-test.js
+++ b/src/widgets/hierarchical-menu/__tests__/hierarchical-menu-test.js
@@ -142,6 +142,9 @@ describe('hierarchicalMenu()', () => {
       footer: 'footer'
     };
     let templateProps;
+    let helper;
+    let state;
+    let createURL;
 
     beforeEach(() => {
       hierarchicalMenu.__Rewire__('defaultTemplates', defaultTemplates);
@@ -163,12 +166,17 @@ describe('hierarchicalMenu()', () => {
         list: 'ais-hierarchical-menu--list',
         root: 'ais-hierarchical-menu'
       };
-      data = {data: ['foo', 'bar']};
-      results = {getFacetValues: sinon.spy(() => {
-        return data;
-      })};
-
+      data = {data: [{name: 'foo'}, {name: 'bar'}]};
+      results = {getFacetValues: sinon.spy(() => data)};
+      helper = {
+        toggleRefinement: sinon.stub().returnsThis(),
+        search: sinon.spy()
+      };
+      state = {
+        toggleRefinement: sinon.spy()
+      };
       options = {container, attributes};
+      createURL = () => '#';
     });
 
     it('understand provided cssClasses', () => {
@@ -185,7 +193,8 @@ describe('hierarchicalMenu()', () => {
       };
 
       widget = hierarchicalMenu({...options, cssClasses: userCssClasses});
-      widget.render({results});
+      widget.init({helper, createURL});
+      widget.render({results, state});
       let actual = ReactDOM.render.firstCall.args[0].props.cssClasses;
       expect(actual).toEqual({
         root: 'ais-hierarchical-menu root cx',
@@ -203,14 +212,14 @@ describe('hierarchicalMenu()', () => {
 
     it('calls ReactDOM.render', () => {
       widget = hierarchicalMenu(options);
-      widget.render({results});
+      widget.init({helper, createURL});
+      widget.render({results, state});
       expect(ReactDOM.render.calledOnce).toBe(true);
       expect(ReactDOM.render.firstCall.args[0]).toEqualJSX(
         <RefinementList
           attributeNameKey="path"
-          createURL={() => {}}
           cssClasses={cssClasses}
-          facetValues={['foo', 'bar']}
+          facetValues={[{name: 'foo', url: '#'}, {name: 'bar', url: '#'}]}
           shouldAutoHideContainer={false}
           templateProps={templateProps}
           toggleRefinement={() => {}}
@@ -220,7 +229,8 @@ describe('hierarchicalMenu()', () => {
 
     it('asks for results.getFacetValues', () => {
       widget = hierarchicalMenu(options);
-      widget.render({results});
+      widget.init({helper, createURL});
+      widget.render({results, state});
       expect(results.getFacetValues.calledOnce).toBe(true);
       expect(results.getFacetValues.getCall(0).args).toEqual([
         'hello', {
@@ -233,7 +243,8 @@ describe('hierarchicalMenu()', () => {
 
     it('has a sortBy option', () => {
       widget = hierarchicalMenu({...options, sortBy: ['count:asc']});
-      widget.render({results});
+      widget.init({helper, createURL});
+      widget.render({results, state});
       expect(results.getFacetValues.calledOnce).toBe(true);
       expect(results.getFacetValues.getCall(0).args).toEqual([
         'hello', {
@@ -250,7 +261,8 @@ describe('hierarchicalMenu()', () => {
         item: 'item2',
         footer: 'footer2'
       }});
-      widget.render({results});
+      widget.init({helper, createURL});
+      widget.render({results, state});
       expect(ReactDOM.render.firstCall.args[0].props.templateProps.templates)
         .toEqual({
           header: 'header2',
@@ -262,36 +274,30 @@ describe('hierarchicalMenu()', () => {
     it('sets shouldAutoHideContainer to true when no results', () => {
       data = {};
       widget = hierarchicalMenu(options);
-      widget.render({results});
+      widget.init({helper, createURL});
+      widget.render({results, state});
       expect(ReactDOM.render.firstCall.args[0].props.shouldAutoHideContainer).toBe(true);
     });
 
     it('sets facetValues to empty array when no results', () => {
       data = {};
       widget = hierarchicalMenu(options);
-      widget.render({results});
+      widget.init({helper, createURL});
+      widget.render({results, state});
       expect(ReactDOM.render.firstCall.args[0].props.facetValues).toEqual([]);
     });
 
     it('has a toggleRefinement method', () => {
-      let search = sinon.spy();
-      let toggleRefinement = sinon.spy(
-        () => ({
-          search
-        })
-      );
-
-      let helper = {toggleRefinement};
-
       widget = hierarchicalMenu(options);
-      widget.render({results, helper});
+      widget.init({helper, createURL});
+      widget.render({results, state});
       let elementToggleRefinement = ReactDOM.render.firstCall.args[0].props.toggleRefinement;
       elementToggleRefinement('mom');
-      expect(toggleRefinement.calledOnce).toBe(true);
-      expect(toggleRefinement.getCall(0).args)
+      expect(helper.toggleRefinement.calledOnce).toBe(true);
+      expect(helper.toggleRefinement.getCall(0).args)
         .toEqual(['hello', 'mom']);
-      expect(search.calledOnce).toBe(true);
-      expect(toggleRefinement.calledBefore(search)).toBe(true);
+      expect(helper.search.calledOnce).toBe(true);
+      expect(helper.toggleRefinement.calledBefore(helper.search)).toBe(true);
     });
 
     it('has a limit option', () => {
@@ -312,16 +318,17 @@ describe('hierarchicalMenu()', () => {
 
       data = {data: firstLevel};
       let expectedFacetValues = [
-        {name: 'one'},
-        {name: 'two', data: [
-          {name: 'six'},
-          {name: 'seven'},
-          {name: 'eight'}
+        {name: 'one', url: '#'},
+        {name: 'two', url: '#', data: [
+          {name: 'six', url: '#'},
+          {name: 'seven', url: '#'},
+          {name: 'eight', url: '#'}
         ]},
-        {name: 'three'}
+        {name: 'three', url: '#'}
       ];
       widget = hierarchicalMenu({...options, limit: 3});
-      widget.render({results});
+      widget.init({helper, createURL});
+      widget.render({results, state});
       let actualFacetValues = ReactDOM.render.firstCall.args[0].props.facetValues;
       expect(actualFacetValues)
         .toEqual(expectedFacetValues);
diff --git a/src/widgets/hierarchical-menu/hierarchical-menu.js b/src/widgets/hierarchical-menu/hierarchical-menu.js
index 02588ef9a2..95aa78ea70 100644
--- a/src/widgets/hierarchical-menu/hierarchical-menu.js
+++ b/src/widgets/hierarchical-menu/hierarchical-menu.js
@@ -82,6 +82,19 @@ function hierarchicalMenu({
   // we use the first attribute name
   let hierarchicalFacetName = attributes[0];
 
+  let cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    header: cx(bem('header'), userCssClasses.header),
+    body: cx(bem('body'), userCssClasses.body),
+    footer: cx(bem('footer'), userCssClasses.footer),
+    list: cx(bem('list'), userCssClasses.list),
+    depth: bem('list', 'lvl'),
+    item: cx(bem('item'), userCssClasses.item),
+    active: cx(bem('item', 'active'), userCssClasses.active),
+    link: cx(bem('link'), userCssClasses.link),
+    count: cx(bem('count'), userCssClasses.count)
+  };
+
   return {
     getConfiguration: () => ({
       hierarchicalFacets: [{
@@ -92,39 +105,45 @@ function hierarchicalMenu({
         showParentLevel
       }]
     }),
-    render: function({results, helper, templatesConfig, createURL, state}) {
-      let facetValues = getFacetValues(results, hierarchicalFacetName, sortBy, limit);
-      let hasNoFacetValues = facetValues.length === 0;
+    init({helper, templatesConfig, createURL}) {
+      this._toggleRefinement = facetValue => helper
+        .toggleRefinement(hierarchicalFacetName, facetValue)
+        .search();
+
+      this._createURL = (state, facetValue) => createURL(state.toggleRefinement(hierarchicalFacetName, facetValue));
 
-      let templateProps = utils.prepareTemplateProps({
+      this._templateProps = utils.prepareTemplateProps({
         transformData,
         defaultTemplates,
         templatesConfig,
         templates
       });
-
-      let cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        header: cx(bem('header'), userCssClasses.header),
-        body: cx(bem('body'), userCssClasses.body),
-        footer: cx(bem('footer'), userCssClasses.footer),
-        list: cx(bem('list'), userCssClasses.list),
-        depth: bem('list', 'lvl'),
-        item: cx(bem('item'), userCssClasses.item),
-        active: cx(bem('item', 'active'), userCssClasses.active),
-        link: cx(bem('link'), userCssClasses.link),
-        count: cx(bem('count'), userCssClasses.count)
-      };
+    },
+    _prepareFacetValues(facetValues, state) {
+      return facetValues
+        .slice(0, limit)
+        .map(subValue => {
+          if (Array.isArray(subValue.data)) {
+            subValue.data = this._prepareFacetValues(subValue.data, state);
+          }
+
+          subValue.url = this._createURL(state, subValue);
+
+          return subValue;
+        });
+    },
+    render: function({results, state}) {
+      let facetValues = results.getFacetValues(hierarchicalFacetName, {sortBy: sortBy}).data || [];
+      facetValues = this._prepareFacetValues(facetValues, state);
 
       ReactDOM.render(
         <RefinementList
           attributeNameKey="path"
-          createURL={(facetValue) => createURL(state.toggleRefinement(hierarchicalFacetName, facetValue))}
           cssClasses={cssClasses}
           facetValues={facetValues}
-          shouldAutoHideContainer={hasNoFacetValues}
-          templateProps={templateProps}
-          toggleRefinement={toggleRefinement.bind(null, helper, hierarchicalFacetName)}
+          shouldAutoHideContainer={facetValues.length === 0}
+          templateProps={this._templateProps}
+          toggleRefinement={this._toggleRefinement}
         />,
         containerNode
       );
@@ -132,29 +151,4 @@ function hierarchicalMenu({
   };
 }
 
-function toggleRefinement(helper, attributeName, facetValue) {
-  helper
-    .toggleRefinement(attributeName, facetValue)
-    .search();
-}
-
-function getFacetValues(results, hierarchicalFacetName, sortBy, limit) {
-  let values = results
-    .getFacetValues(hierarchicalFacetName, {sortBy: sortBy}).data || [];
-
-  return sliceFacetValues(values, limit);
-}
-
-function sliceFacetValues(values, limit) {
-  return values
-    .slice(0, limit)
-    .map(function(subValue) {
-      if (Array.isArray(subValue.data)) {
-        subValue.data = sliceFacetValues(subValue.data, limit);
-      }
-
-      return subValue;
-    });
-}
-
 export default hierarchicalMenu;
diff --git a/src/widgets/hits-per-page-selector/__tests__/hits-per-page-selector-test.js b/src/widgets/hits-per-page-selector/__tests__/hits-per-page-selector-test.js
index d53a1e2d9e..6f17f39395 100644
--- a/src/widgets/hits-per-page-selector/__tests__/hits-per-page-selector-test.js
+++ b/src/widgets/hits-per-page-selector/__tests__/hits-per-page-selector-test.js
@@ -40,6 +40,7 @@ describe('hitsPerPageSelector()', () => {
   let results;
   let autoHideContainer;
   let consoleLog;
+  let state;
 
   beforeEach(() => {
     autoHideContainer = sinon.stub().returns(Selector);
@@ -63,9 +64,12 @@ describe('hitsPerPageSelector()', () => {
       state: {
         hitsPerPage: 20
       },
-      setQueryParameter: sinon.spy(),
+      setQueryParameter: sinon.stub().returnsThis(),
       search: sinon.spy()
     };
+    state = {
+      hitsPerPage: 10
+    };
     results = {
       hits: [],
       nbHits: 0
@@ -77,14 +81,15 @@ describe('hitsPerPageSelector()', () => {
   });
 
   it('calls twice ReactDOM.render(<Selector props />, container)', () => {
-    widget.render({helper, results, state: helper.state});
-    widget.render({helper, results, state: helper.state});
+    widget.init({helper, state: helper.state});
+    widget.render({results, state});
+    widget.render({results, state});
     props = {
       cssClasses: {
         root: 'ais-hits-per-page-selector custom-root cx',
         item: 'ais-hits-per-page-selector--item custom-item'
       },
-      currentValue: 20,
+      currentValue: 10,
       shouldAutoHideContainer: true,
       options: [
         {value: 10, label: '10 results'},
@@ -100,6 +105,7 @@ describe('hitsPerPageSelector()', () => {
   });
 
   it('sets the underlying hitsPerPage', () => {
+    widget.init({helper, state: helper.state});
     widget.setHitsPerPage(helper, helper.state, 10);
     expect(helper.setQueryParameter.calledOnce).toBe(true, 'setQueryParameter called once');
     expect(helper.search.calledOnce).toBe(true, 'search called once');
diff --git a/src/widgets/hits-per-page-selector/hits-per-page-selector.js b/src/widgets/hits-per-page-selector/hits-per-page-selector.js
index baac9d8ad0..194ffa9bb5 100644
--- a/src/widgets/hits-per-page-selector/hits-per-page-selector.js
+++ b/src/widgets/hits-per-page-selector/hits-per-page-selector.js
@@ -44,8 +44,13 @@ function hitsPerPageSelector({
     Selector = autoHideContainerHOC(Selector);
   }
 
+  let cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    item: cx(bem('item'), userCssClasses.item)
+  };
+
   return {
-    init: function({state}) {
+    init: function({helper, state}) {
       let isCurrentInOptions = any(options, function(option) {
         return +state.hitsPerPage === +option.value;
       });
@@ -66,28 +71,22 @@ function hitsPerPageSelector({
 
         options = [{value: undefined, label: ''}].concat(options);
       }
-    },
 
-    setHitsPerPage: function(helper, value) {
-      helper.setQueryParameter('hitsPerPage', +value);
-      helper.search();
+      this.setHitsPerPage = value => helper
+        .setQueryParameter('hitsPerPage', +value)
+        .search();
     },
 
-    render: function({helper, state, results}) {
+    render: function({state, results}) {
       let currentValue = state.hitsPerPage;
       let hasNoResults = results.nbHits === 0;
-      let setHitsPerPage = this.setHitsPerPage.bind(this, helper);
 
-      let cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        item: cx(bem('item'), userCssClasses.item)
-      };
       ReactDOM.render(
         <Selector
           cssClasses={cssClasses}
           currentValue={currentValue}
           options={options}
-          setValue={setHitsPerPage}
+          setValue={this.setHitsPerPage}
           shouldAutoHideContainer={hasNoResults}
         />,
         containerNode
diff --git a/src/widgets/hits/__tests__/hits-test.js b/src/widgets/hits/__tests__/hits-test.js
index cb8fdfdb99..aba351aae0 100644
--- a/src/widgets/hits/__tests__/hits-test.js
+++ b/src/widgets/hits/__tests__/hits-test.js
@@ -48,6 +48,7 @@ describe('hits()', () => {
       useCustomCompileOptions: {hit: false, empty: false}
     };
     widget = hits({container, cssClasses: {root: ['root', 'cx']}});
+    widget.init({});
     results = {hits: [{first: 'hit', second: 'hit'}]};
   });
 
diff --git a/src/widgets/hits/hits.js b/src/widgets/hits/hits.js
index ef08a66f92..aabf9ce0b1 100644
--- a/src/widgets/hits/hits.js
+++ b/src/widgets/hits/hits.js
@@ -60,20 +60,21 @@ function hits({
 
   return {
     getConfiguration: () => ({hitsPerPage}),
-    render: function({results, templatesConfig}) {
-      let templateProps = utils.prepareTemplateProps({
+    init({templatesConfig}) {
+      this._templateProps = utils.prepareTemplateProps({
         transformData,
         defaultTemplates,
         templatesConfig,
         templates
       });
-
+    },
+    render: function({results}) {
       ReactDOM.render(
         <Hits
           cssClasses={cssClasses}
           hits={results.hits}
           results={results}
-          templateProps={templateProps}
+          templateProps={this._templateProps}
         />,
         containerNode
       );
diff --git a/src/widgets/menu/menu.js b/src/widgets/menu/menu.js
index a38fdb85cb..1746a4924b 100644
--- a/src/widgets/menu/menu.js
+++ b/src/widgets/menu/menu.js
@@ -89,6 +89,18 @@ function menu({
       {...templates, ...showMoreTemplates} :
       templates;
 
+  let cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    header: cx(bem('header'), userCssClasses.header),
+    body: cx(bem('body'), userCssClasses.body),
+    footer: cx(bem('footer'), userCssClasses.footer),
+    list: cx(bem('list'), userCssClasses.list),
+    item: cx(bem('item'), userCssClasses.item),
+    active: cx(bem('item', 'active'), userCssClasses.active),
+    link: cx(bem('link'), userCssClasses.link),
+    count: cx(bem('count'), userCssClasses.count)
+  };
+
   return {
     getConfiguration: configuration => {
       let widgetConfiguration = {
@@ -103,40 +115,39 @@ function menu({
 
       return widgetConfiguration;
     },
-    render: function({results, helper, templatesConfig, state, createURL}) {
-      let facetValues = getFacetValues(results, hierarchicalFacetName, sortBy);
-      let hasNoFacetValues = facetValues.length === 0;
-
-      let templateProps = utils.prepareTemplateProps({
+    init({templatesConfig, helper, createURL}) {
+      this._templateProps = utils.prepareTemplateProps({
         transformData,
         defaultTemplates,
         templatesConfig,
         templates: allTemplates
       });
-
-      let cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        header: cx(bem('header'), userCssClasses.header),
-        body: cx(bem('body'), userCssClasses.body),
-        footer: cx(bem('footer'), userCssClasses.footer),
-        list: cx(bem('list'), userCssClasses.list),
-        item: cx(bem('item'), userCssClasses.item),
-        active: cx(bem('item', 'active'), userCssClasses.active),
-        link: cx(bem('link'), userCssClasses.link),
-        count: cx(bem('count'), userCssClasses.count)
-      };
+      this._createURL = (state, facetValue) => createURL(state.toggleRefinement(hierarchicalFacetName, facetValue));
+      this._toggleRefinement = facetValue => helper
+        .toggleRefinement(hierarchicalFacetName, facetValue)
+        .search();
+    },
+    _prepareFacetValues(facetValues, state) {
+      return facetValues
+        .map(facetValue => {
+          facetValue.url = this._createURL(state, facetValue);
+          return facetValue;
+        });
+    },
+    render: function({results, state}) {
+      let facetValues = results.getFacetValues(hierarchicalFacetName, {sortBy: sortBy}).data || [];
+      facetValues = this._prepareFacetValues(facetValues, state);
 
       ReactDOM.render(
         <RefinementList
-          createURL={(facetValue) => createURL(state.toggleRefinement(hierarchicalFacetName, facetValue))}
           cssClasses={cssClasses}
           facetValues={facetValues}
           limitMax={widgetMaxValuesPerFacet}
           limitMin={limit}
-          shouldAutoHideContainer={hasNoFacetValues}
+          shouldAutoHideContainer={facetValues.length === 0}
           showMore={showMoreConfig !== null}
-          templateProps={templateProps}
-          toggleRefinement={toggleRefinement.bind(null, helper, hierarchicalFacetName)}
+          templateProps={this._templateProps}
+          toggleRefinement={this._toggleRefinement}
         />,
         containerNode
       );
@@ -144,17 +155,4 @@ function menu({
   };
 }
 
-function toggleRefinement(helper, attributeName, facetValue) {
-  helper
-    .toggleRefinement(attributeName, facetValue)
-    .search();
-}
-
-function getFacetValues(results, hierarchicalFacetName, sortBy) {
-  let values = results
-    .getFacetValues(hierarchicalFacetName, {sortBy: sortBy});
-
-  return values.data || [];
-}
-
 export default menu;
diff --git a/src/widgets/numeric-refinement-list/__tests__/numeric-refinement-list-test.js b/src/widgets/numeric-refinement-list/__tests__/numeric-refinement-list-test.js
index a1ff191d26..8e35ea4795 100644
--- a/src/widgets/numeric-refinement-list/__tests__/numeric-refinement-list-test.js
+++ b/src/widgets/numeric-refinement-list/__tests__/numeric-refinement-list-test.js
@@ -47,6 +47,8 @@ describe('numericRefinementList()', () => {
   let numericRefinementList;
   let options;
   let results;
+  let createURL;
+  let state;
 
   beforeEach(() => {
     numericRefinementList = require('../numeric-refinement-list.js');
@@ -79,7 +81,12 @@ describe('numericRefinementList()', () => {
       },
       addNumericRefinement: sinon.spy(),
       search: sinon.spy(),
-      setState: sinon.spy()
+      setState: sinon.stub().returnsThis()
+    };
+    state = {
+      getNumericRefinements: sinon.stub().returns([]),
+      clearRefinements: sinon.stub().returnsThis(),
+      addNumericRefinement: sinon.stub().returnsThis()
     };
     results = {
       hits: []
@@ -87,11 +94,13 @@ describe('numericRefinementList()', () => {
 
     helper.state.clearRefinements = sinon.stub().returns(helper.state);
     helper.state.addNumericRefinement = sinon.stub().returns(helper.state);
+    createURL = () => '#';
+    widget.init({helper});
   });
 
   it('calls twice ReactDOM.render(<RefinementList props />, container)', () => {
-    widget.render({helper, results});
-    widget.render({helper, results});
+    widget.render({state, results, createURL});
+    widget.render({state, results, createURL});
 
     let props = {
       cssClasses: {
@@ -106,13 +115,12 @@ describe('numericRefinementList()', () => {
         root: 'ais-refinement-list root cx'
       },
       facetValues: [
-        {attributeName: 'price', isRefined: true, name: 'All'},
-        {attributeName: 'price', end: 4, isRefined: false, name: 'less than 4'},
-        {attributeName: 'price', end: 4, isRefined: false, name: '4', start: 4},
-        {attributeName: 'price', end: 10, isRefined: false, name: 'between 5 and 10', start: 5},
-        {attributeName: 'price', isRefined: false, name: 'more than 10', start: 10}
+        {attributeName: 'price', isRefined: true, name: 'All', url: '#'},
+        {attributeName: 'price', end: 4, isRefined: false, name: 'less than 4', url: '#'},
+        {attributeName: 'price', end: 4, isRefined: false, name: '4', start: 4, url: '#'},
+        {attributeName: 'price', end: 10, isRefined: false, name: 'between 5 and 10', start: 5, url: '#'},
+        {attributeName: 'price', isRefined: false, name: 'more than 10', start: 10, url: '#'}
       ],
-      createURL: () => {},
       toggleRefinement: () => {},
       shouldAutoHideContainer: false,
       templateProps: {
@@ -137,14 +145,14 @@ describe('numericRefinementList()', () => {
   });
 
   it('doesn\'t call the refinement functions if not refined', () => {
-    widget.render({helper, results});
+    widget.render({state, results, createURL});
     expect(helper.state.clearRefinements.called).toBe(false, 'clearRefinements called one');
     expect(helper.state.addNumericRefinement.called).toBe(false, 'addNumericRefinement never called');
     expect(helper.search.called).toBe(false, 'search never called');
   });
 
   it('calls the refinement functions if refined with "4"', () => {
-    widget._toggleRefinement(helper, '4');
+    widget._toggleRefinement('4');
     expect(helper.state.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once');
     expect(helper.state.addNumericRefinement.calledOnce).toBe(true, 'addNumericRefinement called once');
     expect(helper.state.addNumericRefinement.getCall(0).args).toEqual(['price', '=', 4]);
@@ -152,7 +160,7 @@ describe('numericRefinementList()', () => {
   });
 
   it('calls the refinement functions if refined with "between 5 and 10"', () => {
-    widget._toggleRefinement(helper, 'between 5 and 10');
+    widget._toggleRefinement('between 5 and 10');
     expect(helper.state.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once');
     expect(helper.state.addNumericRefinement.calledTwice).toBe(true, 'addNumericRefinement called twice');
     expect(helper.state.addNumericRefinement.getCall(0).args).toEqual(['price', '>=', 5]);
@@ -161,7 +169,7 @@ describe('numericRefinementList()', () => {
   });
 
   it('calls two times the refinement functions if refined with "less than 4"', () => {
-    widget._toggleRefinement(helper, 'less than 4');
+    widget._toggleRefinement('less than 4');
     expect(helper.state.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once');
     expect(helper.state.addNumericRefinement.calledOnce).toBe(true, 'addNumericRefinement called once');
     expect(helper.state.addNumericRefinement.getCall(0).args).toEqual(['price', '<=', 4]);
@@ -169,7 +177,7 @@ describe('numericRefinementList()', () => {
   });
 
   it('calls two times the refinement functions if refined with "more than 10"', () => {
-    widget._toggleRefinement(helper, 'more than 10');
+    widget._toggleRefinement('more than 10');
     expect(helper.state.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once');
     expect(helper.state.addNumericRefinement.calledOnce).toBe(true, 'addNumericRefinement called once');
     expect(helper.state.addNumericRefinement.getCall(0).args).toEqual(['price', '>=', 10]);
diff --git a/src/widgets/numeric-refinement-list/numeric-refinement-list.js b/src/widgets/numeric-refinement-list/numeric-refinement-list.js
index 0b29fb9570..2b0b64688d 100644
--- a/src/widgets/numeric-refinement-list/numeric-refinement-list.js
+++ b/src/widgets/numeric-refinement-list/numeric-refinement-list.js
@@ -67,57 +67,49 @@ function numericRefinementList({
     RefinementList = autoHideContainerHOC(RefinementList);
   }
 
-  return {
-    getConfiguration: () => {
-      return {};
-    },
+  let cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    header: cx(bem('header'), userCssClasses.header),
+    body: cx(bem('body'), userCssClasses.body),
+    footer: cx(bem('footer'), userCssClasses.footer),
+    list: cx(bem('list'), userCssClasses.list),
+    item: cx(bem('item'), userCssClasses.item),
+    label: cx(bem('label'), userCssClasses.label),
+    radio: cx(bem('radio'), userCssClasses.radio),
+    active: cx(bem('item', 'active'), userCssClasses.active)
+  };
 
-    render: function({helper, results, templatesConfig, state, createURL}) {
-      let templateProps = utils.prepareTemplateProps({
+  return {
+    init({templatesConfig, helper}) {
+      this._templateProps = utils.prepareTemplateProps({
         transformData,
         defaultTemplates,
         templatesConfig,
         templates
       });
 
-      let facetValues = options.map(function(option) {
-        option.isRefined = isRefined(helper.state, attributeName, option);
-        option.attributeName = attributeName;
-        return option;
+      this._toggleRefinement = facetValue => helper
+        .setState(refine(helper.state, attributeName, options, facetValue))
+        .search();
+    },
+    render: function({results, state, createURL}) {
+      let facetValues = options.map(facetValue => {
+        facetValue.isRefined = isRefined(state, attributeName, facetValue);
+        facetValue.attributeName = attributeName;
+        facetValue.url = createURL(refine(state, attributeName, options, facetValue.name));
+        return facetValue;
       });
 
-      let hasNoResults = results.nbHits === 0;
-
-      let cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        header: cx(bem('header'), userCssClasses.header),
-        body: cx(bem('body'), userCssClasses.body),
-        footer: cx(bem('footer'), userCssClasses.footer),
-        list: cx(bem('list'), userCssClasses.list),
-        item: cx(bem('item'), userCssClasses.item),
-        label: cx(bem('label'), userCssClasses.label),
-        radio: cx(bem('radio'), userCssClasses.radio),
-        active: cx(bem('item', 'active'), userCssClasses.active)
-      };
-
       ReactDOM.render(
         <RefinementList
-          createURL={(facetValue) => createURL(refine(state, attributeName, options, facetValue))}
           cssClasses={cssClasses}
           facetValues={facetValues}
-          shouldAutoHideContainer={hasNoResults}
-          templateProps={templateProps}
-          toggleRefinement={this._toggleRefinement.bind(null, helper)}
+          shouldAutoHideContainer={results.nbHits === 0}
+          templateProps={this._templateProps}
+          toggleRefinement={this._toggleRefinement}
         />,
         containerNode
       );
-    },
-    _toggleRefinement: function(helper, facetValue) {
-      let newState = refine(helper.state, attributeName, options, facetValue);
-
-      helper.setState(newState);
-
-      helper.search();
     }
   };
 }
diff --git a/src/widgets/numeric-selector/__tests__/numeric-selector-test.js b/src/widgets/numeric-selector/__tests__/numeric-selector-test.js
index f94990d678..98155bc6be 100644
--- a/src/widgets/numeric-selector/__tests__/numeric-selector-test.js
+++ b/src/widgets/numeric-selector/__tests__/numeric-selector-test.js
@@ -65,6 +65,8 @@ describe('numericSelector()', () => {
       hits: [],
       nbHits: 0
     };
+    widget.init({helper});
+    helper.addNumericRefinement.reset();
   });
 
   it('doesn\'t configure anything', () => {
@@ -93,13 +95,13 @@ describe('numericSelector()', () => {
   });
 
   it('sets the underlying numeric refinement', () => {
-    widget._refine(helper, 2);
+    widget._refine(2);
     expect(helper.addNumericRefinement.calledOnce).toBe(true, 'addNumericRefinement called once');
     expect(helper.search.calledOnce).toBe(true, 'search called once');
   });
 
   it('cancels the underlying numeric refinement', () => {
-    widget._refine(helper, undefined);
+    widget._refine(undefined);
     expect(helper.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once');
     expect(helper.addNumericRefinement.called).toBe(false, 'addNumericRefinement never called');
     expect(helper.search.calledOnce).toBe(true, 'search called once');
diff --git a/src/widgets/numeric-selector/numeric-selector.js b/src/widgets/numeric-selector/numeric-selector.js
index 4891315f75..33aef2ab21 100644
--- a/src/widgets/numeric-selector/numeric-selector.js
+++ b/src/widgets/numeric-selector/numeric-selector.js
@@ -44,42 +44,40 @@ function numericSelector({
     throw new Error(usage);
   }
 
+  const cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    item: cx(bem('item'), userCssClasses.item)
+  };
+
   return {
     init: function({helper}) {
       const currentValue = this._getRefinedValue(helper) || options[0].value;
       if (currentValue !== undefined) {
         helper.addNumericRefinement(attributeName, operator, currentValue);
       }
+
+      this._refine = value => {
+        helper.clearRefinements(attributeName);
+        if (value !== undefined) {
+          helper.addNumericRefinement(attributeName, operator, value);
+        }
+        helper.search();
+      };
     },
 
     render: function({helper, results}) {
-      const currentValue = this._getRefinedValue(helper);
-      const hasNoResults = results.nbHits === 0;
-
-      const cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        item: cx(bem('item'), userCssClasses.item)
-      };
       ReactDOM.render(
         <Selector
           cssClasses={cssClasses}
-          currentValue={currentValue}
+          currentValue={this._getRefinedValue(helper)}
           options={options}
-          setValue={this._refine.bind(this, helper)}
-          shouldAutoHideContainer={hasNoResults}
+          setValue={this._refine}
+          shouldAutoHideContainer={results.nbHits === 0}
         />,
         containerNode
       );
     },
 
-    _refine: function(helper, value) {
-      helper.clearRefinements(attributeName);
-      if (value !== undefined) {
-        helper.addNumericRefinement(attributeName, operator, value);
-      }
-      helper.search();
-    },
-
     _getRefinedValue: function(helper) {
       const refinements = helper.getRefinements(attributeName);
       const refinedValue = find(refinements, {operator});
diff --git a/src/widgets/pagination/__tests__/pagination-test.js b/src/widgets/pagination/__tests__/pagination-test.js
index bc60706092..0bc37f2029 100644
--- a/src/widgets/pagination/__tests__/pagination-test.js
+++ b/src/widgets/pagination/__tests__/pagination-test.js
@@ -54,6 +54,7 @@ describe('pagination()', () => {
       setCurrentPage: sinon.spy(),
       search: sinon.spy()
     };
+    widget.init({helper});
   });
 
   it('configures nothing', () => {
@@ -92,12 +93,14 @@ describe('pagination()', () => {
 
     it('should not scroll', () => {
       widget = pagination({container, scrollTo: false});
+      widget.init({helper});
       widget.setCurrentPage(helper, 2);
       expect(scrollIntoView.calledOnce).toBe(false, 'scrollIntoView never called');
     });
 
     it('should scroll to body', () => {
       widget = pagination({container});
+      widget.init({helper});
       widget.setCurrentPage(helper, 2);
       expect(scrollIntoView.calledOnce).toBe(true, 'scrollIntoView called once');
     });
diff --git a/src/widgets/pagination/pagination.js b/src/widgets/pagination/pagination.js
index 58e8500627..2c29c1c6aa 100644
--- a/src/widgets/pagination/pagination.js
+++ b/src/widgets/pagination/pagination.js
@@ -77,15 +77,30 @@ function pagination({
     Pagination = autoHideContainerHOC(Pagination);
   }
 
+  let cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    item: cx(bem('item'), userCssClasses.item),
+    link: cx(bem('link'), userCssClasses.link),
+    page: cx(bem('item', 'page'), userCssClasses.page),
+    previous: cx(bem('item', 'previous'), userCssClasses.previous),
+    next: cx(bem('item', 'next'), userCssClasses.next),
+    first: cx(bem('item', 'first'), userCssClasses.first),
+    last: cx(bem('item', 'last'), userCssClasses.last),
+    active: cx(bem('item', 'active'), userCssClasses.active),
+    disabled: cx(bem('item', 'disabled'), userCssClasses.disabled)
+  };
+
   labels = defaults(labels, defaultLabels);
 
   return {
-    setCurrentPage: function(helper, pageNumber) {
-      helper.setCurrentPage(pageNumber);
-      if (scrollToNode !== false) {
-        scrollToNode.scrollIntoView();
-      }
-      helper.search();
+    init({helper}) {
+      this.setCurrentPage = page => {
+        helper.setCurrentPage(page);
+        if (scrollToNode !== false) {
+          scrollToNode.scrollIntoView();
+        }
+        helper.search();
+      };
     },
 
     getMaxPage: function(results) {
@@ -95,34 +110,18 @@ function pagination({
       return results.nbPages;
     },
 
-    render: function({results, helper, createURL, state}) {
-      let currentPage = results.page;
-      let nbHits = results.nbHits;
-      let hasNoResults = nbHits === 0;
-      let cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        item: cx(bem('item'), userCssClasses.item),
-        link: cx(bem('link'), userCssClasses.link),
-        page: cx(bem('item', 'page'), userCssClasses.page),
-        previous: cx(bem('item', 'previous'), userCssClasses.previous),
-        next: cx(bem('item', 'next'), userCssClasses.next),
-        first: cx(bem('item', 'first'), userCssClasses.first),
-        last: cx(bem('item', 'last'), userCssClasses.last),
-        active: cx(bem('item', 'active'), userCssClasses.active),
-        disabled: cx(bem('item', 'disabled'), userCssClasses.disabled)
-      };
-
+    render: function({results, state, createURL}) {
       ReactDOM.render(
         <Pagination
           createURL={(page) => createURL(state.setPage(page))}
           cssClasses={cssClasses}
-          currentPage={currentPage}
+          currentPage={results.page}
           labels={labels}
-          nbHits={nbHits}
+          nbHits={results.nbHits}
           nbPages={this.getMaxPage(results)}
           padding={padding}
-          setCurrentPage={this.setCurrentPage.bind(this, helper)}
-          shouldAutoHideContainer={hasNoResults}
+          setCurrentPage={this.setCurrentPage}
+          shouldAutoHideContainer={results.nbHits === 0}
           showFirstLast={showFirstLast}
         />,
         containerNode
diff --git a/src/widgets/price-ranges/__tests__/price-ranges-test.js b/src/widgets/price-ranges/__tests__/price-ranges-test.js
index 39dac01629..27f742c3ac 100644
--- a/src/widgets/price-ranges/__tests__/price-ranges-test.js
+++ b/src/widgets/price-ranges/__tests__/price-ranges-test.js
@@ -33,8 +33,10 @@ describe('priceRanges()', () => {
   let widget;
   let results;
   let helper;
+  let state;
   let autoHideContainer;
   let headerFooter;
+  let createURL;
 
   beforeEach(function() {this.jsdom = jsdom();});
   afterEach(function() {this.jsdom();});
@@ -77,8 +79,14 @@ describe('priceRanges()', () => {
         search: sinon.spy()
       };
 
+      state = {
+        clearRefinements: sinon.stub().returnsThis(),
+        addNumericRefinement: sinon.stub().returnsThis()
+      };
+
+      createURL = sinon.stub().returns('#createURL');
+
       props = {
-        createURL: sinon.spy(),
         cssClasses: {
           active: 'ais-price-ranges--item__active',
           body: 'ais-price-ranges--body',
@@ -96,7 +104,10 @@ describe('priceRanges()', () => {
           separator: 'ais-price-ranges--separator'
         },
         shouldAutoHideContainer: false,
-        facetValues: generateRanges(results.getFacetStats()),
+        facetValues: generateRanges(results.getFacetStats()).map(facetValue => {
+          facetValue.url = '#createURL';
+          return facetValue;
+        }),
         currency: '$',
         labels: {
           separator: 'to',
@@ -110,11 +121,12 @@ describe('priceRanges()', () => {
           useCustomCompileOptions: {header: false, footer: false, item: false}
         }
       };
+      widget.init({helper});
     });
 
     it('calls twice ReactDOM.render(<PriceRanges props />, container)', () => {
-      widget.render({results, helper});
-      widget.render({results, helper});
+      widget.render({results, helper, state, createURL});
+      widget.render({results, helper, state, createURL});
 
       expect(ReactDOM.render.calledTwice).toBe(true, 'ReactDOM.render called twice');
       expect(ReactDOM.render.firstCall.args[0]).toEqualJSX(<PriceRanges {...props} />);
@@ -124,31 +136,31 @@ describe('priceRanges()', () => {
     });
 
     it('calls the decorators', () => {
-      widget.render({results, helper});
+      widget.render({results, helper, state, createURL});
       expect(headerFooter.calledOnce).toBe(true);
       expect(autoHideContainer.calledOnce).toBe(true);
     });
 
     it('calls getRefinements to check if there are some refinements', () => {
-      widget.render({results, helper});
+      widget.render({results, helper, state, createURL});
       expect(helper.getRefinements.calledOnce).toBe(true, 'getRefinements called once');
     });
 
     it('refines on the lower bound', () => {
-      widget._refine(helper, 10, undefined);
+      widget._refine(10, undefined);
       expect(helper.clearRefinements.calledOnce).toBe(true, 'helper.clearRefinements called once');
       expect(helper.addNumericRefinement.calledOnce).toBe(true, 'helper.addNumericRefinement called once');
       expect(helper.search.calledOnce).toBe(true, 'helper.search called once');
     });
 
     it('refines on the upper bound', () => {
-      widget._refine(helper, undefined, 10);
+      widget._refine(undefined, 10);
       expect(helper.clearRefinements.calledOnce).toBe(true, 'helper.clearRefinements called once');
       expect(helper.search.calledOnce).toBe(true, 'helper.search called once');
     });
 
     it('refines on the 2 bounds', () => {
-      widget._refine(helper, 10, 20);
+      widget._refine(10, 20);
       expect(helper.clearRefinements.calledOnce).toBe(true, 'helper.clearRefinements called once');
       expect(helper.addNumericRefinement.calledTwice).toBe(true, 'helper.addNumericRefinement called twice');
       expect(helper.search.calledOnce).toBe(true, 'helper.search called once');
diff --git a/src/widgets/price-ranges/price-ranges.js b/src/widgets/price-ranges/price-ranges.js
index 4bcd89a229..2caca6623b 100644
--- a/src/widgets/price-ranges/price-ranges.js
+++ b/src/widgets/price-ranges/price-ranges.js
@@ -70,6 +70,32 @@ function priceRanges({
     PriceRanges = autoHideContainerHOC(PriceRanges);
   }
 
+  let labels = {
+    button: 'Go',
+    separator: 'to',
+    ...userLabels
+  };
+
+  let cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    header: cx(bem('header'), userCssClasses.header),
+    body: cx(bem('body'), userCssClasses.body),
+    list: cx(bem('list'), userCssClasses.list),
+    link: cx(bem('link'), userCssClasses.link),
+    item: cx(bem('item'), userCssClasses.item),
+    active: cx(bem('item', 'active'), userCssClasses.active),
+    form: cx(bem('form'), userCssClasses.form),
+    label: cx(bem('label'), userCssClasses.label),
+    input: cx(bem('input'), userCssClasses.input),
+    currency: cx(bem('currency'), userCssClasses.currency),
+    button: cx(bem('button'), userCssClasses.button),
+    separator: cx(bem('separator'), userCssClasses.separator),
+    footer: cx(bem('footer'), userCssClasses.footer)
+  };
+
+  // before we had opts.currency, you had to pass labels.currency
+  if (userLabels.currency !== undefined && userLabels.currency !== currency) currency = userLabels.currency;
+
   return {
     getConfiguration: () => ({
       facets: [attributeName]
@@ -115,16 +141,17 @@ function priceRanges({
       helper.search();
     },
 
-    render: function({results, helper, templatesConfig, state, createURL}) {
-      let facetValues;
-      let labels = {
-        button: 'Go',
-        separator: 'to',
-        ...userLabels
-      };
+    init({helper, templatesConfig}) {
+      this._refine = this._refine.bind(this, helper);
+      this._templateProps = utils.prepareTemplateProps({
+        defaultTemplates,
+        templatesConfig,
+        templates
+      });
+    },
 
-      // before we had opts.currency, you had to pass labels.currency
-      if (userLabels.currency !== undefined && userLabels.currency !== currency) currency = userLabels.currency;
+    render: function({results, helper, state, createURL}) {
+      let facetValues;
 
       if (results.hits.length > 0) {
         facetValues = this._extractRefinedRange(helper);
@@ -136,52 +163,29 @@ function priceRanges({
         facetValues = [];
       }
 
-      let templateProps = utils.prepareTemplateProps({
-        defaultTemplates,
-        templatesConfig,
-        templates
+      facetValues.map(facetValue => {
+        let newState = state.clearRefinements(attributeName);
+        if (!facetValue.isRefined) {
+          if (facetValue.from !== undefined) {
+            newState = newState.addNumericRefinement(attributeName, '>=', Math.floor(facetValue.from));
+          }
+          if (facetValue.to !== undefined) {
+            newState = newState.addNumericRefinement(attributeName, '<=', Math.ceil(facetValue.to));
+          }
+        }
+        facetValue.url = createURL(newState);
+        return facetValue;
       });
 
-      let hasNoRefinements = facetValues.length === 0;
-
-      let cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        header: cx(bem('header'), userCssClasses.header),
-        body: cx(bem('body'), userCssClasses.body),
-        list: cx(bem('list'), userCssClasses.list),
-        link: cx(bem('link'), userCssClasses.link),
-        item: cx(bem('item'), userCssClasses.item),
-        active: cx(bem('item', 'active'), userCssClasses.active),
-        form: cx(bem('form'), userCssClasses.form),
-        label: cx(bem('label'), userCssClasses.label),
-        input: cx(bem('input'), userCssClasses.input),
-        currency: cx(bem('currency'), userCssClasses.currency),
-        button: cx(bem('button'), userCssClasses.button),
-        separator: cx(bem('separator'), userCssClasses.separator),
-        footer: cx(bem('footer'), userCssClasses.footer)
-      };
-
       ReactDOM.render(
         <PriceRanges
-          createURL={(from, to, isRefined) => {
-            let newState = state.clearRefinements(attributeName);
-            if (!isRefined) {
-              if (typeof from !== 'undefined') {
-                newState = newState.addNumericRefinement(attributeName, '>=', Math.floor(from));
-              }
-              if (typeof to !== 'undefined') {
-                newState = newState.addNumericRefinement(attributeName, '<=', Math.ceil(to));
-              }
-            }
-            return createURL(newState);
-          }}
           cssClasses={cssClasses}
           currency={currency}
           facetValues={facetValues}
           labels={labels}
-          refine={this._refine.bind(this, helper)}
-          shouldAutoHideContainer={hasNoRefinements}
-          templateProps={templateProps}
+          refine={this._refine}
+          shouldAutoHideContainer={facetValues.length === 0}
+          templateProps={this._templateProps}
         />,
         containerNode
       );
diff --git a/src/widgets/range-slider/__tests__/range-slider-test.js b/src/widgets/range-slider/__tests__/range-slider-test.js
index f51d2772a7..85da114cbe 100644
--- a/src/widgets/range-slider/__tests__/range-slider-test.js
+++ b/src/widgets/range-slider/__tests__/range-slider-test.js
@@ -62,6 +62,7 @@ describe('rangeSlider()', () => {
     sinon.spy(helper, 'addNumericRefinement');
     sinon.spy(helper, 'clearRefinements');
     sinon.spy(helper, 'search');
+    widget.init({helper});
   });
 
   context('without result', () => {
diff --git a/src/widgets/range-slider/range-slider.js b/src/widgets/range-slider/range-slider.js
index b6105f2558..332f529cb7 100644
--- a/src/widgets/range-slider/range-slider.js
+++ b/src/widgets/range-slider/range-slider.js
@@ -91,17 +91,24 @@ function rangeSlider({
         max
       };
     },
-    _refine(helper, stats, newValues) {
+    _refine(helper, oldValues, newValues) {
       helper.clearRefinements(attributeName);
-      if (newValues[0] > stats.min) {
+      if (newValues[0] > oldValues.min) {
         helper.addNumericRefinement(attributeName, '>=', Math.round(newValues[0]));
       }
-      if (newValues[1] < stats.max) {
+      if (newValues[1] < oldValues.max) {
         helper.addNumericRefinement(attributeName, '<=', Math.round(newValues[1]));
       }
       helper.search();
     },
-    render({results, helper, templatesConfig}) {
+    init({templatesConfig}) {
+      this._templateProps = utils.prepareTemplateProps({
+        defaultTemplates,
+        templatesConfig,
+        templates
+      });
+    },
+    render({results, helper}) {
       let cssClasses = {
         root: cx(bem(null), userCssClasses.root),
         header: cx(bem('header'), userCssClasses.header),
@@ -120,24 +127,16 @@ function rangeSlider({
         };
       }
 
-      let hasNoRefinements = stats.min === stats.max;
-
-      let templateProps = utils.prepareTemplateProps({
-        defaultTemplates,
-        templatesConfig,
-        templates
-      });
-
       ReactDOM.render(
         <Slider
           cssClasses={cssClasses}
           onChange={this._refine.bind(this, helper, stats)}
           pips={pips}
           range={{min: Math.floor(stats.min), max: Math.ceil(stats.max)}}
-          shouldAutoHideContainer={hasNoRefinements}
+          shouldAutoHideContainer={stats.min === stats.max}
           start={[currentRefinement.min, currentRefinement.max]}
           step={step}
-          templateProps={templateProps}
+          templateProps={this._templateProps}
           tooltips={tooltips}
         />,
         containerNode
diff --git a/src/widgets/refinement-list/__tests__/refinement-list-test.js b/src/widgets/refinement-list/__tests__/refinement-list-test.js
index e27aa049b9..b952bcf618 100644
--- a/src/widgets/refinement-list/__tests__/refinement-list-test.js
+++ b/src/widgets/refinement-list/__tests__/refinement-list-test.js
@@ -178,14 +178,15 @@ describe('refinementList()', () => {
 
     function renderWidget(userOptions) {
       widget = refinementList({...options, ...userOptions});
-      return widget.render({results, helper, templatesConfig, state, createURL});
+      widget.init({helper, createURL});
+      return widget.render({results, helper, templatesConfig, state});
     }
 
     beforeEach(() => {
       options = {container, attributeName: 'attributeName'};
-      results = {getFacetValues: sinon.stub().returns(['foo', 'bar'])};
+      results = {getFacetValues: sinon.stub().returns([{name: 'foo'}, {name: 'bar'}])};
       state = {toggleRefinement: sinon.spy()};
-      createURL = sinon.spy();
+      createURL = () => '#';
     });
 
     it('formats counts', () => {
@@ -235,7 +236,7 @@ describe('refinementList()', () => {
     context('autoHideContainer', () => {
       it('should set shouldAutoHideContainer to false if there are facetValues', () => {
         // Given
-        results.getFacetValues = sinon.stub().returns(['foo', 'bar']);
+        results.getFacetValues = sinon.stub().returns([{name: 'foo'}, {name: 'bar'}]);
 
         // When
         renderWidget();
@@ -271,6 +272,7 @@ describe('refinementList()', () => {
     it('should do a refinement on the selected facet', () => {
       // Given
       widget = refinementList(options);
+      widget.init({helper});
 
       // When
       widget.toggleRefinement(helper, 'attributeName', 'facetValue');
@@ -283,6 +285,7 @@ describe('refinementList()', () => {
     it('should start a search on refinement', () => {
       // Given
       widget = refinementList(options);
+      widget.init({helper});
 
       // When
       widget.toggleRefinement(helper, 'attributeName', 'facetValue');
diff --git a/src/widgets/refinement-list/refinement-list.js b/src/widgets/refinement-list/refinement-list.js
index 63b738a597..480c1f6ee5 100644
--- a/src/widgets/refinement-list/refinement-list.js
+++ b/src/widgets/refinement-list/refinement-list.js
@@ -99,6 +99,19 @@ function refinementList({
       {...templates, ...showMoreTemplates} :
       templates;
 
+  let cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    header: cx(bem('header'), userCssClasses.header),
+    body: cx(bem('body'), userCssClasses.body),
+    footer: cx(bem('footer'), userCssClasses.footer),
+    list: cx(bem('list'), userCssClasses.list),
+    item: cx(bem('item'), userCssClasses.item),
+    active: cx(bem('item', 'active'), userCssClasses.active),
+    label: cx(bem('label'), userCssClasses.label),
+    checkbox: cx(bem('checkbox'), userCssClasses.checkbox),
+    count: cx(bem('count'), userCssClasses.count)
+  };
+
   return {
     getConfiguration: (configuration) => {
       let widgetConfiguration = {
@@ -110,49 +123,36 @@ function refinementList({
 
       return widgetConfiguration;
     },
-    toggleRefinement: (helper, facetValue) => {
-      helper
-        .toggleRefinement(attributeName, facetValue)
-        .search();
-    },
-    render: function({results, helper, templatesConfig, state, createURL}) {
-      let templateProps = utils.prepareTemplateProps({
+    init({templatesConfig, helper, createURL}) {
+      this._templateProps = utils.prepareTemplateProps({
         transformData,
         defaultTemplates,
         templatesConfig,
         templates: allTemplates
       });
-
-      let facetValues = results.getFacetValues(attributeName, {sortBy: sortBy});
-
-      let hasNoFacetValues = facetValues.length === 0;
-
-      let cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        header: cx(bem('header'), userCssClasses.header),
-        body: cx(bem('body'), userCssClasses.body),
-        footer: cx(bem('footer'), userCssClasses.footer),
-        list: cx(bem('list'), userCssClasses.list),
-        item: cx(bem('item'), userCssClasses.item),
-        active: cx(bem('item', 'active'), userCssClasses.active),
-        label: cx(bem('label'), userCssClasses.label),
-        checkbox: cx(bem('checkbox'), userCssClasses.checkbox),
-        count: cx(bem('count'), userCssClasses.count)
-      };
-
-      let toggleRefinement = this.toggleRefinement.bind(this, helper);
+      this._createURL = (state, facetValue) => createURL(state.toggleRefinement(attributeName, facetValue));
+      this.toggleRefinement = facetValue => helper
+        .toggleRefinement(attributeName, facetValue)
+        .search();
+    },
+    render: function({results, state}) {
+      let facetValues = results
+        .getFacetValues(attributeName, {sortBy: sortBy})
+        .map(facetValue => {
+          facetValue.url = this._createURL(state, facetValue);
+          return facetValue;
+        });
 
       ReactDOM.render(
         <RefinementList
-          createURL={(facetValue) => createURL(state.toggleRefinement(attributeName, facetValue))}
           cssClasses={cssClasses}
           facetValues={facetValues}
           limitMax={widgetMaxValuesPerFacet}
           limitMin={limit}
-          shouldAutoHideContainer={hasNoFacetValues}
+          shouldAutoHideContainer={facetValues.length === 0}
           showMore={showMoreConfig !== null}
-          templateProps={templateProps}
-          toggleRefinement={toggleRefinement}
+          templateProps={this._templateProps}
+          toggleRefinement={this.toggleRefinement}
         />,
         containerNode
       );
diff --git a/src/widgets/sort-by-selector/__tests__/sort-by-selector-test.js b/src/widgets/sort-by-selector/__tests__/sort-by-selector-test.js
index 752a74159e..21d2866adc 100644
--- a/src/widgets/sort-by-selector/__tests__/sort-by-selector-test.js
+++ b/src/widgets/sort-by-selector/__tests__/sort-by-selector-test.js
@@ -59,13 +59,15 @@ describe('sortBySelector()', () => {
     widget = sortBySelector({container, indices, cssClasses});
     helper = {
       getIndex: sinon.stub().returns('index-a'),
-      setIndex: sinon.spy(),
+      setIndex: sinon.stub().returnsThis(),
       search: sinon.spy()
     };
+
     results = {
       hits: [],
       nbHits: 0
     };
+    widget.init({helper});
   });
 
   it('doesn\'t configure anything', () => {
@@ -96,7 +98,7 @@ describe('sortBySelector()', () => {
   });
 
   it('sets the underlying index', () => {
-    widget.setIndex(helper, 'index-b');
+    widget.setIndex('index-b');
     expect(helper.setIndex.calledOnce).toBe(true, 'setIndex called once');
     expect(helper.search.calledOnce).toBe(true, 'search called once');
   });
diff --git a/src/widgets/sort-by-selector/sort-by-selector.js b/src/widgets/sort-by-selector/sort-by-selector.js
index 7c31689020..9509de1fe9 100644
--- a/src/widgets/sort-by-selector/sort-by-selector.js
+++ b/src/widgets/sort-by-selector/sort-by-selector.js
@@ -48,6 +48,11 @@ function sortBySelector({
     return {label: index.label, value: index.name};
   });
 
+  let cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    item: cx(bem('item'), userCssClasses.item)
+  };
+
   return {
     init: function({helper}) {
       let currentIndex = helper.getIndex();
@@ -55,29 +60,19 @@ function sortBySelector({
       if (!isIndexInList) {
         throw new Error('[sortBySelector]: Index ' + currentIndex + ' not present in `indices`');
       }
-    },
-
-    setIndex: function(helper, indexName) {
-      helper.setIndex(indexName);
-      helper.search();
+      this.setIndex = indexName => helper
+        .setIndex(indexName)
+        .search();
     },
 
     render: function({helper, results}) {
-      let currentIndex = helper.getIndex();
-      let hasNoResults = results.nbHits === 0;
-      let setIndex = this.setIndex.bind(this, helper);
-
-      let cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        item: cx(bem('item'), userCssClasses.item)
-      };
       ReactDOM.render(
         <Selector
           cssClasses={cssClasses}
-          currentValue={currentIndex}
+          currentValue={helper.getIndex()}
           options={selectorOptions}
-          setValue={setIndex}
-          shouldAutoHideContainer={hasNoResults}
+          setValue={this.setIndex}
+          shouldAutoHideContainer={results.nbHits === 0}
         />,
         containerNode
       );
diff --git a/src/widgets/star-rating/__tests__/star-rating-test.js b/src/widgets/star-rating/__tests__/star-rating-test.js
index e95f295141..a87df19921 100644
--- a/src/widgets/star-rating/__tests__/star-rating-test.js
+++ b/src/widgets/star-rating/__tests__/star-rating-test.js
@@ -19,6 +19,8 @@ describe('starRating()', () => {
   let container;
   let widget;
   let helper;
+  let state;
+  let createURL;
 
   let autoHideContainer;
   let headerFooter;
@@ -45,10 +47,15 @@ describe('starRating()', () => {
       search: sinon.spy(),
       setState: sinon.spy()
     };
+    state = {
+      toggleRefinement: sinon.spy()
+    };
     results = {
       getFacetValues: sinon.stub().returns([]),
       hits: []
     };
+    createURL = () => '#';
+    widget.init({helper});
   });
 
   it('configures the underlying disjunctive facet', () => {
@@ -56,8 +63,8 @@ describe('starRating()', () => {
   });
 
   it('calls twice ReactDOM.render(<RefinementList props />, container)', () => {
-    widget.render({helper, results});
-    widget.render({helper, results});
+    widget.render({state, helper, results, createURL});
+    widget.render({state, helper, results, createURL});
 
     let props = {
       cssClasses: {
@@ -75,12 +82,11 @@ describe('starRating()', () => {
         root: 'ais-star-rating'
       },
       facetValues: [
-        {isRefined: false, stars: [true, true, true, true, false], count: 0, name: '4', labels: defaultLabels},
-        {isRefined: false, stars: [true, true, true, false, false], count: 0, name: '3', labels: defaultLabels},
-        {isRefined: false, stars: [true, true, false, false, false], count: 0, name: '2', labels: defaultLabels},
-        {isRefined: false, stars: [true, false, false, false, false], count: 0, name: '1', labels: defaultLabels}
+        {isRefined: false, stars: [true, true, true, true, false], count: 0, name: '4', labels: defaultLabels, url: '#'},
+        {isRefined: false, stars: [true, true, true, false, false], count: 0, name: '3', labels: defaultLabels, url: '#'},
+        {isRefined: false, stars: [true, true, false, false, false], count: 0, name: '2', labels: defaultLabels, url: '#'},
+        {isRefined: false, stars: [true, false, false, false, false], count: 0, name: '1', labels: defaultLabels, url: '#'}
       ],
-      createURL: () => {},
       toggleRefinement: () => {},
       shouldAutoHideContainer: false,
       templateProps: {
@@ -107,7 +113,7 @@ describe('starRating()', () => {
   it('hide the count==0 when there is a refinement', () => {
     helper.getRefinements = sinon.stub().returns([{value: '1'}]);
     results.getFacetValues = sinon.stub().returns([{name: '1', count: 42}]);
-    widget.render({helper, results});
+    widget.render({state, helper, results, createURL});
     expect(ReactDOM.render.calledOnce).toBe(true, 'ReactDOM.render called once');
     expect(ReactDOM.render.firstCall.args[0].props.facetValues).toEqual([
       {
@@ -115,14 +121,15 @@ describe('starRating()', () => {
         isRefined: true,
         name: '1',
         stars: [true, false, false, false, false],
-        labels: defaultLabels
+        labels: defaultLabels,
+        url: '#'
       }
     ]);
   });
 
   it('doesn\'t call the refinement functions if not refined', () => {
     helper.getRefinements = sinon.stub().returns([]);
-    widget.render({helper, results});
+    widget.render({state, helper, results, createURL});
     expect(helper.clearRefinements.called).toBe(false, 'clearRefinements never called');
     expect(helper.addDisjunctiveFacetRefinement.called).toBe(false, 'addDisjunctiveFacetRefinement never called');
     expect(helper.search.called).toBe(false, 'search never called');
@@ -130,7 +137,7 @@ describe('starRating()', () => {
 
   it('refines the search', () => {
     helper.getRefinements = sinon.stub().returns([]);
-    widget._toggleRefinement(helper, '3');
+    widget._toggleRefinement('3');
     expect(helper.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once');
     expect(helper.addDisjunctiveFacetRefinement.calledThrice).toBe(true, 'addDisjunctiveFacetRefinement called thrice');
     expect(helper.search.calledOnce).toBe(true, 'search called once');
@@ -138,7 +145,7 @@ describe('starRating()', () => {
 
   it('toggles the refinements', () => {
     helper.getRefinements = sinon.stub().returns([{value: '2'}]);
-    widget._toggleRefinement(helper, '2');
+    widget._toggleRefinement('2');
     expect(helper.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once');
     expect(helper.addDisjunctiveFacetRefinement.called).toBe(false, 'addDisjunctiveFacetRefinement never called');
     expect(helper.search.calledOnce).toBe(true, 'search called once');
@@ -146,7 +153,7 @@ describe('starRating()', () => {
 
   it('toggles the refinements with another facet', () => {
     helper.getRefinements = sinon.stub().returns([{value: '2'}]);
-    widget._toggleRefinement(helper, '4');
+    widget._toggleRefinement('4');
     expect(helper.clearRefinements.calledOnce).toBe(true, 'clearRefinements called once');
     expect(helper.addDisjunctiveFacetRefinement.calledTwice).toBe(true, 'addDisjunctiveFacetRefinement called twice');
     expect(helper.search.calledOnce).toBe(true, 'search called once');
diff --git a/src/widgets/star-rating/star-rating.js b/src/widgets/star-rating/star-rating.js
index f3ce4711cc..57f6162812 100644
--- a/src/widgets/star-rating/star-rating.js
+++ b/src/widgets/star-rating/star-rating.js
@@ -72,6 +72,21 @@ function starRating({
     throw new Error(usage);
   }
 
+  let cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    header: cx(bem('header'), userCssClasses.header),
+    body: cx(bem('body'), userCssClasses.body),
+    footer: cx(bem('footer'), userCssClasses.footer),
+    list: cx(bem('list'), userCssClasses.list),
+    item: cx(bem('item'), userCssClasses.item),
+    link: cx(bem('link'), userCssClasses.link),
+    disabledLink: cx(bem('link', 'disabled'), userCssClasses.disabledLink),
+    count: cx(bem('count'), userCssClasses.count),
+    star: cx(bem('star'), userCssClasses.star),
+    emptyStar: cx(bem('star', 'empty'), userCssClasses.emptyStar),
+    active: cx(bem('item', 'active'), userCssClasses.active)
+  };
+
   return {
     getConfiguration: () => {
       return {
@@ -79,14 +94,17 @@ function starRating({
       };
     },
 
-    render: function({helper, results, templatesConfig, state, createURL}) {
-      let templateProps = utils.prepareTemplateProps({
+    init({templatesConfig, helper}) {
+      this._templateProps = utils.prepareTemplateProps({
         transformData,
         defaultTemplates,
         templatesConfig,
         templates
       });
+      this._toggleRefinement = this._toggleRefinement.bind(this, helper);
+    },
 
+    render: function({helper, results, state, createURL}) {
       let facetValues = [];
       let allValues = {};
       for (let v = max - 1; v >= 0; --v) {
@@ -117,35 +135,18 @@ function starRating({
           name: '' + star,
           count: count,
           isRefined: refinedStar === star,
+          url: createURL(state.toggleRefinement(attributeName, stars)),
           labels
         });
       }
 
-      let cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        header: cx(bem('header'), userCssClasses.header),
-        body: cx(bem('body'), userCssClasses.body),
-        footer: cx(bem('footer'), userCssClasses.footer),
-        list: cx(bem('list'), userCssClasses.list),
-        item: cx(bem('item'), userCssClasses.item),
-        link: cx(bem('link'), userCssClasses.link),
-        disabledLink: cx(bem('link', 'disabled'), userCssClasses.disabledLink),
-        count: cx(bem('count'), userCssClasses.count),
-        star: cx(bem('star'), userCssClasses.star),
-        emptyStar: cx(bem('star', 'empty'), userCssClasses.emptyStar),
-        active: cx(bem('item', 'active'), userCssClasses.active)
-      };
-
       ReactDOM.render(
         <RefinementList
-          createURL={(stars) => {
-            return createURL(state.toggleRefinement(attributeName, stars));
-          }}
           cssClasses={cssClasses}
           facetValues={facetValues}
           shouldAutoHideContainer={results.nbHits === 0}
-          templateProps={templateProps}
-          toggleRefinement={this._toggleRefinement.bind(this, helper)}
+          templateProps={this._templateProps}
+          toggleRefinement={this._toggleRefinement}
         />,
         containerNode
       );
diff --git a/src/widgets/stats/stats.js b/src/widgets/stats/stats.js
index 5594488d71..af309ac3a9 100644
--- a/src/widgets/stats/stats.js
+++ b/src/widgets/stats/stats.js
@@ -53,24 +53,25 @@ function stats({
     throw new Error(usage);
   }
 
+  let cssClasses = {
+    body: cx(bem('body'), userCssClasses.body),
+    footer: cx(bem('footer'), userCssClasses.footer),
+    header: cx(bem('header'), userCssClasses.header),
+    root: cx(bem(null), userCssClasses.root),
+    time: cx(bem('time'), userCssClasses.time)
+  };
+
   return {
-    render: function({results, templatesConfig}) {
-      let hasNoResults = results.nbHits === 0;
-      let templateProps = utils.prepareTemplateProps({
+    init({templatesConfig}) {
+      this._templateProps = utils.prepareTemplateProps({
         transformData,
         defaultTemplates,
         templatesConfig,
         templates
       });
+    },
 
-      let cssClasses = {
-        body: cx(bem('body'), userCssClasses.body),
-        footer: cx(bem('footer'), userCssClasses.footer),
-        header: cx(bem('header'), userCssClasses.header),
-        root: cx(bem(null), userCssClasses.root),
-        time: cx(bem('time'), userCssClasses.time)
-      };
-
+    render: function({results}) {
       ReactDOM.render(
         <Stats
           cssClasses={cssClasses}
@@ -80,8 +81,8 @@ function stats({
           page={results.page}
           processingTimeMS={results.processingTimeMS}
           query={results.query}
-          shouldAutoHideContainer={hasNoResults}
-          templateProps={templateProps}
+          shouldAutoHideContainer={results.nbHits === 0}
+          templateProps={this._templateProps}
         />,
         containerNode
       );
diff --git a/src/widgets/toggle/__tests__/toggle-test.js b/src/widgets/toggle/__tests__/toggle-test.js
index dcc62b4b9f..5c79855b4b 100644
--- a/src/widgets/toggle/__tests__/toggle-test.js
+++ b/src/widgets/toggle/__tests__/toggle-test.js
@@ -80,7 +80,9 @@ describe('toggle()', () => {
       let templateProps;
       let results;
       let helper;
+      let state;
       let props;
+      let createURL;
 
       beforeEach(() => {
         templateProps = {
@@ -97,6 +99,9 @@ describe('toggle()', () => {
           addFacetRefinement: sinon.spy(),
           search: sinon.spy()
         };
+        state = {
+          toggleRefinement: sinon.spy()
+        };
         props = {
           cssClasses: {
             root: 'ais-toggle',
@@ -111,9 +116,10 @@ describe('toggle()', () => {
             count: 'ais-toggle--count'
           },
           templateProps,
-          toggleRefinement: function() {},
-          createURL: () => '#'
+          toggleRefinement: function() {}
         };
+        createURL = () => '#';
+        widget.init({state});
       });
 
       it('calls twice ReactDOM.render', () => {
@@ -123,8 +129,8 @@ describe('toggle()', () => {
           getFacetValues: sinon.stub().returns([{name: 'true', count: 2}, {name: 'false', count: 1}])
         };
         widget = toggle({container, attributeName, label});
-        widget.render({results, helper});
-        widget.render({results, helper});
+        widget.render({results, helper, state, createURL});
+        widget.render({results, helper, state, createURL});
         expect(ReactDOM.render.calledTwice).toBe(true, 'ReactDOM.render called twice');
         expect(ReactDOM.render.firstCall.args[1]).toEqual(container);
         expect(ReactDOM.render.secondCall.args[1]).toEqual(container);
@@ -141,17 +147,18 @@ describe('toggle()', () => {
         results = {
           hits: [{Hello: ', world!'}],
           nbHits: 1,
-          getFacetValues: sinon.stub().returns([{name: 'true', count: 2}, {name: 'false', count: 1}])
+          getFacetValues: sinon.stub().returns([{name: 'true', count: 2, url: '#'}, {name: 'false', count: 1, url: '#'}])
         };
         props.cssClasses.root += ' root cx';
         props = {
-          facetValues: [{count: 1, isRefined: false, name: label}],
+          facetValues: [{count: 1, isRefined: false, name: label, url: '#'}],
           shouldAutoHideContainer: false,
           ...props
         };
         let cssClasses = {root: ['root', 'cx']};
         widget = toggle({container, attributeName, label, cssClasses});
-        widget.render({results, helper});
+        widget.init({state, helper});
+        widget.render({results, helper, state, createURL});
         expect(ReactDOM.render.firstCall.args[0]).toEqualJSX(<RefinementList {...props} />);
       });
 
@@ -162,11 +169,12 @@ describe('toggle()', () => {
           getFacetValues: sinon.stub().returns([{name: 'true', count: 2}, {name: 'false', count: 1}])
         };
         widget = toggle({container, attributeName, label});
-        widget.render({results, helper});
-        widget.render({results, helper});
+        widget.init({state, helper});
+        widget.render({results, helper, state, createURL});
+        widget.render({results, helper, state, createURL});
 
         props = {
-          facetValues: [{count: 1, isRefined: false, name: label}],
+          facetValues: [{count: 1, isRefined: false, name: label, url: '#'}],
           shouldAutoHideContainer: false,
           ...props
         };
@@ -182,11 +190,12 @@ describe('toggle()', () => {
           getFacetValues: sinon.stub().returns([])
         };
         widget = toggle({container, attributeName, label});
-        widget.render({results, helper});
-        widget.render({results, helper});
+        widget.init({state, helper});
+        widget.render({results, helper, state, createURL});
+        widget.render({results, helper, state, createURL});
 
         props = {
-          facetValues: [{name: label, isRefined: false, count: null}],
+          facetValues: [{name: label, isRefined: false, count: null, url: '#'}],
           shouldAutoHideContainer: true,
           ...props
         };
@@ -207,11 +216,12 @@ describe('toggle()', () => {
           getFacetValues: sinon.stub().returns([{name: 'true', count: 2}, {name: 'false', count: 1}])
         };
         widget = toggle({container, attributeName, label});
-        widget.render({results, helper});
-        widget.render({results, helper});
+        widget.init({state, helper});
+        widget.render({results, helper, state, createURL});
+        widget.render({results, helper, state, createURL});
 
         props = {
-          facetValues: [{count: 2, isRefined: true, name: label}],
+          facetValues: [{count: 2, isRefined: true, name: label, url: '#'}],
           shouldAutoHideContainer: false,
           ...props
         };
@@ -227,7 +237,8 @@ describe('toggle()', () => {
           getFacetValues: sinon.stub().returns([{name: 'true', count: 2}, {name: 'false', count: 1}])
         };
         widget = toggle({container, attributeName, label});
-        widget.render({results, helper});
+        widget.init({state, helper});
+        widget.render({results, helper, state, createURL});
         let toggleRefinement = ReactDOM.render.firstCall.args[0].props.toggleRefinement;
         expect(toggleRefinement).toBeA('function');
         toggleRefinement();
diff --git a/src/widgets/toggle/toggle.js b/src/widgets/toggle/toggle.js
index 853dec52b2..719c02e5c7 100644
--- a/src/widgets/toggle/toggle.js
+++ b/src/widgets/toggle/toggle.js
@@ -78,11 +78,32 @@ function toggle({
 
   let hasAnOffValue = (userValues.off !== undefined);
 
+  let cssClasses = {
+    root: cx(bem(null), userCssClasses.root),
+    header: cx(bem('header'), userCssClasses.header),
+    body: cx(bem('body'), userCssClasses.body),
+    footer: cx(bem('footer'), userCssClasses.footer),
+    list: cx(bem('list'), userCssClasses.list),
+    item: cx(bem('item'), userCssClasses.item),
+    active: cx(bem('item', 'active'), userCssClasses.active),
+    label: cx(bem('label'), userCssClasses.label),
+    checkbox: cx(bem('checkbox'), userCssClasses.checkbox),
+    count: cx(bem('count'), userCssClasses.count)
+  };
+
   return {
     getConfiguration: () => ({
       facets: [attributeName]
     }),
-    init: ({state, helper}) => {
+    init({state, helper, templatesConfig}) {
+      this._templateProps = utils.prepareTemplateProps({
+        transformData,
+        defaultTemplates,
+        templatesConfig,
+        templates
+      });
+      this.toggleRefinement = this.toggleRefinement.bind(this, helper);
+
       if (userValues.off === undefined) {
         return;
       }
@@ -112,47 +133,24 @@ function toggle({
 
       helper.search();
     },
-    render: function({helper, results, templatesConfig, state, createURL}) {
+    render: function({helper, results, state, createURL}) {
       let isRefined = helper.state.isFacetRefined(attributeName, userValues.on);
       let values = find(results.getFacetValues(attributeName), {name: isRefined.toString()});
-      let hasNoResults = results.nbHits === 0;
-
-      let templateProps = utils.prepareTemplateProps({
-        transformData,
-        defaultTemplates,
-        templatesConfig,
-        templates
-      });
 
       let facetValue = {
         name: label,
         isRefined: isRefined,
-        count: values && values.count || null
-      };
-
-      let cssClasses = {
-        root: cx(bem(null), userCssClasses.root),
-        header: cx(bem('header'), userCssClasses.header),
-        body: cx(bem('body'), userCssClasses.body),
-        footer: cx(bem('footer'), userCssClasses.footer),
-        list: cx(bem('list'), userCssClasses.list),
-        item: cx(bem('item'), userCssClasses.item),
-        active: cx(bem('item', 'active'), userCssClasses.active),
-        label: cx(bem('label'), userCssClasses.label),
-        checkbox: cx(bem('checkbox'), userCssClasses.checkbox),
-        count: cx(bem('count'), userCssClasses.count)
+        count: values && values.count || null,
+        url: createURL(state.toggleRefinement(attributeName, isRefined))
       };
 
-      let toggleRefinement = this.toggleRefinement.bind(this, helper, isRefined);
-
       ReactDOM.render(
         <RefinementList
-          createURL={() => createURL(state.toggleRefinement(attributeName, facetValue.isRefined))}
           cssClasses={cssClasses}
           facetValues={[facetValue]}
-          shouldAutoHideContainer={hasNoResults}
-          templateProps={templateProps}
-          toggleRefinement={toggleRefinement}
+          shouldAutoHideContainer={results.nbHits === 0}
+          templateProps={this._templateProps}
+          toggleRefinement={this.toggleRefinement}
         />,
         containerNode
       );