Improving performance of posting a comment by reducing memory + CPU

app/assets/javascripts/lib/utils/poll.js

@@ -38,7 +38,7 @@ import { normalizeHeaders } from './common_utils';
  *  } else {
  *   poll.stop();
  *  }
-* });
+ * });
  *
  * 1. Checks for response and headers before start polling
  * 2. Interval is provided by `Poll-Interval` header.
@@ -51,8 +51,8 @@ export default class Poll {
   constructor(options = {}) {
     this.options = options;
     this.options.data = options.data || {};
-    this.options.notificationCallback = options.notificationCallback ||
-      function notificationCallback() {};
+    this.options.notificationCallback =
+      options.notificationCallback || function notificationCallback() {};
 
     this.intervalHeader = 'POLL-INTERVAL';
     this.timeoutID = null;
@@ -63,6 +63,7 @@ export default class Poll {
     const headers = normalizeHeaders(response.headers);
     const pollInterval = parseInt(headers[this.intervalHeader], 10);
     if (pollInterval > 0 && response.status === httpStatusCodes.OK && this.canPoll) {
+      clearTimeout(this.timeoutID);
       this.timeoutID = setTimeout(() => {
         this.makeRequest();
       }, pollInterval);
@@ -77,11 +78,11 @@ export default class Poll {
     notificationCallback(true);
 
     return resource[method](data)
-      .then((response) => {
+      .then(response => {
         this.checkConditions(response);
         notificationCallback(false);
       })
-      .catch((error) => {
+      .catch(error => {
         notificationCallback(false);
         if (error.status === httpStatusCodes.ABORTED) {
           return;

app/assets/javascripts/notes/stores/mutations.js

@@ -174,27 +174,19 @@ export default {
 
   [types.UPDATE_NOTE](state, note) {
     const noteObj = utils.findNoteObjectById(state.discussions, note.discussion_id);
-
     if (noteObj.individual_note) {
       noteObj.notes.splice(0, 1, note);
     } else {
       const comment = utils.findNoteObjectById(noteObj.notes, note.id);
-      noteObj.notes.splice(noteObj.notes.indexOf(comment), 1, note);
+      Object.assign(comment, note);
     }
   },
 
   [types.UPDATE_DISCUSSION](state, noteData) {
     const note = noteData;
-    let index = 0;
-
-    state.discussions.forEach((n, i) => {
-      if (n.id === note.id) {
-        index = i;
-      }
-    });
-
+    const selectedDiscussion = state.discussions.find(n => n.id === note.id);
     note.expanded = true; // override expand flag to prevent collapse
-    state.discussions.splice(index, 1, note);
+    Object.assign(selectedDiscussion, note);
   },
 
   [types.CLOSE_ISSUE](state) {
@@ -215,12 +207,9 @@ export default {
 
   [types.SET_DISCUSSION_DIFF_LINES](state, { discussionId, diffLines }) {
     const discussion = utils.findNoteObjectById(state.discussions, discussionId);
-    const index = state.discussions.indexOf(discussion);
 
-    const discussionWithDiffLines = Object.assign({}, discussion, {
+    Object.assign(discussion, {
       truncated_diff_lines: diffLines,
     });
-
-    state.discussions.splice(index, 1, discussionWithDiffLines);
   },
 };

app/assets/javascripts/notes/stores/utils.js

@@ -2,13 +2,11 @@ import AjaxCache from '~/lib/utils/ajax_cache';
 
 const REGEX_QUICK_ACTIONS = /^\/\w+.*$/gm;
 
-export const findNoteObjectById = (notes, id) =>
-  notes.filter(n => n.id === id)[0];
+export const findNoteObjectById = (notes, id) => notes.find(n => n.id === id);
 
 export const getQuickActionText = note => {
   let text = 'Applying command';
-  const quickActions =
-    AjaxCache.get(gl.GfmAutoComplete.dataSources.commands) || [];
+  const quickActions = AjaxCache.get(gl.GfmAutoComplete.dataSources.commands) || [];
 
   const executedCommands = quickActions.filter(command => {
     const commandRegex = new RegExp(`/${command.name}`);
@@ -29,5 +27,4 @@ export const getQuickActionText = note => {
 
 export const hasQuickActions = note => REGEX_QUICK_ACTIONS.test(note);
 
-export const stripQuickActions = note =>
-  note.replace(REGEX_QUICK_ACTIONS, '').trim();
+export const stripQuickActions = note => note.replace(REGEX_QUICK_ACTIONS, '').trim();

changelogs/unreleased/tz-mr-refactor-memory-reduction.yml

----
-title: Reduces the client side memory footprint on merge requests
-merge_request: 20744
-author:
-type: performance
+---
+title: Reduces the client side memory footprint on merge requests
+merge_request: 20744
+author:
+type: performance