feat(eslint): no-unnecessary-use-callback (#112689)

This PR adds a new lint rule, `no-unnecessary-use-callback`, that only
checks if `useCallback` is unnecessary in 3 scenarios:

1. The only usage is a direct invocation:

```
const fn = useCallback(() => ..., [deps])

<Component onClick={() => fn()} />
```

This is unnecessary because the referential stability of `fn` is never
“consumed”.

2. They are passed to react intrinsic elements

```
const fn = useCallback(() => ..., [deps])

<button onClick={fn} />
```

React intrinsic elements like `button` _never_ expect props to be
memoized, the components themselves are not memoized so the
`useCallback` does nothing.

3. They pare passed to `scraps` components. Scraps components, too,
don’t expect consumers to memoize input:

```
const fn = useCallback(() => ..., [deps])

<LinkButton onClick={fn} />
```

all other cases are left as they are. Still, there were 194 violations
of this new rule, which were auto fixed.

---------

Co-authored-by: Josh Goldberg ✨ <github@joshuakgoldberg.com>

Author: TkDodo

eslint.config.ts

@@ -462,6 +462,7 @@ export default typescript.config([
       '@sentry/no-flag-comments': 'error',
       '@sentry/no-static-translations': 'error',
       '@sentry/no-styled-shortcut': 'error',
+      '@sentry/no-unnecessary-use-callback': 'error',
     },
   },
   {

static/app/components/assistant/guideAnchor.tsx

@@ -105,16 +105,6 @@ function BaseGuideAnchor({
     [onStepComplete]
   );
 
-  const handleDismiss = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (currentGuide) {
-        dismissGuide(currentGuide.guide, step, orgId);
-      }
-    },
-    [currentGuide, orgId, step]
-  );
-
   if (!active) {
     return children ? children : null;
   }
@@ -133,7 +123,10 @@ function BaseGuideAnchor({
       stepCount={currentStepCount}
       stepTotal={totalStepCount}
       handleDismiss={e => {
-        handleDismiss(e);
+        e.stopPropagation();
+        if (currentGuide) {
+          dismissGuide(currentGuide.guide, step, orgId);
+        }
         window.location.hash = '';
       }}
       actions={

static/app/components/avatarChooser/useUploader.tsx

@@ -41,34 +41,31 @@ export function useUploader({onSelect, minImageSize}: UseUploaderOptions) {
     [minImageSize]
   );
 
-  const onSelectFile = useCallback(
-    async (ev: React.ChangeEvent<HTMLInputElement>) => {
-      const file = ev.target.files?.[0];
+  const onSelectFile = async (ev: React.ChangeEvent<HTMLInputElement>) => {
+    const file = ev.target.files?.[0];
 
-      // No file selected (e.g. user clicked "cancel")
-      if (!file) {
-        return;
-      }
+    // No file selected (e.g. user clicked "cancel")
+    if (!file) {
+      return;
+    }
 
-      if (!/^image\//.test(file.type)) {
-        addErrorMessage(t('That is not a supported file type.'));
-        return;
-      }
-      const url = window.URL.createObjectURL(file);
-      const {height, width} = await getImageHeightAndWidth(url);
-      const sizeValidation = validateSize(height, width);
+    if (!/^image\//.test(file.type)) {
+      addErrorMessage(t('That is not a supported file type.'));
+      return;
+    }
+    const url = window.URL.createObjectURL(file);
+    const {height, width} = await getImageHeightAndWidth(url);
+    const sizeValidation = validateSize(height, width);
 
-      if (sizeValidation !== true) {
-        addErrorMessage(sizeValidation);
-        return;
-      }
+    if (sizeValidation !== true) {
+      addErrorMessage(sizeValidation);
+      return;
+    }
 
-      setObjectUrl(url);
-      onSelect(url);
-      ev.target.value = '';
-    },
-    [onSelect, validateSize]
-  );
+    setObjectUrl(url);
+    onSelect(url);
+    ev.target.value = '';
+  };
 
   const fileInput = (
     <input

static/app/components/clippedBox.tsx

@@ -161,51 +161,45 @@ export function ClippedBox(props: ClippedBoxProps) {
   const clipHeight = props.clipHeight || 200;
   const clipFlex = props.clipFlex || 28;
 
-  const handleReveal = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      if (!wrapperRef.current) {
-        throw new Error('Cannot reveal clipped box without a wrapper ref');
-      }
-
-      event.stopPropagation();
-
-      revealAndDisconnectObserver({
-        contentRef,
-        wrapperRef,
-        revealRef,
-        observerRef,
-        clipHeight,
-        prefersReducedMotion: prefersReducedMotion ?? true,
-      });
-      if (typeof onReveal === 'function') {
-        onReveal();
+  const handleReveal = (event: React.MouseEvent<HTMLElement>) => {
+    if (!wrapperRef.current) {
+      throw new Error('Cannot reveal clipped box without a wrapper ref');
+    }
+
+    event.stopPropagation();
+
+    revealAndDisconnectObserver({
+      contentRef,
+      wrapperRef,
+      revealRef,
+      observerRef,
+      clipHeight,
+      prefersReducedMotion: prefersReducedMotion ?? true,
+    });
+    if (typeof onReveal === 'function') {
+      onReveal();
+    }
+
+    setClipped(false);
+  };
+
+  const handleCollapse = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+
+    if (wrapperRef.current && contentRef.current) {
+      if (prefersReducedMotion) {
+        wrapperRef.current.style.maxHeight = `${clipHeight}px`;
+      } else {
+        const currentHeight =
+          contentRef.current.clientHeight + calculateAddedHeight({wrapperRef});
+        wrapperRef.current.style.maxHeight = `${currentHeight}px`;
+        void wrapperRef.current.offsetHeight;
+        wrapperRef.current.style.maxHeight = `${clipHeight}px`;
       }
-
-      setClipped(false);
-    },
-    [clipHeight, onReveal, prefersReducedMotion]
-  );
-
-  const handleCollapse = useCallback(
-    (event: React.MouseEvent<HTMLElement>) => {
-      event.stopPropagation();
-
-      if (wrapperRef.current && contentRef.current) {
-        if (prefersReducedMotion) {
-          wrapperRef.current.style.maxHeight = `${clipHeight}px`;
-        } else {
-          const currentHeight =
-            contentRef.current.clientHeight + calculateAddedHeight({wrapperRef});
-          wrapperRef.current.style.maxHeight = `${currentHeight}px`;
-          void wrapperRef.current.offsetHeight;
-          wrapperRef.current.style.maxHeight = `${clipHeight}px`;
-        }
-      }
-      revealRef.current = false;
-      setClipped(true);
-    },
-    [clipHeight, prefersReducedMotion]
-  );
+    }
+    revealRef.current = false;
+    setClipped(true);
+  };
 
   const onWrapperRef = useCallback(
     (node: HTMLDivElement | null) => {

static/app/components/core/input/numberDragInput.tsx

@@ -78,40 +78,34 @@ export function NumberDragInput({
     document.removeEventListener('pointerup', onPointerUp);
   }, [onPointerMove]);
 
-  const onPointerDown = useCallback(
-    (event: React.PointerEvent<HTMLElement>) => {
-      if (event.button !== 0) {
-        return;
-      }
-
-      // Request pointer lock and add move and pointer up handlers
-      // that release the lock and cleanup handlers
-      event.currentTarget.requestPointerLock();
-      document.addEventListener('pointermove', onPointerMove);
-      document.addEventListener('pointerup', onPointerUp);
-    },
-    [onPointerMove, onPointerUp]
-  );
+  const onPointerDown = (event: React.PointerEvent<HTMLElement>) => {
+    if (event.button !== 0) {
+      return;
+    }
+
+    // Request pointer lock and add move and pointer up handlers
+    // that release the lock and cleanup handlers
+    event.currentTarget.requestPointerLock();
+    document.addEventListener('pointermove', onPointerMove);
+    document.addEventListener('pointerup', onPointerUp);
+  };
 
   const onKeyDownProp = props.onKeyDown;
-  const onKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>) => {
-      onKeyDownProp?.(event);
-
-      if (!inputRef.current || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')) {
-        return;
-      }
-
-      event.preventDefault();
-      const value = parseFloat(inputRef.current.value);
-      const step = parseFloat(props.step?.toString() ?? '1');
-      const min = props.min ?? Number.NEGATIVE_INFINITY;
-      const max = props.max ?? Number.POSITIVE_INFINITY;
-      const newValue = clamp(value + (event.key === 'ArrowUp' ? step : -step), min, max);
-      setInputValueAndDispatchChange(inputRef.current, newValue.toString());
-    },
-    [onKeyDownProp, props.min, props.max, props.step]
-  );
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    onKeyDownProp?.(event);
+
+    if (!inputRef.current || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')) {
+      return;
+    }
+
+    event.preventDefault();
+    const value = parseFloat(inputRef.current.value);
+    const step = parseFloat(props.step?.toString() ?? '1');
+    const min = props.min ?? Number.NEGATIVE_INFINITY;
+    const max = props.max ?? Number.POSITIVE_INFINITY;
+    const newValue = clamp(value + (event.key === 'ArrowUp' ? step : -step), min, max);
+    setInputValueAndDispatchChange(inputRef.current, newValue.toString());
+  };
 
   return (
     <InputGroup>

static/app/components/core/inspector.tsx

@@ -282,25 +282,22 @@ export function SentryComponentInspector() {
   }, [state.trace]);
 
   const {ref: contextMenuRef, ...contextMenuProps} = {...contextMenu.getMenuProps()};
-  const positionContextMenuOnMountRef = useCallback(
-    (ref: HTMLDivElement | null) => {
-      contextMenuRef(ref);
-
-      if (ref) {
-        const position = computeTooltipPosition(
-          {
-            x: tooltipPositionRef.current?.mouse.x ?? 0,
-            y: tooltipPositionRef.current?.mouse.y ?? 0,
-          },
-          ref
-        );
+  const positionContextMenuOnMountRef = (ref: HTMLDivElement | null) => {
+    contextMenuRef(ref);
+
+    if (ref) {
+      const position = computeTooltipPosition(
+        {
+          x: tooltipPositionRef.current?.mouse.x ?? 0,
+          y: tooltipPositionRef.current?.mouse.y ?? 0,
+        },
+        ref
+      );
 
-        ref.style.left = `${position.left}px`;
-        ref.style.top = `${position.top}px`;
-      }
-    },
-    [contextMenuRef]
-  );
+      ref.style.left = `${position.left}px`;
+      ref.style.top = `${position.top}px`;
+    }
+  };
 
   const storybookFiles = useStoryBookFiles();
   const storybookFilesLookup = useMemo(

static/app/components/events/autofix/autofixStepFeedback.tsx

@@ -1,7 +1,7 @@
-import {useCallback, useState} from 'react';
+import {useState} from 'react';
 
-import {Button} from '@sentry/scraps/button';
 import type {ButtonProps} from '@sentry/scraps/button';
+import {Button} from '@sentry/scraps/button';
 import {Flex} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
@@ -34,27 +34,24 @@ export function AutofixStepFeedback({
   const organization = useOrganization();
   const user = useUser();
 
-  const handleFeedback = useCallback(
-    (positive: boolean, e?: React.MouseEvent) => {
-      if (onFeedbackClick && e) {
-        onFeedbackClick(e);
-      }
+  const handleFeedback = (positive: boolean, e?: React.MouseEvent) => {
+    if (onFeedbackClick && e) {
+      onFeedbackClick(e);
+    }
 
-      const analyticsData = {
-        step_type: stepType,
-        positive,
-        group_id: groupId,
-        autofix_run_id: runId,
-        user_id: user.id,
-        organization,
-      };
+    const analyticsData = {
+      step_type: stepType,
+      positive,
+      group_id: groupId,
+      autofix_run_id: runId,
+      user_id: user.id,
+      organization,
+    };
 
-      trackAnalytics('seer.autofix.feedback_submitted', analyticsData);
+    trackAnalytics('seer.autofix.feedback_submitted', analyticsData);
 
-      setFeedbackSubmitted(true);
-    },
-    [stepType, groupId, runId, organization, user, onFeedbackClick]
-  );
+    setFeedbackSubmitted(true);
+  };
 
   if (feedbackSubmitted) {
     return (

static/app/components/events/autofix/codingAgentIntegrationCta.tsx

@@ -1,5 +1,3 @@
-import {useCallback} from 'react';
-
 import {Button, LinkButton} from '@sentry/scraps/button';
 import {Container, Flex} from '@sentry/scraps/layout';
 import {ExternalLink, Link} from '@sentry/scraps/link';
@@ -61,17 +59,17 @@ export function makeCodingAgentIntegrationCta(config: AgentConfig) {
     const isConfigured =
       preference?.automation_handoff?.target === config.target && isAutomationEnabled;
 
-    const handleInstallClick = useCallback(() => {
+    const handleInstallClick = () => {
       trackAnalytics('coding_integration.install_clicked', {
         organization,
         project_slug: project.slug,
         provider: config.provider,
         source: 'cta',
         user_id: user.id,
       });
-    }, [organization, project.slug, user.id]);
+    };
 
-    const handleSetupClick = useCallback(async () => {
+    const handleSetupClick = async () => {
       if (!integration?.id) {
         throw new Error(`${config.displayName} integration not found`);
       }
@@ -104,17 +102,7 @@ export function makeCodingAgentIntegrationCta(config: AgentConfig) {
           integration_id: parseInt(integration.id, 10),
         },
       });
-    }, [
-      organization,
-      project.slug,
-      project.seerScannerAutomation,
-      project.autofixAutomationTuning,
-      updateProjectSeerPreferences,
-      updateProjectAutomation,
-      preference?.repositories,
-      integration,
-      user.id,
-    ]);
+    };
 
     if (!hasFeatureFlag) {
       return null;