feat(reacthookPlugin): add all reactHookPlugin recommended rules (#146)

Author: alZyad

example-app/eslint-breaking-examples/break-react-hook-eslint-rules.tsx

@@ -2,17 +2,46 @@
 
 // This should trigger an error breaking eslint-plugin-react-hooks:
 // react-hooks/exhaustive-deps
+// react-hooks/rules-of-hooks
+// react-hooks/error-boundaries
 
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
+import { View } from "react-native";
 
-const MyComponent = () => {
-  const [count, setCount] = useState(0);
+// react-hooks/exhaustive-deps
+// Missing `count` in the dependency array
+const ExhaustiveDepsComponent = () => {
+  const [count] = useState(0);
+
+  useEffect(() => void String(count), []);
+
+  return <View />;
+};
 
-  useEffect(() => {
-    setCount(count + 1);
-  }, []);
+// react-hooks/rules-of-hooks
+// Hooks must not be called conditionally
+const RulesOfHooksComponent = ({ isEnabled }: { isEnabled: boolean }) => {
+  if (isEnabled) {
+    const [value] = useState("conditional");
+    return <View testID={value} />;
+  }
 
-  return <></>;
+  return <View />;
 };
 
-export default MyComponent;
+// react-hooks/error-boundaries
+// Use error boundaries instead of try/catch for child component errors
+const ErrorBoundaryComponent = () => {
+  try {
+    const result = JSON.parse("{}") as Record<string, string>;
+    return <View testID={result["id"]} />;
+  } catch {
+    return <View testID="fallback" />;
+  }
+};
+
+export {
+  ErrorBoundaryComponent,
+  ExhaustiveDepsComponent,
+  RulesOfHooksComponent,
+};

packages/eslint-plugin/lib/configs/declarations.d.ts

@@ -1,11 +1,3 @@
-declare module "eslint-plugin-react-hooks" {
-  import type { Linter, Rule } from "eslint";
-  export const rules: {
-    "rules-of-hooks": Rule.RuleModule;
-    "exhaustive-deps": Rule.RuleModule;
-  };
-}
-
 declare module "eslint-plugin-react-native" {
   export const deprecatedRules: Record<string, any>;
   export const rules: Record<string, any>;

packages/eslint-plugin/lib/configs/recommended.ts

@@ -17,6 +17,7 @@ export const recommendedConfig = tseslint.config(
   tseslint.configs.recommended,
   eslint.configs.recommended,
   eslintPluginPrettierRecommended,
+  reactHookPlugin.configs.flat.recommended,
   {
     rules: {
       "no-var": "error",
@@ -50,7 +51,6 @@ export const recommendedConfig = tseslint.config(
     plugins: {
       react,
       "react-native": reactNativePlugin,
-      "react-hooks": reactHookPlugin,
       "@bam.tech": {
         rules: {
           "no-different-displayname": noDifferentDisplaynameRule,