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,20 +46,32 @@ 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(
-  const getAccount = makeGetAccount();
+    [(accounts, authUsers, me) => {
-  const soapbox = getSoapboxConfig(state);
+      return authUsers
-
-  const otherAccounts =
-    state
-      .getIn(['auth', 'users'])
         .keySeq()
         .reduce((list, id) => {
           if (id === me) return list;
-        const account = state.getIn(['accounts', id]);
+          const account = accounts.get(id);
           return account ? list.push(account) : list;
         }, ImmutableList());
+    }],
+    otherAccounts => otherAccounts,
+  );
+};
+
+const makeMapStateToProps = () => {
+  const getAccount = makeGetAccount();
+  const getOtherAccounts = makeGetOtherAccounts();
+
+  const mapStateToProps = state => {
+    const me = state.get('me');
+    const soapbox = getSoapboxConfig(state);
+
+    const accounts = state.get('accounts');
+    const authUsers = state.getIn(['auth', 'users']);
+    const otherAccounts = getOtherAccounts(accounts, authUsers, me);
 
     return {
       account: getAccount(state, me),
@@ -68,6 +81,9 @@ const mapStateToProps = state => {
       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 {