fix: #1597 split useEffect

Author: cqh963852

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

@@ -1,23 +1,23 @@
 {
   "react-jss.js": {
-    "bundled": 136030,
-    "minified": 50117,
-    "gzipped": 16723
+    "bundled": 136158,
+    "minified": 50189,
+    "gzipped": 16746
   },
   "react-jss.min.js": {
-    "bundled": 102980,
-    "minified": 39976,
-    "gzipped": 13837
+    "bundled": 103108,
+    "minified": 40048,
+    "gzipped": 13863
   },
   "react-jss.cjs.js": {
-    "bundled": 21554,
-    "minified": 9502,
-    "gzipped": 3177
+    "bundled": 21680,
+    "minified": 9599,
+    "gzipped": 3203
   },
   "react-jss.esm.js": {
-    "bundled": 19636,
-    "minified": 8002,
-    "gzipped": 2959,
+    "bundled": 19766,
+    "minified": 8102,
+    "gzipped": 2987,
     "treeshaked": {
       "rollup": {
         "code": 426,

packages/react-jss/src/createUseStyles.js

@@ -35,57 +35,58 @@ const createUseStyles = (styles, options = {}) => {
     const isFirstMount = React.useRef(true)
     const context = React.useContext(JssContext)
     const theme = useTheme(data && data.theme)
+    const [dynamicRules, setDynamicRules] = React.useState()
 
-    const [sheet, dynamicRules] = React.useMemo(() => {
-      const newSheet = createStyleSheet({
-        context,
-        styles,
-        name,
-        theme,
-        index,
-        sheetOptions
-      })
+    const sheet = React.useMemo(
+      () =>
+        createStyleSheet({
+          context,
+          styles,
+          name,
+          theme,
+          index,
+          sheetOptions
+        }),
+      [context, styles, name, theme, index, sheetOptions]
+    )
 
-      const newDynamicRules = newSheet ? addDynamicRules(newSheet, data) : null
+    useEffectOrLayoutEffect(() => {
+      const newDynamicRules = sheet ? addDynamicRules(sheet, data) : null
+      setDynamicRules(newDynamicRules)
 
-      if (newSheet) {
-        manageSheet({
-          index,
-          context,
-          sheet: newSheet,
-          theme
-        })
+      return () => {
+        if (sheet && newDynamicRules) {
+          removeDynamicRules(sheet, newDynamicRules)
+        }
       }
+    }, [sheet, data])
 
-      return [newSheet, newDynamicRules]
-    }, [context, theme])
+    useEffectOrLayoutEffect(() => {
+      manageSheet({
+        index,
+        context,
+        sheet,
+        theme
+      })
+
+      return () => {
+        if (sheet) {
+          unmanageSheet({
+            index,
+            context,
+            sheet,
+            theme
+          })
+        }
+      }
+    }, [index, context, sheet, 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(
-      () =>
-        // cleanup only
-        () => {
-          if (sheet) {
-            unmanageSheet({
-              index,
-              context,
-              sheet,
-              theme
-            })
-          }
-
-          if (sheet && dynamicRules) {
-            removeDynamicRules(sheet, dynamicRules)
-          }
-        },
-      [sheet]
-    )
+    }, [data, sheet, dynamicRules, isFirstMount])
 
     const classes = React.useMemo(
       () => (sheet && dynamicRules ? getSheetClasses(sheet, dynamicRules) : emptyObject),