Avoid useless renders (#3141)

* feat(eslint): Set react/jsx-no-bind: error

* refactor(notifications/setting_toggle): Do not use bind

* refactor(components/dropdown_menu): Do not use bind

* refactor(components/autosuggest_textarea): Do not use bind

* refactor(compose/privacy_dropdown): Do not use bind

* refactor(compose/upload_form): Do not use bind

* refactor(components/status): Do not use bind

* refactor(components/onboarding_modal): Do not use bind

* refactor: PR feedback

* chore(notifications/setting_toggle): Lint

* refactor: PR feedback

1 files changed, 25 insertions, 13 deletions

diff --git a/app/javascript/mastodon/features/notifications/components/setting_toggle.js b/app/javascript/mastodon/features/notifications/components/setting_toggle.js
index 080804a40..804049531 100644
--- a/app/javascript/mastodon/features/notifications/components/setting_toggle.js
+++ b/app/javascript/mastodon/features/notifications/components/setting_toggle.js
@@ -3,19 +3,31 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Toggle from 'react-toggle';
 
-const SettingToggle = ({ settings, settingKey, label, onChange, htmlFor = '' }) => (
-  <label htmlFor={htmlFor} className='setting-toggle__label'>
-    <Toggle checked={settings.getIn(settingKey)} onChange={(e) => onChange(settingKey, e.target.checked)} />
-    <span className='setting-toggle'>{label}</span>
-  </label>
-);
+class SettingToggle extends React.PureComponent {
 
-SettingToggle.propTypes = {
-  settings: ImmutablePropTypes.map.isRequired,
-  settingKey: PropTypes.array.isRequired,
-  label: PropTypes.node.isRequired,
-  onChange: PropTypes.func.isRequired,
-  htmlFor: PropTypes.string
-};
+  static propTypes = {
+    settings: ImmutablePropTypes.map.isRequired,
+    settingKey: PropTypes.array.isRequired,
+    label: PropTypes.node.isRequired,
+    onChange: PropTypes.func.isRequired,
+    htmlFor: PropTypes.string
+  }
+
+  onChange = (e) => {
+    this.props.onChange(this.props.settingKey, e.target.checked);
+  }
+
+  render () {
+    const { settings, settingKey, label, onChange, htmlFor = '' } = this.props;
+
+    return (
+      <label htmlFor={htmlFor} className='setting-toggle__label'>
+        <Toggle checked={settings.getIn(settingKey)} onChange={this.onChange} />
+        <span className='setting-toggle'>{label}</span>
+      </label>
+    );
+  }
+
+}
 
 export default SettingToggle;