fix: remove react hook eslint rule suppressions (#22003)

adamalston · web-flow · commit 04d6279fd748 · 2026-04-14T18:03:25.000Z
diff --git a/packages/react/src/components/TreeView/TreeNode.tsx b/packages/react/src/components/TreeView/TreeNode.tsx
@@ -290,10 +290,8 @@ const TreeNode = React.forwardRef<HTMLElement, TreeNodeProps>(
     const enableTreeviewControllable = useFeatureFlag(
       'enable-treeview-controllable'
     );
-
-    // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-    const { current: id } = useRef(nodeId || useId());
-
+    const generatedId = useId();
+    const { current: id } = useRef(nodeId ?? generatedId);
     const controllableExpandedState = useControllableState({
       value: isExpanded,
       onChange: onToggle as ControlledOnToggle,
diff --git a/packages/react/src/components/TreeView/TreeView.tsx b/packages/react/src/components/TreeView/TreeView.tsx
@@ -93,9 +93,8 @@ const TreeView: TreeViewComponent = ({
   const enableTreeviewControllable = useFeatureFlag(
     'enable-treeview-controllable'
   );
-
-  // eslint-disable-next-line  react-hooks/rules-of-hooks -- https://github.com/carbon-design-system/carbon/issues/20452
-  const { current: treeId } = useRef(rest.id || useId());
+  const generatedId = useId();
+  const { current: treeId } = useRef(rest.id ?? generatedId);
   const prefix = usePrefix();
   const treeClasses = classNames(className, `${prefix}--tree`, {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
diff --git a/packages/react/src/internal/useOutsideClick.ts b/packages/react/src/internal/useOutsideClick.ts
@@ -19,21 +19,17 @@ export const useOutsideClick = <T extends HTMLElement | null>(
     savedCallback.current = callback;
   }, [callback]);
 
-  // We conditionally guard the `useEvent` hook for SSR. `canUseDOM` can be
-  // treated as a constant as it will be false when executed in a Node.js
-  // environment and true when executed in the browser
-  if (canUseDOM) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useWindowEvent('click', (event) => {
-      const { target } = event;
+  useWindowEvent('click', (event) => {
+    if (!canUseDOM) return;
 
-      if (
-        target instanceof Node &&
-        ref.current &&
-        !ref.current.contains(target)
-      ) {
-        savedCallback.current(event);
-      }
-    });
-  }
+    const { target } = event;
+
+    if (
+      target instanceof Node &&
+      ref.current &&
+      !ref.current.contains(target)
+    ) {
+      savedCallback.current(event);
+    }
+  });
 };
