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]) + }) + }) })