fix(react-jss): keep classes ref when sheet and dynamicRules have not…

… change
cssinjs · Oct 26, 2021 · 420c62a · 420c62a
1 parent e693eca
commit 420c62a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 17 deletions.
diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json
@@ -1,30 +1,30 @@
 {
   "react-jss.js": {
-    "bundled": 135303,
-    "minified": 49865,
-    "gzipped": 16671
+    "bundled": 135297,
+    "minified": 49904,
+    "gzipped": 16683
   },
   "react-jss.min.js": {
-    "bundled": 102253,
-    "minified": 39724,
-    "gzipped": 13794
+    "bundled": 102247,
+    "minified": 39763,
+    "gzipped": 13797
   },
   "react-jss.cjs.js": {
-    "bundled": 21449,
-    "minified": 9456,
-    "gzipped": 3166
+    "bundled": 21443,
+    "minified": 9467,
+    "gzipped": 3169
   },
   "react-jss.esm.js": {
-    "bundled": 19537,
-    "minified": 7962,
-    "gzipped": 2950,
+    "bundled": 19531,
+    "minified": 7973,
+    "gzipped": 2952,
     "treeshaked": {
       "rollup": {
         "code": 426,
         "import_statements": 368
       },
       "webpack": {
-        "code": 1945
+        "code": 2408
       }
     }
   }

diff --git a/packages/react-jss/src/createUseStyles.test.js b/packages/react-jss/src/createUseStyles.test.js
@@ -2,28 +2,39 @@
 
 import * as React from 'react'
 import {renderToString} from 'react-dom/server'
+import TestRenderer from 'react-test-renderer'
 import expect from 'expect.js'
 import {stripIndent} from 'common-tags'
 import createCommonBaseTests from '../test-utils/createCommonBaseTests'
 import {createUseStyles, JssProvider, SheetsRegistry} from '.'
 
 const createStyledComponent = (styles, options) => {
   const useStyles = createUseStyles(styles, options)
-  const Comp = (props) => {
+  const Comp = props => {
     useStyles(props)
     return null
   }
   return Comp
 }
 
+const createUnStyledComponent = () => {
+  const useStyles = createUseStyles()
+  const Comp = ({getClasses}) => {
+    const classes = useStyles()
+    getClasses(classes)
+    return null
+  }
+  return Comp
+}
+
 describe('React-JSS: createUseStyles', () => {
   createCommonBaseTests({createStyledComponent})
 
   describe('theme prop', () => {
     it('should pass theme from props priority', () => {
       const registry = new SheetsRegistry()
 
-      const styles = (theme) => ({
+      const styles = theme => ({
         button: {color: theme.exampleColor || 'green'}
       })
 
@@ -41,4 +52,32 @@ describe('React-JSS: createUseStyles', () => {
     `)
     })
   })
+
+  describe('undesirable re-render', () => {
+    it("should return keep previous classes when sheet and dynamicRules haven't change", () => {
+      const MyComponent = createUnStyledComponent()
+
+      let firstRenderClasses
+      let secondRenderClasses
+
+      const getClasses = classes => {
+        if (firstRenderClasses) {
+          secondRenderClasses = classes
+        } else {
+          firstRenderClasses = classes
+        }
+      }
+
+      let root
+      TestRenderer.act(() => {
+        root = TestRenderer.create(<MyComponent getClasses={getClasses} />)
+      })
+
+      TestRenderer.act(() => {
+        root.update(<MyComponent getClasses={getClasses} />)
+      })
+
+      expect(firstRenderClasses).to.be(secondRenderClasses)
+    })
+  })
 })
diff --git a/packages/react-jss/src/utils/getSheetClasses.js b/packages/react-jss/src/utils/getSheetClasses.js
@@ -1,6 +1,7 @@
 import {getMeta} from './sheetsMeta'
+import memoize from './memoizeOne'
 
-const getSheetClasses = (sheet, dynamicRules) => {
+const getSheetClasses = memoize((sheet, dynamicRules) => {
   if (!dynamicRules) {
     return sheet.classes
   }
@@ -21,6 +22,6 @@ const getSheetClasses = (sheet, dynamicRules) => {
   }
 
   return classes
-}
+})
 
 export default getSheetClasses