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