fix(createUseStyles): move memoize getSheetClasses to createUseStyles

Author: behnammodi

packages/react-jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "react-jss.js": {
-    "bundled": 135317,
-    "minified": 49867,
-    "gzipped": 16666
+    "bundled": 135385,
+    "minified": 49908,
+    "gzipped": 16677
   },
   "react-jss.min.js": {
-    "bundled": 102267,
-    "minified": 39726,
-    "gzipped": 13789
+    "bundled": 102335,
+    "minified": 39767,
+    "gzipped": 13792
   },
   "react-jss.cjs.js": {
-    "bundled": 21443,
-    "minified": 9467,
-    "gzipped": 3169
+    "bundled": 21515,
+    "minified": 9469,
+    "gzipped": 3171
   },
   "react-jss.esm.js": {
-    "bundled": 19531,
-    "minified": 7973,
-    "gzipped": 2952,
+    "bundled": 19603,
+    "minified": 7975,
+    "gzipped": 2954,
     "treeshaked": {
       "rollup": {
         "code": 426,
         "import_statements": 368
       },
       "webpack": {
-        "code": 2408
+        "code": 1945
       }
     }
   }

packages/react-jss/src/createUseStyles.js

@@ -12,6 +12,7 @@ import {
 import getSheetIndex from './utils/getSheetIndex'
 import {manageSheet, unmanageSheet} from './utils/managers'
 import getSheetClasses from './utils/getSheetClasses'
+import memoize from './utils/memoizeOne'
 
 const useEffectOrLayoutEffect = isInBrowser ? React.useLayoutEffect : React.useEffect
 
@@ -21,49 +22,57 @@ const createUseStyles = (styles, options = {}) => {
   const {index = getSheetIndex(), theming, name, ...sheetOptions} = options
   const ThemeContext = (theming && theming.context) || DefaultThemeContext
 
-  const useTheme = (theme) => {
+  const useTheme = theme => {
     if (typeof styles === 'function') {
       return theme || React.useContext(ThemeContext) || noTheme
     }
 
     return noTheme
   }
 
+  const memoizedGetSheetClasses = memoize(getSheetClasses)
+
   return function useStyles(data) {
     const isFirstMount = React.useRef(true)
     const context = React.useContext(JssContext)
     const theme = useTheme(data && data.theme)
 
-    const [sheet, dynamicRules] = React.useMemo(() => {
-      const newSheet = createStyleSheet({
-        context,
-        styles,
-        name,
-        theme,
-        index,
-        sheetOptions
-      })
-
-      const newDynamicRules = newSheet ? addDynamicRules(newSheet, data) : null
-
-      if (newSheet) {
-        manageSheet({
-          index,
+    const [sheet, dynamicRules] = React.useMemo(
+      () => {
+        const newSheet = createStyleSheet({
           context,
-          sheet: newSheet,
-          theme
+          styles,
+          name,
+          theme,
+          index,
+          sheetOptions
         })
-      }
 
-      return [newSheet, newDynamicRules]
-    }, [context, theme])
+        const newDynamicRules = newSheet ? addDynamicRules(newSheet, data) : null
 
-    useEffectOrLayoutEffect(() => {
-      // We only need to update the rules on a subsequent update and not in the first mount
-      if (sheet && dynamicRules && !isFirstMount.current) {
-        updateDynamicRules(data, sheet, dynamicRules)
-      }
-    }, [data])
+        if (newSheet) {
+          manageSheet({
+            index,
+            context,
+            sheet: newSheet,
+            theme
+          })
+        }
+
+        return [newSheet, newDynamicRules]
+      },
+      [context, theme]
+    )
+
+    useEffectOrLayoutEffect(
+      () => {
+        // We only need to update the rules on a subsequent update and not in the first mount
+        if (sheet && dynamicRules && !isFirstMount.current) {
+          updateDynamicRules(data, sheet, dynamicRules)
+        }
+      },
+      [data]
+    )
 
     useEffectOrLayoutEffect(
       () =>
@@ -85,7 +94,7 @@ const createUseStyles = (styles, options = {}) => {
       [sheet]
     )
 
-    const classes = sheet && dynamicRules ? getSheetClasses(sheet, dynamicRules) : {}
+    const classes = sheet && dynamicRules ? memoizedGetSheetClasses(sheet, dynamicRules) : {}
 
     React.useDebugValue(classes)
 

packages/react-jss/src/utils/getSheetClasses.js

@@ -1,7 +1,6 @@
 import {getMeta} from './sheetsMeta'
-import memoize from './memoizeOne'
 
-const getSheetClasses = memoize((sheet, dynamicRules) => {
+const getSheetClasses = (sheet, dynamicRules) => {
   if (!dynamicRules) {
     return sheet.classes
   }
@@ -22,6 +21,6 @@ const getSheetClasses = memoize((sheet, dynamicRules) => {
   }
 
   return classes
-})
+}
 
 export default getSheetClasses