fix(react-icons): fix react rules of hook violations (#874)

* chore(react-icons): add rules of hooks lint plugin

* fix(react-icons): fix react rules of hook violations

Author: Hotell

package-lock.json

@@ -1,6 +1,7 @@
 // @ts-check
 import tseslint from 'typescript-eslint';
 import griffelPlugin from '@griffel/eslint-plugin';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
 
 export default tseslint.config(
   {
@@ -26,10 +27,13 @@ export default tseslint.config(
     files: ['**/*.{ts,tsx}'],
     plugins: {
       '@griffel': griffelPlugin,
+      'react-hooks': reactHooksPlugin,
     },
     rules: {
       '@griffel/no-shorthands': 'error',
       '@griffel/styles-file': 'error',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
     },
   },
 );

packages/react-icons/eslint.config.mjs

@@ -40,6 +40,7 @@
     "@types/react": "^17.0.2",
     "concurrently": "^9.2.0",
     "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "glob": "^7.2.0",
     "lodash": "^4.17.21",
     "mkdirp": "^1.0.4",

packages/react-icons/package.json

@@ -10,4 +10,7 @@ const IconDirectionContextDefaultValue: IconDirectionContextValue = {};
 
 export const IconDirectionContextProvider = IconDirectionContext.Provider;
 
-export const useIconContext = () => React.useContext(IconDirectionContext) ? React.useContext(IconDirectionContext) : IconDirectionContextDefaultValue
+export const useIconContext = () => {
+  const context = React.useContext(IconDirectionContext);
+  return context ?? IconDirectionContextDefaultValue;
+}

packages/react-icons/src/contexts/IconDirectionContext.ts

@@ -17,9 +17,9 @@ export type CreateFluentIconOptions = {
 
 
 export const createFluentIcon = (displayName: string, width: string, pathsOrSvg: string[] | string, options?: CreateFluentIconOptions): FluentIcon => {
-    const styles = useRootStyles();
     const viewBoxWidth = width === "1em" ? "20" : width;
     const Icon = React.forwardRef((props: FluentIconsProps, ref: React.Ref<HTMLElement>) => {
+        const styles = useRootStyles();
         const iconState = useIconState(props, { flipInRtl: options?.flipInRtl }); // HTML attributes/props for things like accessibility can be passed in, and will be expanded on the svg object at the start of the object
         const state = {
             ...iconState,