From 07dec4cb00c25cce662ec1165699bcb2e8741663 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 21 Feb 2022 16:48:39 +0800
Subject: [PATCH] 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         | 5 ++++-
 components/grid/index.tsx            | 7 ++++++-
 components/list/index.tsx            | 5 ++++-
 components/pagination/Pagination.tsx | 5 +++--
 components/steps/index.tsx           | 8 ++++----
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/components/avatar/avatar.tsx b/components/avatar/avatar.tsx
index 26028390dd..26b7ccf587 100644
--- a/components/avatar/avatar.tsx
+++ b/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 {};
diff --git a/components/grid/index.tsx b/components/grid/index.tsx
index 80aee3f9be..81474e9641 100644
--- a/components/grid/index.tsx
+++ b/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';
 
diff --git a/components/list/index.tsx b/components/list/index.tsx
index ca6b174bb3..0f4ba9718d 100644
--- a/components/list/index.tsx
+++ b/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];
diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx
index b55a25636f..1974199922 100644
--- a/components/pagination/Pagination.tsx
+++ b/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(
       {
diff --git a/components/steps/index.tsx b/components/steps/index.tsx
index 7e5916cb81..69e5a52795 100644
--- a/components/steps/index.tsx
+++ b/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 { xs } = useBreakpoint();
+  const { percent, size, className, direction, responsive, ...restProps } = props;
+  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}