Keep classes ref when sheet and dynamicRules have not any change (#1573)

* fix(react-jss): keep classes ref when sheet and dynamicRules have not change * test(createUseStyles): fix typo * fix(createUseStyles): move memoize getSheetClasses to createUseStyles * test(createUseStyles): remove redundant component * fix(createUseStyles): memoize classes by useMemo
cssinjs · Nov 12, 2021 · fc379ea · fc379ea
1 parent 9fba2bf
commit fc379ea
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 13 deletions.
diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json
@@ -1,23 +1,23 @@
 {
   "react-jss.js": {
-    "bundled": 135352,
-    "minified": 49871,
-    "gzipped": 16668
+    "bundled": 124531,
+    "minified": 45499,
+    "gzipped": 15737
   },
   "react-jss.min.js": {
-    "bundled": 102302,
-    "minified": 39730,
-    "gzipped": 13788
+    "bundled": 97767,
+    "minified": 37402,
+    "gzipped": 13296
   },
   "react-jss.cjs.js": {
-    "bundled": 21482,
-    "minified": 9460,
-    "gzipped": 3168
+    "bundled": 21554,
+    "minified": 9502,
+    "gzipped": 3177
   },
   "react-jss.esm.js": {
-    "bundled": 19570,
-    "minified": 7966,
-    "gzipped": 2952,
+    "bundled": 19636,
+    "minified": 8002,
+    "gzipped": 2959,
     "treeshaked": {
       "rollup": {
         "code": 426,

diff --git a/packages/react-jss/src/createUseStyles.js b/packages/react-jss/src/createUseStyles.js
@@ -87,7 +87,10 @@ const createUseStyles = (styles, options = {}) => {
       [sheet]
     )
 
-    const classes = sheet && dynamicRules ? getSheetClasses(sheet, dynamicRules) : emptyObject
+    const classes = React.useMemo(
+      () => (sheet && dynamicRules ? getSheetClasses(sheet, dynamicRules) : emptyObject),
+      [sheet, dynamicRules]
+    )
 
     React.useDebugValue(classes)
 

diff --git a/packages/react-jss/src/createUseStyles.test.js b/packages/react-jss/src/createUseStyles.test.js
@@ -212,4 +212,27 @@ describe('React-JSS: createUseStyles', () => {
       expect(classes[0]).to.be(classes[1])
     })
   })
+
+  describe('undesirable re-render', () => {
+    it("should return previous classes when sheet and dynamicRules haven't change", () => {
+      const MyComponent = createStyledComponent()
+
+      const classes = []
+
+      const getClasses = currentClasses => {
+        classes.push(currentClasses)
+      }
+
+      let root
+      TestRenderer.act(() => {
+        root = TestRenderer.create(<MyComponent getClasses={getClasses} />)
+      })
+
+      TestRenderer.act(() => {
+        root.update(<MyComponent getClasses={getClasses} />)
+      })
+
+      expect(classes[0]).to.be(classes[1])
+    })
+  })
 })