fix(useStyles): manage sheet on create and then add dynamic styles (#…

…1608) * immediate manage * makes more sense * size snapshot * separate usememo was not necessary, addDynamicRules had simply to be called after manageSheet
cssinjs · Apr 16, 2022 · ea0c20d · ea0c20d
1 parent 3a7ddc3
commit ea0c20d
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 40 deletions.
diff --git a/packages/react-jss/.size-snapshot.json b/packages/react-jss/.size-snapshot.json
@@ -1,23 +1,23 @@
 {
   "react-jss.js": {
-    "bundled": 77728,
-    "minified": 28993,
-    "gzipped": 10122
+    "bundled": 136053,
+    "minified": 50140,
+    "gzipped": 16739
   },
   "react-jss.min.js": {
-    "bundled": 45475,
-    "minified": 19337,
-    "gzipped": 7396
+    "bundled": 103003,
+    "minified": 39999,
+    "gzipped": 13855
   },
   "react-jss.cjs.js": {
-    "bundled": 21488,
-    "minified": 9523,
-    "gzipped": 3163
+    "bundled": 21581,
+    "minified": 9508,
+    "gzipped": 3183
   },
   "react-jss.esm.js": {
-    "bundled": 19604,
-    "minified": 8056,
-    "gzipped": 2958,
+    "bundled": 19703,
+    "minified": 8047,
+    "gzipped": 2975,
     "treeshaked": {
       "rollup": {
         "code": 426,

diff --git a/packages/react-jss/src/createUseStyles.js b/packages/react-jss/src/createUseStyles.js
@@ -39,30 +39,37 @@ const createUseStyles = (styles, options = {}) => {
     const context = React.useContext(JssContext)
     const theme = useTheme(data && data.theme)
 
-    const sheet = React.useMemo(
-      () =>
-        createStyleSheet({
-          context,
-          styles,
-          name,
-          theme,
+    const [sheet, dynamicRules] = React.useMemo(() => {
+      const newSheet = createStyleSheet({
+        context,
+        styles,
+        name,
+        theme,
+        index,
+        sheetOptions
+      })
+
+      if (newSheet) {
+        manageSheet({
           index,
-          sheetOptions
-        }),
-      [context, theme]
-    )
+          context,
+          sheet: newSheet,
+          theme
+        })
+      }
 
-    const dynamicRules = React.useMemo(() => (sheet ? addDynamicRules(sheet, data) : null), [sheet])
+      return [newSheet, newSheet ? addDynamicRules(newSheet, data) : null]
+    }, [context, theme])
 
     useInsertionEffect(() => {
-      manageSheet({
-        index,
-        context,
-        sheet,
-        theme
-      })
+      // 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])
 
-      return () => {
+    useInsertionEffect(
+      () => () => {
         if (sheet) {
           unmanageSheet({
             index,
@@ -76,15 +83,9 @@ const createUseStyles = (styles, options = {}) => {
             removeDynamicRules(sheet, dynamicRules)
           }
         }
-      }
-    }, [sheet])
-
-    useInsertionEffect(() => {
-      // 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])
+      },
+      [sheet]
+    )
 
     const classes = React.useMemo(
       () => (sheet && dynamicRules ? getSheetClasses(sheet, dynamicRules) : emptyObject),