diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json
index e80c5bfdb..7d57737b5 100644
--- 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
index f09f15d8a..fee5219fd 100644
--- a/packages/react-jss/src/createUseStyles.test.js
+++ b/packages/react-jss/src/createUseStyles.test.js
@@ -2,6 +2,7 @@
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'
@@ -9,13 +10,23 @@ 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})
@@ -23,7 +34,7 @@ describe('React-JSS: createUseStyles', () => {
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()
+ })
+
+ TestRenderer.act(() => {
+ root.update()
+ })
+
+ expect(firstRenderClasses).to.be(secondRenderClasses)
+ })
+ })
})
diff --git a/packages/react-jss/src/utils/getSheetClasses.js b/packages/react-jss/src/utils/getSheetClasses.js
index 85668d4fe..d183a38a8 100644
--- 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