reporter: Cache aliasesWithDuplicates to prevent unnecessary re… (#4552)

* reporter: cache aliasesWithDuplicates to prevent unnecessary re-renders

* add link to issue on test

packages/reporter/src/hooks/hook-model.js

@@ -6,6 +6,8 @@ export default class Hook {
   @observable name
   @observable commands = []
   @observable failed = false
+
+  _aliasesWithDuplicatesCache = null
   _currentNumber = 1
 
   constructor (props) {
@@ -32,7 +34,16 @@ export default class Hook {
       return aliases.indexOf(alias) === i && aliases.lastIndexOf(alias) !== i
     })
 
-    return consecutiveDuplicateAliases.concat(nonConsecutiveDuplicateAliases)
+    const aliasesWithDuplicates = consecutiveDuplicateAliases.concat(nonConsecutiveDuplicateAliases)
+
+    // do a deep compare here to see if we can use the cached aliases, which will allow mobx's
+    // @computed identity comparison to pass, preventing unnecessary re-renders
+    // https://github.com/cypress-io/cypress/issues/4411
+    if (!_.isEqual(aliasesWithDuplicates, this._aliasesWithDuplicatesCache)) {
+      this._aliasesWithDuplicatesCache = aliasesWithDuplicates
+    }
+
+    return this._aliasesWithDuplicatesCache
   }
 
   addCommand (command) {

packages/reporter/src/hooks/hook-model.spec.js

@@ -109,23 +109,43 @@ describe('Hook model', () => {
   })
 
   context('#aliasesWithDuplicates', () => {
+    const addCommand = (alias, hasDuplicates = false) => {
+      return hook.addCommand({
+        isMatchingEvent: () => {
+          return false
+        },
+        alias,
+        hasDuplicates,
+      })
+    }
+
     it('returns duplicates marked with hasDuplicates and those that appear mulitple times in the commands array', () => {
-      hook.addCommand({ isMatchingEvent: () => {
-        return false
-      }, alias: 'foo' })
-      hook.addCommand({ isMatchingEvent: () => {
-        return false
-      }, alias: 'bar' })
-      hook.addCommand({ isMatchingEvent: () => {
-        return false
-      }, alias: 'foo' })
-      hook.addCommand({ isMatchingEvent: () => {
-        return false
-      }, alias: 'baz', hasDuplicates: true })
+      addCommand('foo')
+      addCommand('bar')
+      addCommand('foo')
+      addCommand('baz', true)
 
       expect(hook.aliasesWithDuplicates).to.include('foo')
       expect(hook.aliasesWithDuplicates).to.include('baz')
       expect(hook.aliasesWithDuplicates).to.not.include('bar')
     })
+
+    // https://github.com/cypress-io/cypress/issues/4411
+    it('returns the same array instance if it has not changed', () => {
+      let dupes = hook.aliasesWithDuplicates
+
+      addCommand('foo')
+      expect(dupes).to.deep.eq([])
+
+      addCommand('bar')
+      expect(hook.aliasesWithDuplicates === dupes).to.be.true
+
+      addCommand('foo')
+      dupes = hook.aliasesWithDuplicates
+      expect(dupes).to.deep.eq(['foo'])
+
+      addCommand('foo')
+      expect(hook.aliasesWithDuplicates === dupes).to.be.true
+    })
   })
 })