Undeprecate hooks-extra-no-direct-set-state-in-use-layout-effect and remove it from recommended presets, closes #839

packages/plugins/eslint-plugin-react-hooks-extra/src/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable perfectionist/sort-objects */
 import { name, version } from "../package.json";
 import noDirectSetStateInUseEffect from "./rules/no-direct-set-state-in-use-effect";
+import noDirectSetStateInUseLayoutEffect from "./rules/no-direct-set-state-in-use-layout-effect";
 import noRedundantCustomHook from "./rules/no-redundant-custom-hook";
 import ensureUseCallbackHasNonEmptyDeps from "./rules/no-unnecessary-use-callback";
 import noUnnecessaryUseMemo from "./rules/no-unnecessary-use-memo";
@@ -13,6 +14,7 @@ export default {
   },
   rules: {
     "no-direct-set-state-in-use-effect": noDirectSetStateInUseEffect,
+    "no-direct-set-state-in-use-layout-effect": noDirectSetStateInUseLayoutEffect,
     "no-redundant-custom-hook": noRedundantCustomHook,
     "no-unnecessary-use-callback": ensureUseCallbackHasNonEmptyDeps,
     "no-unnecessary-use-memo": noUnnecessaryUseMemo,
@@ -22,7 +24,5 @@ export default {
     "ensure-custom-hooks-using-other-hooks": noRedundantCustomHook,
     /** @deprecated Use `no-unnecessary-use-memo` instead */
     "ensure-use-memo-has-non-empty-deps": noUnnecessaryUseMemo,
-    /** @deprecated Use `no-direct-set-state-in-use-effect` instead */
-    "no-direct-set-state-in-use-layout-effect": noDirectSetStateInUseEffect,
   },
 } as const;

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.spec.ts

@@ -19,61 +19,6 @@ ruleTester.run(RULE_NAME, rule, {
         { messageId: "noDirectSetStateInUseEffect" },
       ],
     },
-    {
-      code: /* tsx */ `
-        import { useLayoutEffect, useState } from "react";
-
-        function Component() {
-          const [data, setData] = useState(0);
-          useLayoutEffect(() => {
-            setData(1);
-          }, []);
-          return null;
-        }
-      `,
-      errors: [
-        { messageId: "noDirectSetStateInUseEffect" },
-      ],
-    },
-    {
-      code: /* tsx */ `
-        import { useInsertionEffect, useState } from "react";
-
-        function Component() {
-          const [data, setData] = useState(0);
-          useInsertionEffect(() => {
-            setData(1);
-          }, []);
-          return null;
-        }
-      `,
-      errors: [
-        { messageId: "noDirectSetStateInUseEffect" },
-      ],
-    },
-    {
-      code: /* tsx */ `
-        import { useState } from "react";
-
-        function Component() {
-          const [data, setData] = useState(0);
-          useIsomorphicLayoutEffect(() => {
-            setData(1);
-          }, []);
-          return null;
-        }
-      `,
-      errors: [
-        { messageId: "noDirectSetStateInUseEffect" },
-      ],
-      settings: {
-        "react-x": {
-          additionalHooks: {
-            useLayoutEffect: ["useIsomorphicLayoutEffect"],
-          },
-        },
-      },
-    },
     {
       code: /* tsx */ `
         import { useEffect, useState } from "react";
@@ -825,5 +770,20 @@ ruleTester.run(RULE_NAME, rule, {
         }, [handlerWatcher])
       }
     `,
+    /* tsx */ `
+      import { useLayoutEffect, useState, useRef } from "react";
+
+      function Tooltip() {
+        const ref = useRef(null);
+        const [tooltipHeight, setTooltipHeight] = useState(0); // You don't know real height yet
+
+        useLayoutEffect(() => {
+          const { height } = ref.current.getBoundingClientRect();
+          setTooltipHeight(height); // Re-render now that you know the real height
+        }, []);
+
+        // ...use tooltipHeight in the rendering logic below...
+      }
+    `,
   ],
 });

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.ts

@@ -40,17 +40,7 @@ export default createRule<[], MessageID>({
     if (!/use\w*Effect/u.test(context.sourceCode.text)) return {};
     const settings = decodeSettings(context.settings);
     const additionalHooks = settings.additionalHooks ?? {};
-    const isUseEffectLikeCall = isReactHookCallWithNameAlias(
-      "useEffect",
-      context,
-      [
-        "useLayoutEffect",
-        "useInsertionEffect",
-        ...additionalHooks.useEffect ?? [],
-        ...additionalHooks.useLayoutEffect ?? [],
-        ...additionalHooks.useInsertionEffect ?? [],
-      ],
-    );
+    const isUseEffectLikeCall = isReactHookCallWithNameAlias("useEffect", context, additionalHooks.useEffect ?? []);
     const isUseStateCall = isReactHookCallWithNameAlias("useState", context, additionalHooks.useState ?? []);
     const isUseMemoCall = isReactHookCallWithNameAlias("useMemo", context, additionalHooks.useMemo ?? []);
     const isUseCallbackCall = isReactHookCallWithNameAlias("useCallback", context, additionalHooks.useCallback ?? []);