Memoize ancestorIds and descendantIds in detailed status view (#11234)

app/javascript/mastodon/features/status/index.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { createSelector } from 'reselect';
 import { fetchStatus } from '../../actions/statuses';
 import MissingIndicator from '../../components/missing_indicator';
 import DetailedStatus from './components/detailed_status';
@@ -63,29 +64,36 @@ const messages = defineMessages({
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
 
-  const mapStateToProps = (state, props) => {
+  const getAncestorsIds = createSelector([
-    const status = getStatus(state, { id: props.params.statusId });
+    (_, { id }) => id,
+    state => state.getIn(['contexts', 'inReplyTos']),
+  ], (statusId, inReplyTos) => {
     let ancestorsIds = Immutable.List();
-    let descendantsIds = Immutable.List();
-
-    if (status) {
     ancestorsIds = ancestorsIds.withMutations(mutable => {
-        let id = status.get('in_reply_to_id');
+      let id = statusId;
 
       while (id) {
         mutable.unshift(id);
-          id = state.getIn(['contexts', 'inReplyTos', id]);
+        id = inReplyTos.get(id);
       }
     });
 
+    return ancestorsIds;
+  });
+
+  const getDescendantsIds = createSelector([
+    (_, { id }) => id,
+    state => state.getIn(['contexts', 'replies']),
+  ], (statusId, contextReplies) => {
+    let descendantsIds = Immutable.List();
     descendantsIds = descendantsIds.withMutations(mutable => {
-        const ids = [status.get('id')];
+      const ids = [statusId];
 
       while (ids.length > 0) {
         let id        = ids.shift();
-          const replies = state.getIn(['contexts', 'replies', id]);
+        const replies = contextReplies.get(id);
 
-          if (status.get('id') !== id) {
+        if (statusId !== id) {
           mutable.push(id);
         }
 
@@ -96,6 +104,18 @@ const makeMapStateToProps = () => {
         }
       }
     });
+
+    return descendantsIds;
+  });
+
+  const mapStateToProps = (state, props) => {
+    const status = getStatus(state, { id: props.params.statusId });
+    let ancestorsIds = Immutable.List();
+    let descendantsIds = Immutable.List();
+
+    if (status) {
+      ancestorsIds = getAncestorsIds(state, { id: status.get('in_reply_to_id') });
+      descendantsIds = getDescendantsIds(state, { id: status.get('id') });
     }
 
     return {