diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json
index 29cd70279..d03f7485f 100644
--- 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
index 874c67fe6..ef8cfb203 100644
--- 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
index c1ea2ad64..dbf32f430 100644
--- 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()
+ })
+
+ TestRenderer.act(() => {
+ root.update()
+ })
+
+ expect(classes[0]).to.be(classes[1])
+ })
+ })
})