feat: add useSize hook (#42252)

components/_util/hooks/useSize.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { SizeType } from '../../config-provider/SizeContext';
+import SizeContext from '../../config-provider/SizeContext';
+
+const useSize = <T extends string>(customizeSize?: T) => {
+  const size = React.useContext<SizeType>(SizeContext);
+  const mergeSize = React.useMemo<T>(() => {
+    if (!customizeSize) {
+      return size as T;
+    }
+    return customizeSize ?? size;
+  }, [customizeSize, size]);
+  return mergeSize;
+};
+
+export default useSize;

components/descriptions/index.tsx

@@ -2,16 +2,15 @@
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
+import useSize from '../_util/hooks/useSize';
 import { cloneElement } from '../_util/reactNode';
 import type { Breakpoint, ScreenMap } from '../_util/responsiveObserver';
 import useResponsiveObserver, { responsiveArray } from '../_util/responsiveObserver';
 import warning from '../_util/warning';
+import { ConfigContext } from '../config-provider';
 import DescriptionsItem from './Item';
 import Row from './Row';
-
 import useStyle from './style';
-import SizeContext from '../config-provider/SizeContext';
 
 export interface DescriptionsContextProps {
   labelStyle?: React.CSSProperties;
@@ -138,8 +137,7 @@ function Descriptions({
   const [screens, setScreens] = React.useState<ScreenMap>({});
   const mergedColumn = getColumn(column, screens);
 
-  const size = React.useContext(SizeContext);
-  const mergedSize = customizeSize ?? size;
+  const mergedSize = useSize(customizeSize);
 
   const [wrapSSR, hashId] = useStyle(prefixCls);
   const responsiveObserver = useResponsiveObserver();