fix(useStyles): manageSheet must be in the same effect as unmanageSheet (#1609)

* managesheet must be in seperate effect

* manage immediately during SSRs

* size snapshot

* actually use context.isSSR

Author: enisdenjo

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

@@ -1,23 +1,23 @@
 {
   "react-jss.js": {
-    "bundled": 136245,
-    "minified": 50224,
-    "gzipped": 16773
+    "bundled": 136547,
+    "minified": 50287,
+    "gzipped": 16786
   },
   "react-jss.min.js": {
-    "bundled": 103195,
-    "minified": 40083,
-    "gzipped": 13886
+    "bundled": 103497,
+    "minified": 40146,
+    "gzipped": 13904
   },
   "react-jss.cjs.js": {
-    "bundled": 21759,
-    "minified": 9601,
-    "gzipped": 3220
+    "bundled": 22047,
+    "minified": 9671,
+    "gzipped": 3230
   },
   "react-jss.esm.js": {
-    "bundled": 19855,
-    "minified": 8114,
-    "gzipped": 3000,
+    "bundled": 20143,
+    "minified": 8184,
+    "gzipped": 3010,
     "treeshaked": {
       "rollup": {
         "code": 442,

packages/react-jss/src/createUseStyles.js

@@ -50,7 +50,8 @@ const createUseStyles = (styles, options = {}) => {
         sheetOptions
       })
 
-      if (newSheet) {
+      if (newSheet && context.isSSR) {
+        // manage immediately during SSRs. browsers will manage the sheet through useInsertionEffect below
         manageSheet({
           index,
           context,
@@ -69,8 +70,17 @@ const createUseStyles = (styles, options = {}) => {
       }
     }, [data])
 
-    getUseInsertionEffect(context.isSSR)(
-      () => () => {
+    getUseInsertionEffect(context.isSSR)(() => {
+      if (sheet) {
+        manageSheet({
+          index,
+          context,
+          sheet,
+          theme
+        })
+      }
+
+      return () => {
         if (sheet) {
           unmanageSheet({
             index,
@@ -84,9 +94,8 @@ const createUseStyles = (styles, options = {}) => {
             removeDynamicRules(sheet, dynamicRules)
           }
         }
-      },
-      [sheet]
-    )
+      }
+    }, [sheet])
 
     const classes = React.useMemo(
       () => (sheet && dynamicRules ? getSheetClasses(sheet, dynamicRules) : emptyObject),