memoize getBranches to fix reference checks of react

scm-ui/package.json

@@ -17,11 +17,12 @@
     "i18next-browser-languagedetector": "^2.2.2",
     "i18next-fetch-backend": "^0.1.0",
     "jss-nested": "^6.0.1",
+    "memoize-one": "^5.0.4",
     "moment": "^2.22.2",
     "node-sass": "^4.9.3",
     "postcss-easy-import": "^3.0.0",
-    "react": "^16.8.6",
     "query-string": "5",
+    "react": "^16.8.6",
     "react-diff-view": "^1.8.1",
     "react-dom": "^16.8.6",
     "react-i18next": "^7.9.0",

scm-ui/src/repos/branches/modules/branches.js

@@ -15,6 +15,8 @@ import type {
 import { isPending } from "../../../modules/pending";
 import { getFailure } from "../../../modules/failure";
 
+import memoizeOne from 'memoize-one';
+
 export const FETCH_BRANCHES = "scm/repos/FETCH_BRANCHES";
 export const FETCH_BRANCHES_PENDING = `${FETCH_BRANCHES}_${PENDING_SUFFIX}`;
 export const FETCH_BRANCHES_SUCCESS = `${FETCH_BRANCHES}_${SUCCESS_SUFFIX}`;
@@ -108,12 +110,18 @@ export function createBranch(
 
 // Selectors
 
+function collectBranches(repoState) {
+  return repoState.list._embedded.branches.map(
+    name => repoState.byName[name]
+  );
+}
+
+const memoizedBranchCollector = memoizeOne(collectBranches);
+
 export function getBranches(state: Object, repository: Repository) {
   const repoState = getRepoState(state, repository);
   if (repoState && repoState.list) {
-    return repoState.list._embedded.branches.map(
-      name => repoState.byName[name]
-    );
+    return memoizedBranchCollector(repoState);
   }
 }
 

scm-ui/src/repos/branches/modules/branches.test.js

@@ -348,7 +348,32 @@ describe("branches", () => {
     it("should return always the same reference for branches", () => {
       const one = getBranches(state, repository);
       const two = getBranches(state, repository);
-      expect(one).toEqual(two);
+      expect(one).toBe(two);
+    });
+
+    it("should not return cached reference, if branches have changed", () => {
+      const one = getBranches(state, repository);
+      const newState = {
+        branches: {
+          "foo/bar": {
+            list: {
+              _links: {},
+              _embedded: {
+                branches: ["branch2", "branch3"]
+              }
+            },
+            byName: {
+              branch2,
+              branch3
+            }
+          }
+        }
+      };
+      const two = getBranches(newState, repository);
+      expect(one).not.toBe(two);
+      expect(two).not.toContain(branch1);
+      expect(two).toContain(branch2);
+      expect(two).toContain(branch3);
     });
 
     it("should return undefined, if no branches for the repository available", () => {

scm-ui/yarn.lock

@@ -5669,6 +5669,10 @@ memoize-one@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.0.3.tgz#cdfdd942853f1a1b4c71c5336b8c49da0bf0273c"
 
+memoize-one@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.4.tgz#005928aced5c43d890a4dfab18ca908b0ec92cbc"
+
 memoizee@0.4.X:
   version "0.4.14"
   resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.14.tgz#07a00f204699f9a95c2d9e77218271c7cd610d57"