improve react usage (#1936)

* remove React.createClass

* remove react-addons-shallow-compare

* convert to functional components

* replace Component with PureComponent

* remove react-router-redux

* declare function components consistently

* fix quality flaws

* fix typo

* declare children prop consistently

* pass location to ComponentNavMenu

23 files changed, 125 insertions, 170 deletions

diff --git a/server/sonar-web/src/main/js/apps/settings/components/AllCategoriesList.js b/server/sonar-web/src/main/js/apps/settings/components/AllCategoriesList.js
index f8777a4cfd8..684d418af7e 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/AllCategoriesList.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/AllCategoriesList.js
@@ -23,10 +23,8 @@ import { connect } from 'react-redux';
 import CategoriesList from './CategoriesList';
 import { getSettingsAppAllCategories } from '../../../store/rootReducer';
 
-class AllCategoriesList extends React.Component {
-  render() {
-    return <CategoriesList {...this.props} />;
-  }
+function AllCategoriesList(props) {
+  return <CategoriesList {...props} />;
 }
 
 const mapStateToProps = state => ({
diff --git a/server/sonar-web/src/main/js/apps/settings/components/App.js b/server/sonar-web/src/main/js/apps/settings/components/App.js
index e8963b39fc5..c86abf3956a 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/App.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/App.js
@@ -19,7 +19,6 @@
  */
 // @flow
 import React from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
 import { connect } from 'react-redux';
 import PageHeader from './PageHeader';
 import CategoryDefinitionsList from './CategoryDefinitionsList';
@@ -40,7 +39,7 @@ type State = {
   loaded: boolean
 };
 
-class App extends React.Component {
+class App extends React.PureComponent {
   props: Props;
   state: State = { loaded: false };
 
@@ -55,10 +54,6 @@ class App extends React.Component {
     });
   }
 
-  shouldComponentUpdate(nextProps: Props, nextState: ?{}) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentDidUpdate(prevProps) {
     if (prevProps.component !== this.props.component) {
       const componentKey = this.props.component ? this.props.component.key : null;
diff --git a/server/sonar-web/src/main/js/apps/settings/components/CategoriesList.js b/server/sonar-web/src/main/js/apps/settings/components/CategoriesList.js
index 873dc94d63d..3ad92ee2b96 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/CategoriesList.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/CategoriesList.js
@@ -19,7 +19,6 @@
  */
 // @flow
 import React from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
 import { sortBy } from 'lodash';
 import { IndexLink } from 'react-router';
 import { getCategoryName } from '../utils';
@@ -36,13 +35,9 @@ type Props = {
   selectedCategory: string
 };
 
-export default class CategoriesList extends React.Component {
+export default class CategoriesList extends React.PureComponent {
   rops: Props;
 
-  shouldComponentUpdate(nextProps: Props, nextState: ?{}) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   renderLink(category: Category) {
     const query = {};
 
diff --git a/server/sonar-web/src/main/js/apps/settings/components/CategoryDefinitionsList.js b/server/sonar-web/src/main/js/apps/settings/components/CategoryDefinitionsList.js
index 2759f04b1e3..81a992dc894 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/CategoryDefinitionsList.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/CategoryDefinitionsList.js
@@ -23,10 +23,8 @@ import { connect } from 'react-redux';
 import SubCategoryDefinitionsList from './SubCategoryDefinitionsList';
 import { getSettingsAppSettingsForCategory } from '../../../store/rootReducer';
 
-class CategoryDefinitionsList extends React.Component {
-  render() {
-    return <SubCategoryDefinitionsList {...this.props} />;
-  }
+function CategoryDefinitionsList(props) {
+  return <SubCategoryDefinitionsList {...props} />;
 }
 
 const mapStateToProps = (state, ownProps) => ({
diff --git a/server/sonar-web/src/main/js/apps/settings/components/Definition.js b/server/sonar-web/src/main/js/apps/settings/components/Definition.js
index b16c3207caf..3d765002dc9 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/Definition.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/Definition.js
@@ -20,7 +20,6 @@
 // @flow
 import React from 'react';
 import { connect } from 'react-redux';
-import shallowCompare from 'react-addons-shallow-compare';
 import classNames from 'classnames';
 import Input from './inputs/Input';
 import DefinitionDefaults from './DefinitionDefaults';
@@ -42,7 +41,7 @@ import {
   getSettingsAppValidationMessage
 } from '../../../store/rootReducer';
 
-class Definition extends React.Component {
+class Definition extends React.PureComponent {
   mounted: boolean;
   timeout: number;
 
@@ -68,10 +67,6 @@ class Definition extends React.Component {
     this.mounted = true;
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentWillUnmount() {
     this.mounted = false;
   }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/DefinitionChanges.js b/server/sonar-web/src/main/js/apps/settings/components/DefinitionChanges.js
index c32627b74ff..ef9c248ffd0 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/DefinitionChanges.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/DefinitionChanges.js
@@ -19,19 +19,14 @@
  */
 // @flow
 import React from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
 import { translate } from '../../../helpers/l10n';
 
-export default class DefinitionChanges extends React.Component {
+export default class DefinitionChanges extends React.PureComponent {
   static propTypes = {
     onSave: React.PropTypes.func.isRequired,
     onCancel: React.PropTypes.func.isRequired
   };
 
-  shouldComponentUpdate(nextProps: {}, nextState: ?{}) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   handleSaveClick(e: Object) {
     e.preventDefault();
     e.target.blur();
diff --git a/server/sonar-web/src/main/js/apps/settings/components/DefinitionDefaults.js b/server/sonar-web/src/main/js/apps/settings/components/DefinitionDefaults.js
index 7d3655801f8..4f156e2a521 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/DefinitionDefaults.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/DefinitionDefaults.js
@@ -22,7 +22,7 @@ import React from 'react';
 import { getSettingValue, isEmptyValue, getDefaultValue } from '../utils';
 import { translate } from '../../../helpers/l10n';
 
-export default class DefinitionDefaults extends React.Component {
+export default class DefinitionDefaults extends React.PureComponent {
   static propTypes = {
     setting: React.PropTypes.object.isRequired,
     isDefault: React.PropTypes.bool.isRequired,
diff --git a/server/sonar-web/src/main/js/apps/settings/components/DefinitionsList.js b/server/sonar-web/src/main/js/apps/settings/components/DefinitionsList.js
index ca8222a7496..7a6c4c6d8e5 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/DefinitionsList.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/DefinitionsList.js
@@ -19,19 +19,14 @@
  */
 // @flow
 import React from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
 import Definition from './Definition';
 
-export default class DefinitionsList extends React.Component {
+export default class DefinitionsList extends React.PureComponent {
   static propTypes = {
     component: React.PropTypes.object,
     settings: React.PropTypes.array.isRequired
   };
 
-  shouldComponentUpdate(nextProps: {}, nextState: ?{}) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   render() {
     return (
       <ul className="settings-definitions-list">
diff --git a/server/sonar-web/src/main/js/apps/settings/components/EmailForm.js b/server/sonar-web/src/main/js/apps/settings/components/EmailForm.js
index e923f635443..2017a265f2c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/EmailForm.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/EmailForm.js
@@ -24,7 +24,7 @@ import { sendTestEmail } from '../../../api/settings';
 import { parseError } from '../../code/utils';
 import { getCurrentUser } from '../../../store/rootReducer';
 
-class EmailForm extends React.Component {
+class EmailForm extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/PageHeader.js b/server/sonar-web/src/main/js/apps/settings/components/PageHeader.js
index 0240fa7c61b..c4bf4675a9c 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/PageHeader.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/PageHeader.js
@@ -21,7 +21,7 @@
 import React from 'react';
 import { translate } from '../../../helpers/l10n';
 
-export default class PageHeader extends React.Component {
+export default class PageHeader extends React.PureComponent {
   static propTypes = {
     component: React.PropTypes.object
   };
diff --git a/server/sonar-web/src/main/js/apps/settings/components/SubCategoryDefinitionsList.js b/server/sonar-web/src/main/js/apps/settings/components/SubCategoryDefinitionsList.js
index eb7b7fb045d..2f215d01723 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/SubCategoryDefinitionsList.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/SubCategoryDefinitionsList.js
@@ -19,22 +19,17 @@
  */
 // @flow
 import React from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
 import { groupBy, sortBy } from 'lodash';
 import DefinitionsList from './DefinitionsList';
 import EmailForm from './EmailForm';
 import { getSubCategoryName, getSubCategoryDescription } from '../utils';
 
-export default class SubCategoryDefinitionsList extends React.Component {
+export default class SubCategoryDefinitionsList extends React.PureComponent {
   static propTypes = {
     component: React.PropTypes.object,
     settings: React.PropTypes.array.isRequired
   };
 
-  shouldComponentUpdate(nextProps: {}, nextState: ?{}) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   renderEmailForm(subCategoryKey: string) {
     const isEmailSettings = this.props.category === 'general' && subCategoryKey === 'email';
     if (!isEmailSettings) {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/WildcardsHelp.js b/server/sonar-web/src/main/js/apps/settings/components/WildcardsHelp.js
index c9e06ec513d..071989e672e 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/WildcardsHelp.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/WildcardsHelp.js
@@ -19,107 +19,105 @@
  */
 import React from 'react';
 
-export default class WildcardsHelp extends React.Component {
-  render() {
-    return (
-      <div className="huge-spacer-top">
-        <h2 className="spacer-bottom">Wildcards</h2>
-        <p className="spacer-bottom">Following rules are applied:</p>
+export default function WildcardsHelp() {
+  return (
+    <div className="huge-spacer-top">
+      <h2 className="spacer-bottom">Wildcards</h2>
+      <p className="spacer-bottom">Following rules are applied:</p>
 
-        <table className="data spacer-bottom">
-          <tbody>
-            <tr>
-              <td>*</td>
-              <td>Match zero or more characters</td>
-            </tr>
-            <tr>
-              <td>**</td>
-              <td>Match zero or more directories</td>
-            </tr>
-            <tr>
-              <td>?</td>
-              <td>Match a single character</td>
-            </tr>
-          </tbody>
-        </table>
+      <table className="data spacer-bottom">
+        <tbody>
+          <tr>
+            <td>*</td>
+            <td>Match zero or more characters</td>
+          </tr>
+          <tr>
+            <td>**</td>
+            <td>Match zero or more directories</td>
+          </tr>
+          <tr>
+            <td>?</td>
+            <td>Match a single character</td>
+          </tr>
+        </tbody>
+      </table>
 
-        <table className="data zebra">
-          <thead>
-            <tr>
-              <th>Example</th>
-              <th>Matches</th>
-              <th>Does not match</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>**/foo/*.js</td>
-              <td>
-                <ul>
-                  <li>src/foo/bar.js</li>
-                  <li>lib/ui/foo/bar.js</li>
-                </ul>
-              </td>
-              <td>
-                <ul>
-                  <li>src/bar.js</li>
-                  <li>src/foo2/bar.js</li>
-                </ul>
-              </td>
-            </tr>
-            <tr>
-              <td>src/foo/*bar*.js</td>
-              <td>
-                <ul>
-                  <li>src/foo/bar.js</li>
-                  <li>src/foo/bar1.js</li>
-                  <li>src/foo/bar123.js</li>
-                  <li>src/foo/123bar123.js</li>
-                </ul>
-              </td>
-              <td>
-                <ul>
-                  <li>src/foo/ui/bar.js</li>
-                  <li>src/bar.js</li>
-                </ul>
-              </td>
-            </tr>
-            <tr>
-              <td>src/foo/**</td>
-              <td>
-                <ul>
-                  <li>src/foo/bar.js</li>
-                  <li>src/foo/ui/bar.js</li>
-                </ul>
-              </td>
-              <td>
-                <ul>
-                  <li>src/bar/foo/bar.js</li>
-                  <li>src/bar.js</li>
-                </ul>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                **/foo?.js
-              </td>
-              <td>
-                <ul>
-                  <li>src/foo1.js</li>
-                  <li>src/bar/foo1.js</li>
-                </ul>
-              </td>
-              <td>
-                <ul>
-                  <li>src/foo.js</li>
-                  <li>src/foo12.js</li>
-                  <li>src/12foo3.js</li>
-                </ul>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    );
-  }
+      <table className="data zebra">
+        <thead>
+          <tr>
+            <th>Example</th>
+            <th>Matches</th>
+            <th>Does not match</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>**/foo/*.js</td>
+            <td>
+              <ul>
+                <li>src/foo/bar.js</li>
+                <li>lib/ui/foo/bar.js</li>
+              </ul>
+            </td>
+            <td>
+              <ul>
+                <li>src/bar.js</li>
+                <li>src/foo2/bar.js</li>
+              </ul>
+            </td>
+          </tr>
+          <tr>
+            <td>src/foo/*bar*.js</td>
+            <td>
+              <ul>
+                <li>src/foo/bar.js</li>
+                <li>src/foo/bar1.js</li>
+                <li>src/foo/bar123.js</li>
+                <li>src/foo/123bar123.js</li>
+              </ul>
+            </td>
+            <td>
+              <ul>
+                <li>src/foo/ui/bar.js</li>
+                <li>src/bar.js</li>
+              </ul>
+            </td>
+          </tr>
+          <tr>
+            <td>src/foo/**</td>
+            <td>
+              <ul>
+                <li>src/foo/bar.js</li>
+                <li>src/foo/ui/bar.js</li>
+              </ul>
+            </td>
+            <td>
+              <ul>
+                <li>src/bar/foo/bar.js</li>
+                <li>src/bar.js</li>
+              </ul>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              **/foo?.js
+            </td>
+            <td>
+              <ul>
+                <li>src/foo1.js</li>
+                <li>src/bar/foo1.js</li>
+              </ul>
+            </td>
+            <td>
+              <ul>
+                <li>src/foo.js</li>
+                <li>src/foo12.js</li>
+                <li>src/12foo3.js</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
 }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/Input.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/Input.js
index 43daae89c40..ac0e51a76b6 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/Input.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/Input.js
@@ -18,23 +18,18 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React from 'react';
-import shallowCompare from 'react-addons-shallow-compare';
 import PropertySetInput from './PropertySetInput';
 import MultiValueInput from './MultiValueInput';
 import PrimitiveInput from './PrimitiveInput';
 import { TYPE_PROPERTY_SET } from '../../constants';
 
-export default class Input extends React.Component {
+export default class Input extends React.PureComponent {
   static propTypes = {
     setting: React.PropTypes.object.isRequired,
     value: React.PropTypes.any,
     onChange: React.PropTypes.func.isRequired
   };
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   render() {
     const { definition } = this.props.setting;
 
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForBoolean.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForBoolean.js
index ff566af6e3f..66f02465338 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForBoolean.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForBoolean.js
@@ -22,7 +22,7 @@ import Toggle from '../../../../components/controls/Toggle';
 import { defaultInputPropTypes } from '../../propTypes';
 import { translate } from '../../../../helpers/l10n';
 
-export default class InputForBoolean extends React.Component {
+export default class InputForBoolean extends React.PureComponent {
   static propTypes = {
     ...defaultInputPropTypes,
     value: React.PropTypes.oneOfType([React.PropTypes.bool, React.PropTypes.string])
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForNumber.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForNumber.js
index c0101776587..0d57941f0d3 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForNumber.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForNumber.js
@@ -20,8 +20,6 @@
 import React from 'react';
 import SimpleInput from './SimpleInput';
 
-export default class InputForNumber extends React.Component {
-  render() {
-    return <SimpleInput {...this.props} className="input-small" type="text" />;
-  }
+export default function InputForNumber(props) {
+  return <SimpleInput {...props} className="input-small" type="text" />;
 }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForPassword.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForPassword.js
index 0605da6d32e..9f7a35f3f4e 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForPassword.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForPassword.js
@@ -21,7 +21,7 @@ import React from 'react';
 import { translate } from '../../../../helpers/l10n';
 import { defaultInputPropTypes } from '../../propTypes';
 
-export default class InputForPassword extends React.Component {
+export default class InputForPassword extends React.PureComponent {
   static propTypes = defaultInputPropTypes;
 
   state = {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForSingleSelectList.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForSingleSelectList.js
index bfdfdd60996..06de1ca1c58 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForSingleSelectList.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForSingleSelectList.js
@@ -21,7 +21,7 @@ import React from 'react';
 import Select from 'react-select';
 import { defaultInputPropTypes } from '../../propTypes';
 
-export default class InputForSingleSelectList extends React.Component {
+export default class InputForSingleSelectList extends React.PureComponent {
   static propTypes = {
     ...defaultInputPropTypes,
     options: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForString.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForString.js
index 21083885163..e4826f07523 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForString.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForString.js
@@ -20,8 +20,6 @@
 import React from 'react';
 import SimpleInput from './SimpleInput';
 
-export default class InputForString extends React.Component {
-  render() {
-    return <SimpleInput {...this.props} className="input-large" type="text" />;
-  }
+export default function InputForString(props) {
+  return <SimpleInput {...props} className="input-large" type="text" />;
 }
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForText.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForText.js
index 3a62920746d..36c9498c0d2 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForText.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/InputForText.js
@@ -20,7 +20,7 @@
 import React from 'react';
 import { defaultInputPropTypes } from '../../propTypes';
 
-export default class InputForText extends React.Component {
+export default class InputForText extends React.PureComponent {
   static propTypes = defaultInputPropTypes;
 
   handleInputChange(e) {
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/MultiValueInput.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/MultiValueInput.js
index b2fe28e2da5..3e17e9db704 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/MultiValueInput.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/MultiValueInput.js
@@ -21,7 +21,7 @@ import React from 'react';
 import PrimitiveInput from './PrimitiveInput';
 import { getEmptyValue } from '../../utils';
 
-export default class MultiValueInput extends React.Component {
+export default class MultiValueInput extends React.PureComponent {
   static propTypes = {
     setting: React.PropTypes.object.isRequired,
     value: React.PropTypes.array,
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/PrimitiveInput.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/PrimitiveInput.js
index 35ace9d8b47..3f39350f7b6 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/PrimitiveInput.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/PrimitiveInput.js
@@ -37,7 +37,7 @@ const typeMapping = {
   [types.TYPE_FLOAT]: InputForNumber
 };
 
-export default class PrimitiveInput extends React.Component {
+export default class PrimitiveInput extends React.PureComponent {
   static propTypes = {
     setting: React.PropTypes.object.isRequired,
     value: React.PropTypes.any,
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/PropertySetInput.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/PropertySetInput.js
index 9b958b18514..0c3884b288b 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/PropertySetInput.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/PropertySetInput.js
@@ -21,7 +21,7 @@ import React from 'react';
 import PrimitiveInput from './PrimitiveInput';
 import { getEmptyValue, getUniqueName } from '../../utils';
 
-export default class PropertySetInput extends React.Component {
+export default class PropertySetInput extends React.PureComponent {
   static propTypes = {
     setting: React.PropTypes.object.isRequired,
     value: React.PropTypes.array,
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/SimpleInput.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/SimpleInput.js
index 31ec32c0360..0b0164407a3 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/SimpleInput.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/SimpleInput.js
@@ -20,7 +20,7 @@
 import React from 'react';
 import { defaultInputPropTypes } from '../../propTypes';
 
-export default class SimpleInput extends React.Component {
+export default class SimpleInput extends React.PureComponent {
   static propTypes = {
     ...defaultInputPropTypes,
     value: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),