SidebarMenu: memoize otherAccounts for performance

app/soapbox/components/sidebar_menu.js

@@ -19,6 +19,7 @@ import ThemeToggle from '../features/ui/components/theme_toggle_container';
 import { fetchOwnAccounts } from 'soapbox/actions/auth';
 import { List as ImmutableList, is as ImmutableIs } from 'immutable';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import { createSelector } from 'reselect';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -45,29 +46,44 @@ const messages = defineMessages({
   add_account: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
 });
 
-const mapStateToProps = state => {
+const makeGetOtherAccounts = () => {
-  const me = state.get('me');
+  return createSelector(
+    [(accounts, authUsers, me) => {
+      return authUsers
+        .keySeq()
+        .reduce((list, id) => {
+          if (id === me) return list;
+          const account = accounts.get(id);
+          return account ? list.push(account) : list;
+        }, ImmutableList());
+    }],
+    otherAccounts => otherAccounts,
+  );
+};
+
+const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
-  const soapbox = getSoapboxConfig(state);
+  const getOtherAccounts = makeGetOtherAccounts();
 
-  const otherAccounts =
+  const mapStateToProps = state => {
-    state
+    const me = state.get('me');
-      .getIn(['auth', 'users'])
+    const soapbox = getSoapboxConfig(state);
-      .keySeq()
-      .reduce((list, id) => {
-        if (id === me) return list;
-        const account = state.getIn(['accounts', id]);
-        return account ? list.push(account) : list;
-      }, ImmutableList());
 
-  return {
+    const accounts = state.get('accounts');
-    account: getAccount(state, me),
+    const authUsers = state.getIn(['auth', 'users']);
-    sidebarOpen: state.get('sidebar').sidebarOpen,
+    const otherAccounts = getOtherAccounts(accounts, authUsers, me);
-    donateUrl: state.getIn(['patron', 'instance', 'url']),
+
-    hasCrypto: typeof soapbox.getIn(['cryptoAddresses', 0, 'ticker']) === 'string',
+    return {
-    isStaff: isStaff(state.getIn(['accounts', me])),
+      account: getAccount(state, me),
-    otherAccounts,
+      sidebarOpen: state.get('sidebar').sidebarOpen,
+      donateUrl: state.getIn(['patron', 'instance', 'url']),
+      hasCrypto: typeof soapbox.getIn(['cryptoAddresses', 0, 'ticker']) === 'string',
+      isStaff: isStaff(state.getIn(['accounts', me])),
+      otherAccounts,
+    };
   };
+
+  return mapStateToProps;
 };
 
 const mapDispatchToProps = (dispatch, { intl }) => ({
@@ -86,7 +102,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 });
 
-export default @connect(mapStateToProps, mapDispatchToProps)
+export default @connect(makeMapStateToProps, mapDispatchToProps)
 @injectIntl
 class SidebarMenu extends ImmutablePureComponent {