Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alZyad merged 5 commits into from
Apr 9, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c6a4b2d
BREAKING CHANGE: add all reactHookPlugin recommended rules
alZyad Mar 5, 2026
5ca0509
fix: remove comment
alZyad Mar 25, 2026
ef6f839
fix: use correct name in type to avoid ambiguity
alZyad Mar 25, 2026
0f94cf2
feat: add breaking example for some react hook plugin rules
alZyad Mar 25, 2026
1f1fc56
fix: eslint-plugin-react-hooks is already typed no need to override t…
alZyad Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 37 additions & 8 deletions example-app/eslint-breaking-examples/break-react-hook-eslint-rules.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
8 changes: 0 additions & 8 deletions packages/eslint-plugin/lib/configs/declarations.d.ts
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@AntoineThibi AntoineThibi Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Si pas nécessaire + on ne sait pas d'où il vient, comment il a été fait et qu'en plus on n'en a pas besoin, autant ne pas le mettre.
Ou creuser ce qui se passe.

Copy link
Copy Markdown
Contributor Author

@alZyad alZyad Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Du coup j'ai creusé, le fichier sert à typer nos rules, mais il est pertinent uniquement pour celles qui ne le sont pas déjà, du coup je supprime la partie "eslint-plugin-react-hooks" car le package inclut le typage

Original file line number Diff line number Diff line change
@@ -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>;
Expand Down
2 changes: 1 addition & 1 deletion packages/eslint-plugin/lib/configs/recommended.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const recommendedConfig = tseslint.config(
tseslint.configs.recommended,
eslint.configs.recommended,
eslintPluginPrettierRecommended,
reactHookPlugin.configs.flat.recommended,
{
rules: {
"no-var": "error",
Expand Down Expand Up @@ -50,7 +51,6 @@ export const recommendedConfig = tseslint.config(
plugins: {
react,
"react-native": reactNativePlugin,
"react-hooks": reactHookPlugin,
"@bam.tech": {
rules: {
"no-different-displayname": noDifferentDisplaynameRule,
Expand Down
Loading