ProfileDropdown: memoize otherAccounts for performance

app/soapbox/components/sidebar_menu.js

@@ -13,13 +13,12 @@ import Icon from './icon';
 import DisplayName from './display_name';
 import { closeSidebar } from '../actions/sidebar';
 import { isStaff } from '../utils/accounts';
-import { makeGetAccount } from '../selectors';
+import { makeGetAccount, makeGetOtherAccounts } from '../selectors';
 import { logOut, switchAccount } from 'soapbox/actions/auth';
 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 { is as ImmutableIs } from 'immutable';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import { createSelector } from 'reselect';
 
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
@@ -46,21 +45,6 @@ const messages = defineMessages({
   add_account: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
 });
 
-const makeGetOtherAccounts = () => {
-  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 getOtherAccounts = makeGetOtherAccounts();

app/soapbox/features/ui/components/profile_dropdown.js

@@ -8,33 +8,34 @@ import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 import { isStaff } from 'soapbox/utils/accounts';
 import { defineMessages, injectIntl } from 'react-intl';
 import { logOut, switchAccount } from 'soapbox/actions/auth';
-import { List as ImmutableList, is as ImmutableIs } from 'immutable';
+import { is as ImmutableIs } from 'immutable';
 import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display_name';
+import { makeGetOtherAccounts } from 'soapbox/selectors';
 
 const messages = defineMessages({
   add: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
   logout: { id: 'profile_dropdown.logout', defaultMessage: 'Log out @{acct}' },
 });
 
-const mapStateToProps = state => {
+const makeMapStateToProps = () => {
-  const me = state.get('me');
+  const getOtherAccounts = makeGetOtherAccounts();
-
+
-  const otherAccounts =
+  const mapStateToProps = state => {
-    state
+    const me = state.get('me');
-      .getIn(['auth', 'users'])
+
-      .keySeq()
+    const accounts = state.get('accounts');
-      .reduce((list, id) => {
+    const authUsers = state.getIn(['auth', 'users']);
-        if (id === me) return list;
+    const otherAccounts = getOtherAccounts(accounts, authUsers, me);
-        const account = state.getIn(['accounts', id]);
+
-        return account ? list.push(account) : list;
+    return {
-      }, ImmutableList());
+      account: state.getIn(['accounts', me]),
-
+      otherAccounts,
-  return {
+      isStaff: isStaff(state.getIn(['accounts', me])),
-    account: state.getIn(['accounts', me]),
+    };
-    otherAccounts,
-    isStaff: isStaff(state.getIn(['accounts', me])),
   };
+
+  return mapStateToProps;
 };
 
 class ProfileDropdown extends React.PureComponent {
@@ -130,4 +131,4 @@ class ProfileDropdown extends React.PureComponent {
 
 }
 
-export default injectIntl(connect(mapStateToProps)(ProfileDropdown));
+export default injectIntl(connect(makeMapStateToProps)(ProfileDropdown));

app/soapbox/selectors/index.js

@@ -195,3 +195,18 @@ export const makeGetReport = () => {
     },
   );
 };
+
+export const makeGetOtherAccounts = () => {
+  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,
+  );
+};