move reducer to the module scope, since it doesn't need to be recreated

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

@@ -1,23 +1,23 @@
 {
   "dist/react-jss.js": {
-    "bundled": 128529,
-    "minified": 44367,
-    "gzipped": 13869
+    "bundled": 128542,
+    "minified": 44373,
+    "gzipped": 13874
   },
   "dist/react-jss.min.js": {
-    "bundled": 96142,
-    "minified": 34474,
-    "gzipped": 11084
+    "bundled": 96155,
+    "minified": 34480,
+    "gzipped": 11091
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 20982,
-    "minified": 9838,
-    "gzipped": 3185
+    "bundled": 20993,
+    "minified": 9854,
+    "gzipped": 3193
   },
   "dist/react-jss.esm.js": {
-    "bundled": 20131,
-    "minified": 9097,
-    "gzipped": 3064,
+    "bundled": 20142,
+    "minified": 9113,
+    "gzipped": 3072,
     "treeshaked": {
       "rollup": {
         "code": 2040,

packages/react-jss/src/createUseStyles.js

@@ -20,6 +20,13 @@ const useEffectOrLayoutEffect = isInBrowser ? React.useLayoutEffect : React.useE
 
 const noTheme = {}
 
+const reducer = (prevState, action) => {
+  if (action.type === 'updateSheet') {
+    return action.payload
+  }
+  return prevState
+}
+
 const createUseStyles = <Theme: {}>(styles: Styles<Theme>, options?: HookOptions<Theme> = {}) => {
   const {index = getSheetIndex(), theming, name = 'Hook', ...sheetOptions} = options
   const ThemeContext = (theming && theming.context) || DefaultThemeContext
@@ -35,38 +42,28 @@ const createUseStyles = <Theme: {}>(styles: Styles<Theme>, options?: HookOptions
     const context = React.useContext(JssContext)
     const theme = useTheme()
 
-    const [state, dispatch] = React.useReducer(
-      (prevState, action) => {
-        if (action.type === 'updateSheet') {
-          return action.payload
-        }
-
-        return prevState
-      },
-      null,
-      () => {
-        const sheet = createStaticSheet({
-          context,
-          styles,
-          name,
-          theme,
-          index,
-          sheetOptions
-        })
-
-        if (context.registry && sheet) {
-          context.registry.add(sheet)
-        }
+    const [state, dispatch] = React.useReducer(reducer, null, () => {
+      const sheet = createStaticSheet({
+        context,
+        styles,
+        name,
+        theme,
+        index,
+        sheetOptions
+      })
+
+      if (context.registry && sheet) {
+        context.registry.add(sheet)
+      }
 
-        const dynamicRules = sheet && addDynamicRules(sheet, data)
+      const dynamicRules = sheet && addDynamicRules(sheet, data)
 
-        return {
-          sheet,
-          dynamicRules,
-          classes: sheet ? getSheetClasses(sheet, dynamicRules) : {}
-        }
+      return {
+        sheet,
+        dynamicRules,
+        classes: sheet ? getSheetClasses(sheet, dynamicRules) : {}
       }
-    )
+    })
 
     useEffectOrLayoutEffect(
       () => {