diff --git a/apps/website/content/docs/advanced-configuration.mdx b/apps/website/content/docs/advanced-configuration.mdx index 48eb7c60e..a5185687e 100644 --- a/apps/website/content/docs/advanced-configuration.mdx +++ b/apps/website/content/docs/advanced-configuration.mdx @@ -19,6 +19,7 @@ export default [ version: "19.0.0", importSource: "react", additionalHooks: { + useEffect: ["useIsomorphicLayoutEffect"], useLayoutEffect: ["useIsomorphicLayoutEffect"], }, additionalComponents: [ diff --git a/apps/website/content/docs/configurations.mdx b/apps/website/content/docs/configurations.mdx index fb41bca72..65711d9bf 100644 --- a/apps/website/content/docs/configurations.mdx +++ b/apps/website/content/docs/configurations.mdx @@ -108,6 +108,7 @@ For example, if you set the `additionalHooks` to: ```json { + useEffect: ["useIsomorphicLayoutEffect"] useLayoutEffect: ["useIsomorphicLayoutEffect"] } ``` @@ -124,7 +125,7 @@ will be evaluated as an: useLayoutEffect(() => { setCount(count => count + 1); }, []); ``` -So that the `hooks-extra/no-direct-set-state-in-use-layout-effect` rule can perform checks on it. +So that both the `hooks-extra/no-direct-set-state-in-use-effect` and `hooks-extra/no-direct-set-state-in-use-layout-effect` rules can perform checks on it. ## Examples @@ -142,6 +143,7 @@ export default [ importSource: "react", polymorphicPropName: "as", additionalHooks: { + useEffect: ["useIsomorphicLayoutEffect"], useLayoutEffect: ["useIsomorphicLayoutEffect"], }, additionalComponents: [ diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.spec.ts b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.spec.ts index eaa2512e6..1407086f3 100644 --- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.spec.ts +++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.spec.ts @@ -37,6 +37,7 @@ ruleTester.run(RULE_NAME, rule, { settings: { "react-x": { additionalHooks: { + useEffect: ["useIsomorphicLayoutEffect"], useLayoutEffect: ["useIsomorphicLayoutEffect"], }, }, diff --git a/packages/shared/src/schemas.ts b/packages/shared/src/schemas.ts index eee6c3c9e..9013256dd 100644 --- a/packages/shared/src/schemas.ts +++ b/packages/shared/src/schemas.ts @@ -133,7 +133,7 @@ export const ESLintReactSettingsSchema = object({ /** * A object to define additional hooks that are equivalent to the built-in React Hooks. * @description ESLint React will recognize these aliases as equivalent to the built-in hooks in all its rules. - * @example `{ useLayoutEffect: ["useIsomorphicLayoutEffect"] }` + * @example `{ useEffect: ["useIsomorphicLayoutEffect"] }` */ additionalHooks: optional(CustomHooksSchema), /** @@ -179,6 +179,7 @@ export const DEFAULT_ESLINT_REACT_SETTINGS = { strictImportCheck: false, version: "detect", additionalHooks: { + useEffect: ["useIsomorphicLayoutEffect"], useLayoutEffect: ["useIsomorphicLayoutEffect"], }, } as const satisfies ESLintReactSettings;