From 01a872397b1c4359dfae2053acb3c6556e2488c4 Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Fri, 3 Oct 2025 18:57:09 -0400 Subject: [PATCH] Update eslint-plugin-react-hooks version reference Updates all mentions of eslint-plugin-react-hooks rc and 6.1.0 to refer to the new 6.1.1 which has important bugfixes. --- src/content/blog/2025/04/21/react-compiler-rc.md | 8 ++++---- src/content/blog/2025/10/01/react-19-2.md | 4 ++-- src/content/learn/react-compiler/installation.md | 2 +- .../eslint-plugin-react-hooks/lints/exhaustive-deps.md | 2 +- .../eslint-plugin-react-hooks/lints/rules-of-hooks.md | 2 +- src/content/reference/react/useEffectEvent.md | 2 +- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/blog/2025/04/21/react-compiler-rc.md b/src/content/blog/2025/04/21/react-compiler-rc.md index 2ebbf3baeb6..ce30a8860ac 100644 --- a/src/content/blog/2025/04/21/react-compiler-rc.md +++ b/src/content/blog/2025/04/21/react-compiler-rc.md @@ -57,23 +57,23 @@ During the RC period, we encourage all React users to try the compiler and provi As noted in the Beta announcement, React Compiler is compatible with React 17 and up. If you are not yet on React 19, you can use React Compiler by specifying a minimum target in your compiler config, and adding `react-compiler-runtime` as a dependency. You can find docs on this [here](https://react.dev/learn/react-compiler#using-react-compiler-with-react-17-or-18). ## Migrating from eslint-plugin-react-compiler to eslint-plugin-react-hooks {/*migrating-from-eslint-plugin-react-compiler-to-eslint-plugin-react-hooks*/} -If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@rc`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! +If you have already installed eslint-plugin-react-compiler, you can now remove it and use `eslint-plugin-react-hooks@^6.1.1`. Many thanks to [@michaelfaith](https://bsky.app/profile/michael.faith) for contributing to this improvement! To install: npm -{`npm install --save-dev eslint-plugin-react-hooks@rc`} +{`npm install --save-dev eslint-plugin-react-hooks@^6.1.1`} pnpm -{`pnpm add --save-dev eslint-plugin-react-hooks@rc`} +{`pnpm add --save-dev eslint-plugin-react-hooks@^6.1.1`} yarn -{`yarn add --dev eslint-plugin-react-hooks@rc`} +{`yarn add --dev eslint-plugin-react-hooks@^6.1.1`} ```js diff --git a/src/content/blog/2025/10/01/react-19-2.md b/src/content/blog/2025/10/01/react-19-2.md index 5a525593c48..eae9c8fa726 100644 --- a/src/content/blog/2025/10/01/react-19-2.md +++ b/src/content/blog/2025/10/01/react-19-2.md @@ -98,7 +98,7 @@ function ChatRoom({ roomId, theme }) { Similar to DOM events, Effect Events always “see” the latest props and state. -**Effect Events should _not_ be declared in the dependency array**. You'll need to upgrade to `eslint-plugin-react-hooks@6.1.0` so that the linter doesn't try to insert them as dependencies. Note that Effect Events can only be declared in the same component or Hook as "their" Effect. These restrictions are verified by the linter. +**Effect Events should _not_ be declared in the dependency array**. You'll need to upgrade to `eslint-plugin-react-hooks@6.1.1` so that the linter doesn't try to insert them as dependencies. Note that Effect Events can only be declared in the same component or Hook as "their" Effect. These restrictions are verified by the linter. @@ -289,7 +289,7 @@ This is because Node Streams are much faster than Web Streams in Node, and Web S ### `eslint-plugin-react-hooks` v6 {/*eslint-plugin-react-hooks*/} -We also published `eslint-plugin-react-hooks@6.1.0` with flat config by default in the `recommended` preset, and opt-in for new React Compiler powered rules. +We also published `eslint-plugin-react-hooks@6.1.1` with flat config by default in the `recommended` preset, and opt-in for new React Compiler powered rules. To continue using the legacy config, you can change to `recommended-legacy`: diff --git a/src/content/learn/react-compiler/installation.md b/src/content/learn/react-compiler/installation.md index a40b1f5af1f..0b4375136d9 100644 --- a/src/content/learn/react-compiler/installation.md +++ b/src/content/learn/react-compiler/installation.md @@ -173,7 +173,7 @@ React Compiler includes an ESLint rule that helps identify code that can't be op Install the ESLint plugin: -npm install -D eslint-plugin-react-hooks@rc +npm install -D eslint-plugin-react-hooks@^6.1.1 If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rule is enabled by default in the latest RC, so no additional configuration is needed. diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/exhaustive-deps.md b/src/content/reference/eslint-plugin-react-hooks/lints/exhaustive-deps.md index a2c98fa9f3f..daa7db6a813 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/exhaustive-deps.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/exhaustive-deps.md @@ -140,7 +140,7 @@ useEffect(() => { ## Options {/*options*/} -You can configure custom effect hooks using shared ESLint settings (available in `eslint-plugin-react-hooks` 6.1.0 and later): +You can configure custom effect hooks using shared ESLint settings (available in `eslint-plugin-react-hooks` 6.1.1 and later): ```js { diff --git a/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md index 87a02c35645..56a9d74beb8 100644 --- a/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md +++ b/src/content/reference/eslint-plugin-react-hooks/lints/rules-of-hooks.md @@ -162,7 +162,7 @@ const [permissions, setPermissions] = useState( ## Options {/*options*/} -You can configure custom effect hooks using shared ESLint settings (available in `eslint-plugin-react-hooks` 6.1.0 and later): +You can configure custom effect hooks using shared ESLint settings (available in `eslint-plugin-react-hooks` 6.1.1 and later): ```js { diff --git a/src/content/reference/react/useEffectEvent.md b/src/content/reference/react/useEffectEvent.md index c54a3035788..bfac4c48e89 100644 --- a/src/content/reference/react/useEffectEvent.md +++ b/src/content/reference/react/useEffectEvent.md @@ -53,7 +53,7 @@ Returns an Effect Event function. You can call this function inside `useEffect`, #### Caveats {/*caveats*/} -- **Only call inside Effects:** Effect Events should only be called within Effects. Define them just before the Effect that uses them. Do not pass them to other components or hooks. The [`eslint-plugin-react-hooks`](/reference/eslint-plugin-react-hooks) linter (version 6.1.0 or higher) will enforce this restriction to prevent calling Effect Events in the wrong context. +- **Only call inside Effects:** Effect Events should only be called within Effects. Define them just before the Effect that uses them. Do not pass them to other components or hooks. The [`eslint-plugin-react-hooks`](/reference/eslint-plugin-react-hooks) linter (version 6.1.1 or higher) will enforce this restriction to prevent calling Effect Events in the wrong context. - **Not a dependency shortcut:** Do not use `useEffectEvent` to avoid specifying dependencies in your Effect's dependency array. This can hide bugs and make your code harder to understand. Prefer explicit dependencies or use refs to compare previous values if needed. - **Use for non-reactive logic:** Only use `useEffectEvent` to extract logic that does not depend on changing values.