BREAKING CHANGE: add performance rule to prevent using useIsFocused

Author: fannytavart

example-app/eslint-breaking-examples/break-use-is-focused-import-rule.tsx

@@ -0,0 +1,13 @@
+// Save without formatting: [⌘ + K] > [S]
+
+// This should trigger one error breaking eslint-plugin-react-native:
+// no-restricted-imports
+
+import { useIsFocused } from "@react-navigation/native";
+import { Text } from "react-native";
+
+export const MyComponent = () => {
+  const isFocused = useIsFocused();
+
+  return <Text>{isFocused ? "focused" : "unfocused"}</Text>;
+};

example-app/package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "@bam.tech/eslint-plugin": "*",
     "@bam.tech/typescript-config": "*",
+    "@react-navigation/native": "^6.1.18",
     "@react-navigation/stack": "^6.4.1",
     "@testing-library/react-native": "^12.3.1",
     "@types/jest": "^29.5.2",

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

@@ -17,6 +17,12 @@ export const performanceConfig = defineConfig({
             message:
               'Please use "@react-navigation/native-stack" instead of "@react-navigation/stack".',
           },
+          {
+            name: "@react-navigation/native",
+            importNames: ["useIsFocused"],
+            message:
+              "Please use useFocusEffect instead of useIsFocused to avoid excessive rerenders.",
+          },
         ],
       },
     ],