ref: replace forwardRef with ref prop (#86872)

This PR replaces all usages of `forwardRef` with a regular `ref` prop,
as this is now possible with React 19.

Most of the changes were made by a codemod (provided by react), but some
places had to be changed manually. Further, some forwardRef removals
yielded type-errors that were previously swallowed because of how we’ve
typed generic forwardRefs (especially for the `Select` component). This
needs to be addressed in a follow-up.

I’ve also enabled a lint rule that forbids importing `forwardRef` and
using `React.forwardRef` (for cases where we `import * as React from
'react`). This should make sure that no further `forwardRef` usages make
it into the codease.

---------

Co-authored-by: Scott Cooper <[email protected]>

Author: TkDodo

eslint.config.mjs

@@ -275,6 +275,21 @@ export default typescript.config([
           paths: restrictedImportPaths,
         },
       ],
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector:
+            "ImportDeclaration[source.value='react'] > ImportSpecifier[imported.name='forwardRef']",
+          message:
+            'Since React 19, it is no longer necessary to use forwardRef - refs can be passed as a normal prop',
+        },
+        {
+          selector:
+            "CallExpression[callee.object.name='React'][callee.property.name='forwardRef']",
+          message:
+            'Since React 19, it is no longer necessary to use forwardRef - refs can be passed as a normal prop',
+        },
+      ],
       'no-return-assign': 'error',
       'no-script-url': 'error',
       'no-self-compare': 'error',

static/app/components/ai/SeerIcon.tsx

@@ -1,4 +1,3 @@
-import {forwardRef} from 'react';
 import {keyframes} from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -55,7 +54,7 @@ const InteractionWrapper = styled('div')`
   }
 `;
 
-const SeerIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+function SeerIcon({ref, ...props}: SVGIconProps) {
   return (
     <SvgIcon {...props} ref={ref} viewBox="0 0 30 30" kind="path">
       <path
@@ -87,11 +86,11 @@ const SeerIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
       />
     </SvgIcon>
   );
-});
+}
 
 SeerIcon.displayName = 'SeerIcon';
 
-const SeerLoadingIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+function SeerLoadingIcon({ref, ...props}: SVGIconProps) {
   return (
     <InteractionWrapper>
       <SvgIcon {...props} ref={ref} viewBox="0 0 30 30" kind="path">
@@ -151,9 +150,9 @@ const SeerLoadingIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) =>
       </SvgIcon>
     </InteractionWrapper>
   );
-});
+}
 
-const SeerWaitingIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) => {
+function SeerWaitingIcon({ref, ...props}: SVGIconProps) {
   return (
     <InteractionWrapper>
       <SvgIcon {...props} ref={ref} viewBox="0 0 30 30" kind="path">
@@ -214,6 +213,6 @@ const SeerWaitingIcon = forwardRef<SVGSVGElement, SVGIconProps>((props, ref) =>
       </SvgIcon>
     </InteractionWrapper>
   );
-});
+}
 
 export {SeerIcon, SeerLoadingIcon, SeerWaitingIcon};

static/app/components/autoSelectText.tsx

@@ -1,27 +1,25 @@
-import {forwardRef, useImperativeHandle, useRef} from 'react';
+import {useImperativeHandle, useRef} from 'react';
 import classNames from 'classnames';
 
 import {selectText} from 'sentry/utils/selectText';
 
 type Props = {
   children: React.ReactNode;
   className?: string;
+  ref?: React.Ref<AutoSelectHandle>;
   style?: React.CSSProperties;
 };
 
 type AutoSelectHandle = {
   selectText: () => void;
 };
 
-function AutoSelectText(
-  {children, className, ...props}: Props,
-  forwardedRef: React.Ref<AutoSelectHandle>
-) {
+function AutoSelectText({children, className, ref, ...props}: Props) {
   const element = useRef<HTMLSpanElement>(null);
 
   // We need to expose a selectText method to parent components
   // and need an imperative ref handle.
-  useImperativeHandle(forwardedRef, () => ({
+  useImperativeHandle(ref, () => ({
     selectText: () => handleClick(),
   }));
 
@@ -47,4 +45,4 @@ function AutoSelectText(
   );
 }
 
-export default forwardRef(AutoSelectText);
+export default AutoSelectText;

static/app/components/badge/iconCellSignal.tsx

@@ -1,12 +1,11 @@
-import {forwardRef} from 'react';
 import {useTheme} from '@emotion/react';
 
 import {SvgIcon, type SVGIconProps} from 'sentry/icons/svgIcon';
 
 interface Props extends SVGIconProps {
   bars?: 0 | 1 | 2 | 3;
 }
-const IconCellSignal = forwardRef<SVGSVGElement, Props>(({bars = 3, ...props}, ref) => {
+function IconCellSignal({ref, bars = 3, ...props}: Props) {
   const theme = useTheme();
   const firstBarColor = bars > 0 ? theme.gray300 : theme.gray200;
   const secondBarColor = bars > 1 ? theme.gray300 : theme.gray200;
@@ -19,7 +18,7 @@ const IconCellSignal = forwardRef<SVGSVGElement, Props>(({bars = 3, ...props}, r
       <rect x="12.4" y="0" width="4" height="15" fill={thirdBarColor} rx="1" />
     </SvgIcon>
   );
-});
+}
 
 IconCellSignal.displayName = 'IconCellSignal';
 

static/app/components/charts/areaChart.tsx

@@ -1,4 +1,3 @@
-import {forwardRef} from 'react';
 import type {LineSeriesOption} from 'echarts';
 
 import type {ReactEchartsRef, Series} from 'sentry/types/echarts';
@@ -47,16 +46,22 @@ export function transformToAreaSeries({
   );
 }
 
-export const AreaChart = forwardRef<ReactEchartsRef, AreaChartProps>(
-  ({series, stacked, colors, ...props}, ref) => {
-    return (
-      <BaseChart
-        {...props}
-        ref={ref}
-        data-test-id="area-chart"
-        colors={colors}
-        series={transformToAreaSeries({series, stacked, colors})}
-      />
-    );
-  }
-);
+export function AreaChart({
+  ref,
+  series,
+  stacked,
+  colors,
+  ...props
+}: AreaChartProps & {
+  ref?: React.Ref<ReactEchartsRef>;
+}) {
+  return (
+    <BaseChart
+      {...props}
+      ref={ref}
+      data-test-id="area-chart"
+      colors={colors}
+      series={transformToAreaSeries({series, stacked, colors})}
+    />
+  );
+}

static/app/components/charts/barChart.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, useMemo} from 'react';
+import {useMemo} from 'react';
 import type {BarSeriesOption} from 'echarts';
 
 import type {ReactEchartsRef, Series} from 'sentry/types/echarts';
@@ -60,19 +60,28 @@ export function transformToBarSeries({
 }
 
 const EMPTY_AXIS = {};
-export const BarChart = forwardRef<ReactEchartsRef, BarChartProps>(
-  ({barOpacity, hideZeros, series, stacked, xAxis, animation, ...props}, ref) => {
-    const transformedSeries = useMemo(() => {
-      return transformToBarSeries({barOpacity, hideZeros, series, stacked, animation});
-    }, [animation, barOpacity, hideZeros, series, stacked]);
+export function BarChart({
+  ref,
+  barOpacity,
+  hideZeros,
+  series,
+  stacked,
+  xAxis,
+  animation,
+  ...props
+}: BarChartProps & {
+  ref?: React.Ref<ReactEchartsRef>;
+}) {
+  const transformedSeries = useMemo(() => {
+    return transformToBarSeries({barOpacity, hideZeros, series, stacked, animation});
+  }, [animation, barOpacity, hideZeros, series, stacked]);
 
-    const xAxisOptions = useMemo(() => {
-      const option = xAxis === null ? null : {...(xAxis || EMPTY_AXIS)};
-      return option;
-    }, [xAxis]);
+  const xAxisOptions = useMemo(() => {
+    const option = xAxis === null ? null : {...(xAxis || EMPTY_AXIS)};
+    return option;
+  }, [xAxis]);
 
-    return (
-      <BaseChart {...props} ref={ref} xAxis={xAxisOptions} series={transformedSeries} />
-    );
-  }
-);
+  return (
+    <BaseChart {...props} ref={ref} xAxis={xAxisOptions} series={transformedSeries} />
+  );
+}

static/app/components/charts/baseChart.tsx

@@ -4,7 +4,7 @@ import 'echarts/lib/component/toolbox';
 import 'echarts/lib/component/brush';
 import 'zrender/lib/svg/svg';
 
-import {forwardRef, useMemo} from 'react';
+import {useMemo} from 'react';
 import type {Theme} from '@emotion/react';
 import {css, Global, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -621,17 +621,21 @@ function BaseChartUnwrapped({
           handleClick(props, instance);
           onClick?.(props, instance);
         },
+
         highlight: (props: any, instance: ECharts) => onHighlight?.(props, instance),
         mouseout: (props: any, instance: ECharts) => onMouseOut?.(props, instance),
         mouseover: (props: any, instance: ECharts) => onMouseOver?.(props, instance),
         datazoom: (props: any, instance: ECharts) => onDataZoom?.(props, instance),
         restore: (props: any, instance: ECharts) => onRestore?.(props, instance),
         finished: (props: any, instance: ECharts) => onFinished?.(props, instance),
         rendered: (props: any, instance: ECharts) => onRendered?.(props, instance),
+
         legendselectchanged: (props: any, instance: ECharts) =>
           onLegendSelectChanged?.(props, instance),
+
         brush: (props: any, instance: ECharts) => onBrushStart?.(props, instance),
         brushend: (props: any, instance: ECharts) => onBrushEnd?.(props, instance),
+
         brushselected: (props: any, instance: ECharts) =>
           onBrushSelected?.(props, instance),
       }) as ReactEchartProps['onEvents'],
@@ -849,9 +853,14 @@ const getPortalledTooltipStyles = (p: {theme: Theme}) => css`
   }
 `;
 
-const BaseChart = forwardRef<ReactEchartsRef, BaseChartProps>((props, ref) => (
-  <BaseChartUnwrapped forwardedRef={ref} {...props} />
-));
+function BaseChart({
+  ref,
+  ...props
+}: BaseChartProps & {
+  ref?: React.Ref<ReactEchartsRef>;
+}) {
+  return <BaseChartUnwrapped forwardedRef={ref} {...props} />;
+}
 
 BaseChart.displayName = 'forwardRef(BaseChart)';
 

static/app/components/charts/heatMapChart.tsx

@@ -1,6 +1,5 @@
 import './components/visualMap';
 
-import {forwardRef} from 'react';
 import type {HeatmapSeriesOption, VisualMapComponentOption} from 'echarts';
 
 import type {ReactEchartsRef, Series} from 'sentry/types/echarts';
@@ -21,7 +20,12 @@ interface HeatmapProps extends Omit<BaseChartProps, 'series'> {
   seriesOptions?: HeatmapSeriesOption;
 }
 
-export default forwardRef<ReactEchartsRef, HeatmapProps>((props, ref) => {
+export default function HeatMapChart({
+  ref,
+  ...props
+}: HeatmapProps & {
+  ref?: React.Ref<ReactEchartsRef>;
+}) {
   const {series, seriesOptions, visualMaps, ...otherProps} = props;
   return (
     <BaseChart
@@ -40,4 +44,4 @@ export default forwardRef<ReactEchartsRef, HeatmapProps>((props, ref) => {
       )}
     />
   );
-});
+}