Performance: memoize getSoapboxConfig(), getSettings(), and getFeatures()

app/soapbox/actions/settings.js

@@ -4,6 +4,7 @@ import { patchMe } from 'soapbox/actions/me';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import { isLoggedIn } from 'soapbox/utils/auth';
 import uuid from '../uuid';
+import { createSelector } from 'reselect';
 
 export const SETTING_CHANGE = 'SETTING_CHANGE';
 export const SETTING_SAVE   = 'SETTING_SAVE';
@@ -136,12 +137,14 @@ export const defaultSettings = ImmutableMap({
   ]),
 });
 
-export function getSettings(state) {
+export const getSettings = createSelector([
-  const soapboxSettings = state.getIn(['soapbox', 'defaultSettings']);
+  state => state.getIn(['soapbox', 'defaultSettings']),
+  state => state.get('settings'),
+], (soapboxSettings, settings) => {
   return defaultSettings
     .mergeDeep(soapboxSettings)
-    .mergeDeep(state.get('settings'));
+    .mergeDeep(settings);
-}
+});
 
 export function changeSetting(path, value) {
   return dispatch => {

app/soapbox/actions/soapbox.js

@@ -1,6 +1,7 @@
 import api from '../api';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import { getFeatures } from 'soapbox/utils/features';
+import { createSelector } from 'reselect';
 
 export const SOAPBOX_CONFIG_REQUEST_SUCCESS = 'SOAPBOX_CONFIG_REQUEST_SUCCESS';
 export const SOAPBOX_CONFIG_REQUEST_FAIL    = 'SOAPBOX_CONFIG_REQUEST_FAIL';
@@ -50,20 +51,19 @@ export const defaultConfig = ImmutableMap({
   aboutPages: ImmutableMap(),
 });
 
-export function getSoapboxConfig(state) {
+export const getSoapboxConfig = createSelector([
-  const instance = state.get('instance');
+  state => state.get('soapbox'),
-  const soapbox = state.get('soapbox');
+  state => getFeatures(state.get('instance')).emojiReactsRGI,
-  const features = getFeatures(instance);
+], (soapbox, emojiReactsRGI) => {
-
   // https://git.pleroma.social/pleroma/pleroma/-/issues/2355
-  if (features.emojiReactsRGI) {
+  if (emojiReactsRGI) {
     return defaultConfig
       .set('allowedEmoji', allowedEmojiRGI)
       .merge(soapbox);
   } else {
     return defaultConfig.merge(soapbox);
   }
-}
+});
 
 export function fetchSoapboxConfig() {
   return (dispatch, getState) => {

app/soapbox/utils/features.js

@@ -1,10 +1,12 @@
 // Detect backend features to conditionally render elements
 import gte from 'semver/functions/gte';
 import { List as ImmutableList } from 'immutable';
+import { createSelector } from 'reselect';
 
-export const getFeatures = instance => {
+export const getFeatures = createSelector([
-  const v = parseVersion(instance.get('version'));
+  instance => parseVersion(instance.get('version')),
-  const f = instance.getIn(['pleroma', 'metadata', 'features'], ImmutableList());
+  instance => instance.getIn(['pleroma', 'metadata', 'features'], ImmutableList()),
+], (v, f) => {
   return {
     suggestions: v.software === 'Mastodon' && gte(v.compatVersion, '2.4.3'),
     trends: v.software === 'Mastodon' && gte(v.compatVersion, '3.0.0'),
@@ -15,7 +17,7 @@ export const getFeatures = instance => {
     importMutes: v.software === 'Pleroma' && gte(v.version, '2.2.0'),
     emailList: f.includes('email_list'),
   };
-};
+});
 
 export const parseVersion = version => {
   let regex = /^([\w\.]*)(?: \(compatible; ([\w]*) (.*)\))?$/;