refactor: turn on react-naming-convention/use-state (ant-design#56998)

thinkasany · meet-student · web-flow · commit 95f032bc3d5f · 2026-02-14T11:50:16.000+08:00
Co-authored-by: 遇见同学 &lt;1875694521@qq.com&gt;
diff --git a/.dumi/theme/common/VersionUpgrade/index.tsx b/.dumi/theme/common/VersionUpgrade/index.tsx
@@ -29,13 +29,13 @@ const VersionUpgradeModal = () => {
   const [locale, lang] = useLocale(locales);
   const { pathname } = useLocation();
 
-  const [open, updateOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(false);
 
   const isCN = lang === 'cn' || utils.isZhCN(pathname);
 
   function handleClose() {
     localStorage.setItem(STORAGE_KEY, Date.now().toString());
-    updateOpen(false);
+    setOpen(false);
   }
 
   React.useEffect(() => {
@@ -48,7 +48,7 @@ const VersionUpgradeModal = () => {
 
     if (!lastTime) {
       const timer = setTimeout(() => {
-        updateOpen(true);
+        setOpen(true);
       }, 1000);
 
       return () => {
diff --git a/components/_util/wave/WaveEffect.tsx b/components/_util/wave/WaveEffect.tsx
@@ -34,7 +34,7 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {
   const [varName] = genCssVar(rootPrefixCls, 'wave');
 
   // ===================== Effect =====================
-  const [color, setWaveColor] = React.useState<string | null>(null);
+  const [waveColor, setWaveColor] = React.useState<string | null>(null);
   const [borderRadius, setBorderRadius] = React.useState<number[]>([]);
   const [left, setLeft] = React.useState(0);
   const [top, setTop] = React.useState(0);
@@ -50,8 +50,8 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {
     borderRadius: borderRadius.map((radius) => `${radius}px`).join(' '),
   };
 
-  if (color) {
-    waveStyle[varName('color')] = color;
+  if (waveColor) {
+    waveStyle[varName('color')] = waveColor;
   }
 
   function syncPos() {
diff --git a/components/button/Button.tsx b/components/button/Button.tsx
@@ -225,7 +225,7 @@ const InternalCompoundedButton = React.forwardRef<
 
   const loadingOrDelay = useMemo<LoadingConfigType>(() => getLoadingConfig(loading), [loading]);
 
-  const [innerLoading, setLoading] = useState<boolean>(loadingOrDelay.loading);
+  const [innerLoading, setInnerLoading] = useState<boolean>(loadingOrDelay.loading);
 
   const [hasTwoCNChar, setHasTwoCNChar] = useState<boolean>(false);
 
@@ -255,10 +255,10 @@ const InternalCompoundedButton = React.forwardRef<
     if (loadingOrDelay.delay > 0) {
       delayTimer = setTimeout(() => {
         delayTimer = null;
-        setLoading(true);
+        setInnerLoading(true);
       }, loadingOrDelay.delay);
     } else {
-      setLoading(loadingOrDelay.loading);
+      setInnerLoading(loadingOrDelay.loading);
     }
 
     function cleanupTimer() {
diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx
@@ -99,7 +99,7 @@ const App: React.FC = () => {
   const { styles } = useStyle({ test: true });
 
   const [selectDate, setSelectDate] = React.useState<Dayjs>(() => dayjs());
-  const [panelDateDate, setPanelDate] = React.useState<Dayjs>(() => dayjs());
+  const [panelDate, setPanelDate] = React.useState<Dayjs>(() => dayjs());
 
   const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {
     console.log(value.format('YYYY-MM-DD'), mode);
@@ -131,7 +131,7 @@ const App: React.FC = () => {
             <span
               className={clsx({
                 [styles.weekend]: isWeekend,
-                gray: !panelDateDate.isSame(date, 'month'),
+                gray: !panelDate.isSame(date, 'month'),
               })}
             >
               {date.get('date')}
diff --git a/components/cascader/demo/placement.tsx b/components/cascader/demo/placement.tsx
@@ -44,12 +44,12 @@ const options: Option[] = [
 ];
 
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'>(
+  const [placement, setPlacement] = useState<'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'>(
     'topLeft',
   );
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (
diff --git a/components/config-provider/demo/locale.tsx b/components/config-provider/demo/locale.tsx
@@ -225,11 +225,11 @@ const Page: React.FC = () => {
 };
 
 const App: React.FC = () => {
-  const [locale, setLocal] = useState<Locale>(enUS);
+  const [locale, setLocale] = useState<Locale>(enUS);
 
   const changeLocale = (e: RadioChangeEvent) => {
     const localeValue = e.target.value;
-    setLocal(localeValue);
+    setLocale(localeValue);
     if (!localeValue) {
       dayjs.locale('en');
     } else {
diff --git a/components/date-picker/demo/placement.tsx b/components/date-picker/demo/placement.tsx
@@ -5,10 +5,10 @@ import { DatePicker, Radio } from 'antd';
 const { RangePicker } = DatePicker;
 
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<DatePickerProps['placement']>('topLeft');
+  const [placement, setPlacement] = useState<DatePickerProps['placement']>('topLeft');
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (
diff --git a/components/drawer/demo/style-class.tsx b/components/drawer/demo/style-class.tsx
@@ -54,8 +54,8 @@ const stylesFn: DrawerProps['styles'] = (info) => {
 };
 
 const App: React.FC = () => {
-  const [drawerOpen, setOpen] = useState(false);
-  const [drawerFnOpen, setFnOpen] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerFnOpen, setDrawerFnOpen] = useState(false);
 
   const sharedProps: DrawerProps = {
     classNames,
@@ -65,15 +65,15 @@ const App: React.FC = () => {
   const footer: React.ReactNode = (
     <Flex gap="middle" justify="flex-end">
       <Button
-        onClick={() => setFnOpen(false)}
+        onClick={() => setDrawerFnOpen(false)}
         styles={{ root: { borderColor: '#ccc', color: '#171717', backgroundColor: '#fff' } }}
       >
         Cancel
       </Button>
       <Button
         type="primary"
         styles={{ root: { backgroundColor: '#171717' } }}
-        onClick={() => setOpen(true)}
+        onClick={() => setDrawerOpen(true)}
       >
         Submit
       </Button>
@@ -82,8 +82,8 @@ const App: React.FC = () => {
 
   return (
     <Flex gap="middle">
-      <Button onClick={() => setOpen(true)}>Open Style Drawer</Button>
-      <Button type="primary" onClick={() => setFnOpen(true)}>
+      <Button onClick={() => setDrawerOpen(true)}>Open Style Drawer</Button>
+      <Button type="primary" onClick={() => setDrawerFnOpen(true)}>
         Open Function Drawer
       </Button>
       <Drawer
@@ -92,7 +92,7 @@ const App: React.FC = () => {
         title="Custom Style Drawer"
         styles={styles}
         open={drawerOpen}
-        onClose={() => setOpen(false)}
+        onClose={() => setDrawerOpen(false)}
       >
         {sharedContent}
       </Drawer>
@@ -103,7 +103,7 @@ const App: React.FC = () => {
         styles={stylesFn}
         mask={{ enabled: true, blur: true }}
         open={drawerFnOpen}
-        onClose={() => setFnOpen(false)}
+        onClose={() => setDrawerFnOpen(false)}
       >
         {sharedContent}
       </Drawer>
diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx
@@ -829,13 +829,13 @@ describe('Form', () => {
   // https://github.com/ant-design/ant-design/issues/20813
   it('should update help directly when provided', async () => {
     const App: React.FC = () => {
-      const [message, updateMessage] = React.useState('');
+      const [message, setMessage] = React.useState('');
       return (
         <Form>
           <Form.Item label="hello" help={message}>
             <Input />
           </Form.Item>
-          <Button onClick={() => updateMessage('bamboo')} />
+          <Button onClick={() => setMessage('bamboo')} />
         </Form>
       );
     };
diff --git a/components/form/demo/required-mark.tsx b/components/form/demo/required-mark.tsx
@@ -14,10 +14,10 @@ const customizeRequiredMark = (label: React.ReactNode, { required }: { required:
 
 const App: React.FC = () => {
   const [form] = Form.useForm();
-  const [requiredMark, setRequiredMarkType] = useState<RequiredMark>('optional');
+  const [requiredMark, setRequiredMark] = useState<RequiredMark>('optional');
 
   const onRequiredTypeChange: FormProps<any>['onValuesChange'] = ({ requiredMarkValue }) => {
-    setRequiredMarkType(requiredMarkValue);
+    setRequiredMark(requiredMarkValue);
   };
 
   return (
diff --git a/components/modal/demo/style-class.tsx b/components/modal/demo/style-class.tsx
@@ -60,8 +60,8 @@ const stylesFn: ModalProps['styles'] = (info) => {
 };
 
 const App: React.FC = () => {
-  const [modalOpen, setOpen] = useState(false);
-  const [modalFnOpen, setFnOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalFnOpen, setModalFnOpen] = useState(false);
 
   const sharedProps: ModalProps = {
     centered: true,
@@ -71,15 +71,15 @@ const App: React.FC = () => {
   const footer: React.ReactNode = (
     <>
       <Button
-        onClick={() => setFnOpen(false)}
+        onClick={() => setModalFnOpen(false)}
         styles={{ root: { borderColor: '#ccc', color: '#171717', backgroundColor: '#fff' } }}
       >
         Cancel
       </Button>
       <Button
         type="primary"
         styles={{ root: { backgroundColor: '#171717' } }}
-        onClick={() => setOpen(true)}
+        onClick={() => setModalOpen(true)}
       >
         Submit
       </Button>
@@ -88,8 +88,8 @@ const App: React.FC = () => {
 
   return (
     <Flex gap="middle">
-      <Button onClick={() => setOpen(true)}>Open Style Modal</Button>
-      <Button type="primary" onClick={() => setFnOpen(true)}>
+      <Button onClick={() => setModalOpen(true)}>Open Style Modal</Button>
+      <Button type="primary" onClick={() => setModalFnOpen(true)}>
         Open Function Modal
       </Button>
       <Modal
@@ -98,8 +98,8 @@ const App: React.FC = () => {
         title="Custom Style Modal"
         styles={styles}
         open={modalOpen}
-        onOk={() => setOpen(false)}
-        onCancel={() => setOpen(false)}
+        onOk={() => setModalOpen(false)}
+        onCancel={() => setModalOpen(false)}
       >
         {sharedContent}
       </Modal>
@@ -110,8 +110,8 @@ const App: React.FC = () => {
         styles={stylesFn}
         mask={{ enabled: true, blur: true }}
         open={modalFnOpen}
-        onOk={() => setFnOpen(false)}
-        onCancel={() => setFnOpen(false)}
+        onOk={() => setModalFnOpen(false)}
+        onCancel={() => setModalFnOpen(false)}
       >
         {sharedContent}
       </Modal>
diff --git a/components/select/demo/placement-debug.tsx b/components/select/demo/placement-debug.tsx
@@ -15,12 +15,12 @@ const randomOptions = (count?: number) => {
 };
 
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');
+  const [placement, setPlacement] = useState<SelectCommonPlacement>('topLeft');
   const [open, setOpen] = useState(false);
   const [options, setOptions] = useState(() => randomOptions(3));
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (
diff --git a/components/select/demo/placement.tsx b/components/select/demo/placement.tsx
@@ -5,10 +5,10 @@ import { Radio, Select } from 'antd';
 type SelectCommonPlacement = SelectProps['placement'];
 
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');
+  const [placement, setPlacement] = useState<SelectCommonPlacement>('topLeft');
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (
diff --git a/components/steps/demo/progress-debug.tsx b/components/steps/demo/progress-debug.tsx
@@ -3,7 +3,7 @@ import type { StepsProps } from 'antd';
 import { Button, Space, Steps } from 'antd';
 
 const App: React.FC = () => {
-  const [percent, setPercentage] = useState<number | undefined>(0);
+  const [percent, setPercent] = useState<number | undefined>(0);
   const [current, setCurrent] = useState(1);
   const [status, setStatus] = useState<StepsProps['status']>('process');
   const content = 'This is a content.';
@@ -25,10 +25,10 @@ const App: React.FC = () => {
   return (
     <>
       <Space.Compact block>
-        <Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>
+        <Button onClick={() => setPercent(undefined)}>Percentage to undefined</Button>
         <Button
           onClick={() =>
-            setPercentage((prev) => {
+            setPercent((prev) => {
               const next = (prev ?? 0) + 10;
               return next > 100 ? 0 : next;
             })
diff --git a/components/table/__tests__/Table.filter.test.tsx b/components/table/__tests__/Table.filter.test.tsx
@@ -2010,7 +2010,7 @@ describe('Table.filter', () => {
     ];
 
     const App: React.FC = () => {
-      const [ddd, setData] = React.useState<Array<DataType>>([
+      const [data, setData] = React.useState<Array<DataType>>([
         {
           key: '1',
           name: 'John Brown',
@@ -2089,7 +2089,7 @@ describe('Table.filter', () => {
           <span className="rest-btn" onClick={handleClick}>
             refresh
           </span>
-          <Table columns={cs} dataSource={ddd} />
+          <Table columns={cs} dataSource={data} />
         </div>
       );
     };
diff --git a/components/tour/__tests__/index.test.tsx b/components/tour/__tests__/index.test.tsx
@@ -128,7 +128,7 @@ describe('Tour', () => {
   it('button props onClick', () => {
     const App: React.FC = () => {
       const coverBtnRef = useRef<HTMLButtonElement>(null);
-      const [btnName, steBtnName] = React.useState<string>('defaultBtn');
+      const [btnName, setBtnName] = React.useState<string>('defaultBtn');
       return (
         <>
           <span id="btnName">{btnName}</span>
@@ -143,17 +143,17 @@ describe('Tour', () => {
                 description: '',
                 target: () => coverBtnRef.current!,
                 nextButtonProps: {
-                  onClick: () => steBtnName('nextButton'),
+                  onClick: () => setBtnName('nextButton'),
                 },
               },
               {
                 title: '',
                 target: () => coverBtnRef.current!,
                 prevButtonProps: {
-                  onClick: () => steBtnName('prevButton'),
+                  onClick: () => setBtnName('prevButton'),
                 },
                 nextButtonProps: {
-                  onClick: () => steBtnName('finishButton'),
+                  onClick: () => setBtnName('finishButton'),
                 },
               },
             ]}
diff --git a/components/tree-select/demo/placement.tsx b/components/tree-select/demo/placement.tsx
@@ -37,10 +37,10 @@ const treeData = [
   },
 ];
 const App: React.FC = () => {
-  const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');
+  const [placement, setPlacement] = useState<SelectCommonPlacement>('topLeft');
 
   const placementChange = (e: RadioChangeEvent) => {
-    SetPlacement(e.target.value);
+    setPlacement(e.target.value);
   };
 
   return (
diff --git a/components/typography/__tests__/ellipsis.test.tsx b/components/typography/__tests__/ellipsis.test.tsx
diff --git a/eslint.config.mjs b/eslint.config.mjs
