perf: Improve Components render perfermance when it's not reponsive (#34122)

* perf: Improve List render perfermance when grid is undefined

https://github.com/ant-design/ant-design/pull/34106/files#diff-9e016ea02fe7dd0ea42d8774d29d45e1a10b8dd108de9c89d50c828c74b993b8R146-R151

* chore: do not export useBreakpoint param

Co-authored-by: zombiej <smith3816@gmail.com>

components/avatar/avatar.tsx

@@ -102,7 +102,10 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
 
   const size = customSize === 'default' ? groupSize : customSize;
 
-  const screens = useBreakpoint();
+  const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some(key =>
+    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
+  );
+  const screens = useBreakpoint(needResponsive);
   const responsiveSizeStyle: React.CSSProperties = React.useMemo(() => {
     if (typeof size !== 'object') {
       return {};

components/grid/index.tsx

@@ -1,6 +1,11 @@
 import Row from './row';
 import Col from './col';
-import useBreakpoint from './hooks/useBreakpoint';
+import useInternalBreakpoint from './hooks/useBreakpoint';
+
+// Do not export params
+function useBreakpoint() {
+  return useInternalBreakpoint();
+}
 
 export { RowProps } from './row';
 

components/list/index.tsx

@@ -213,7 +213,10 @@ function List<T>({
     }
   }
 
-  const screens = useBreakpoint();
+  const needResponsive = Object.keys(grid || {}).some(key =>
+    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
+  );
+  const screens = useBreakpoint(needResponsive);
   const currentBreakpoint = React.useMemo(() => {
     for (let i = 0; i < responsiveArray.length; i += 1) {
       const breakpoint: Breakpoint = responsiveArray[i];

components/pagination/Pagination.tsx

@@ -39,9 +39,10 @@ const Pagination: React.FC<PaginationProps> = ({
   size,
   locale: customLocale,
   selectComponentClass,
+  responsive,
   ...restProps
 }) => {
-  const { xs } = useBreakpoint();
+  const { xs } = useBreakpoint(responsive);
 
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('pagination', customizePrefixCls);
@@ -91,7 +92,7 @@ const Pagination: React.FC<PaginationProps> = ({
 
   const renderPagination = (contextLocale: PaginationLocale) => {
     const locale = { ...contextLocale, ...customLocale };
-    const isSmall = size === 'small' || !!(xs && !size && restProps.responsive);
+    const isSmall = size === 'small' || !!(xs && !size && responsive);
     const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
     const extendedClassName = classNames(
       {

components/steps/index.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import omit from 'rc-util/lib/omit';
 import RcSteps from 'rc-steps';
 import type { ProgressDotRender } from 'rc-steps/lib/Steps';
 import CheckOutlined from '@ant-design/icons/CheckOutlined';
@@ -44,8 +43,8 @@ interface StepsType extends React.FC<StepsProps> {
 }
 
 const Steps: StepsType = props => {
-  const { percent, size, className, direction, responsive } = props;
+  const { percent, size, className, direction, responsive, ...restProps } = props;
-  const { xs } = useBreakpoint();
+  const { xs } = useBreakpoint(responsive);
   const { getPrefixCls, direction: rtlDirection } = React.useContext(ConfigContext);
 
   const getDirection = React.useCallback(
@@ -98,7 +97,8 @@ const Steps: StepsType = props => {
   return (
     <RcSteps
       icons={icons}
-      {...omit(props, ['percent', 'responsive'])}
+      {...restProps}
+      size={size}
       direction={getDirection()}
       stepIcon={stepIconRender}
       prefixCls={prefixCls}