refactoring: use hook replace LocaleReceiver (#40870)

* chore: rename useLocaleReceiver => useLocale * refactoring: use hook replace LocaleReceiver * fix * update snap * fix * update snap * fix * rename
2025-01-18 14:13:37 +08:00 · 2023-02-22 18:18:26 +08:00 · 2023-02-22 18:18:26 +08:00 · 288b10bd10
commit 288b10bd10
parent 5459bf65b5
21 changed files with 615 additions and 696 deletions
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@ -10,7 +10,7 @@ import type {
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import LocaleReceiver from '../locale/LocaleReceiver';
+import useLocale from '../locale/useLocale';
 import CalendarHeader from './Header';
 import enUS from './locale/en_US';

@ -236,9 +236,9 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
      [monthFullCellRender, monthCellRender],
    );

+    const contextLocale = useLocale('Calendar', getDefaultLocale);
+
    return wrapSSR(
-      <LocaleReceiver componentName="Calendar" defaultLocale={getDefaultLocale}>
-        {(contextLocale) => (
      <div
        className={classNames(
          calendarPrefixCls,
@ -267,29 +267,26 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
            generateConfig={generateConfig}
            mode={mergedMode}
            fullscreen={fullscreen}
-                locale={contextLocale.lang}
+            locale={contextLocale?.lang}
            validRange={validRange}
            onChange={onInternalSelect}
            onModeChange={triggerModeChange}
          />
        )}
-
        <RCPickerPanel
          value={mergedValue}
          prefixCls={prefixCls}
-              locale={contextLocale.lang}
+          locale={contextLocale?.lang}
          generateConfig={generateConfig}
          dateRender={dateRender}
-              monthCellRender={(date) => monthRender(date, contextLocale.lang)}
+          monthCellRender={(date) => monthRender(date, contextLocale?.lang)}
          onSelect={onInternalSelect}
          mode={panelMode}
          picker={panelMode}
          disabledDate={mergedDisabledDate}
          hideHeader
        />
-          </div>
-        )}
-      </LocaleReceiver>,
+      </div>,
    );
  };

--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@ -3,13 +3,14 @@ import IconContext from '@ant-design/icons/lib/components/Context';
 import { FormProvider as RcFormProvider } from 'rc-field-form';
 import type { ValidateMessages } from 'rc-field-form/lib/interface';
 import useMemo from 'rc-util/lib/hooks/useMemo';
-import * as React from 'react';
 import type { ReactElement } from 'react';
+import * as React from 'react';
 import type { Options } from 'scroll-into-view-if-needed';
 import type { RequiredMark } from '../form/Form';
 import type { Locale } from '../locale';
 import LocaleProvider, { ANT_MARK } from '../locale';
-import LocaleReceiver from '../locale/LocaleReceiver';
+import type { LocaleContextProps } from '../locale/context';
+import LocaleContext from '../locale/context';
 import defaultLocale from '../locale/en_US';
 import { DesignTokenContext } from '../theme/internal';
 import defaultSeedToken from '../theme/themes/seed';
@ -313,17 +314,11 @@ const ConfigProvider: React.FC<ConfigProviderProps> & {
  ConfigContext: typeof ConfigContext;
  SizeContext: typeof SizeContext;
  config: typeof setGlobalConfig;
-} = (props) => (
-  <LocaleReceiver>
-    {(_, __, legacyLocale) => (
-      <ConfigConsumer>
-        {(context) => (
-          <ProviderChildren parentContext={context} legacyLocale={legacyLocale} {...props} />
-        )}
-      </ConfigConsumer>
-    )}
-  </LocaleReceiver>
-);
+} = (props) => {
+  const context = React.useContext<ConfigConsumerProps>(ConfigContext);
+  const antLocale = React.useContext<LocaleContextProps | undefined>(LocaleContext);
+  return <ProviderChildren parentContext={context} legacyLocale={antLocale!} {...props} />;
+};

 ConfigProvider.ConfigContext = ConfigContext;
 ConfigProvider.SizeContext = SizeContext;
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@ -13,13 +13,13 @@ import { ConfigContext } from '../../config-provider';
 import DisabledContext from '../../config-provider/DisabledContext';
 import SizeContext from '../../config-provider/SizeContext';
 import { FormItemInputContext } from '../../form/context';
+import useLocale from '../../locale/useLocale';
 import { useCompactItemContext } from '../../space/Compact';
-import LocaleReceiver from '../../locale/LocaleReceiver';
 import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
+import warning from '../../_util/warning';
 import enUS from '../locale/en_US';
 import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import type { CommonPickerMethods, PickerComponentClass } from './interface';
-import warning from '../../_util/warning';

 import useStyle from '../style';

@ -102,12 +102,11 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
      blur: () => innerRef.current?.blur(),
    }));

-    return wrapSSR(
-      <LocaleReceiver componentName="DatePicker" defaultLocale={enUS}>
-        {(contextLocale) => {
-          const locale = { ...contextLocale, ...props.locale };
+    const contextLocale = useLocale('Calendar', enUS);

-          return (
+    const locale = { ...contextLocale, ...props.locale! };
+
+    return wrapSSR(
      <RCRangePicker<DateType>
        separator={
          <span aria-label="to" className={`${prefixCls}-separator`}>
@ -149,10 +148,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
        components={Components}
        direction={direction}
        dropdownClassName={classNames(hashId, popupClassName || dropdownClassName)}
-            />
-          );
-        }}
-      </LocaleReceiver>,
+      />,
    );
  });

--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@ -13,7 +13,7 @@ import { ConfigContext } from '../../config-provider';
 import DisabledContext from '../../config-provider/DisabledContext';
 import SizeContext from '../../config-provider/SizeContext';
 import { FormItemInputContext } from '../../form/context';
-import LocaleReceiver from '../../locale/LocaleReceiver';
+import useLocale from '../../locale/useLocale';
 import { useCompactItemContext } from '../../space/Compact';
 import type { InputStatus } from '../../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
@ -122,12 +122,11 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
          </>
        );

-        return wrapSSR(
-          <LocaleReceiver componentName="DatePicker" defaultLocale={enUS}>
-            {(contextLocale) => {
-              const locale = { ...contextLocale, ...props.locale };
+        const contextLocale = useLocale('DatePicker', enUS);

-              return (
+        const locale = { ...contextLocale, ...props.locale! };
+
+        return wrapSSR(
          <RCPicker<DateType>
            ref={innerRef}
            placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
@ -170,10 +169,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
              rootClassName,
              popupClassName || dropdownClassName,
            )}
-                />
-              );
-            }}
-          </LocaleReceiver>,
+          />,
        );
      },
    );
--- a/components/empty/index.tsx
+++ b/components/empty/index.tsx
@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
-import LocaleReceiver from '../locale/LocaleReceiver';
+import useLocale from '../locale/useLocale';
 import DefaultEmptyImg from './empty';
 import SimpleEmptyImg from './simple';

@ -46,10 +46,9 @@ const Empty: CompoundedComponent = ({
  const prefixCls = getPrefixCls('empty', customizePrefixCls);
  const [wrapSSR, hashId] = useStyle(prefixCls);

-  return wrapSSR(
-    <LocaleReceiver componentName="Empty">
-      {(locale: TransferLocale) => {
-        const des = typeof description !== 'undefined' ? description : locale.description;
+  const locale = useLocale('Empty');
+
+  const des = typeof description !== 'undefined' ? description : locale?.description;
  const alt = typeof des === 'string' ? des : 'empty';

  let imageNode: React.ReactNode = null;
@ -60,7 +59,7 @@ const Empty: CompoundedComponent = ({
    imageNode = image;
  }

-        return (
+  return wrapSSR(
    <div
      className={classNames(
        hashId,
@ -79,10 +78,7 @@ const Empty: CompoundedComponent = ({
      </div>
      {des && <div className={`${prefixCls}-description`}>{des}</div>}
      {children && <div className={`${prefixCls}-footer`}>{children}</div>}
-          </div>
-        );
-      }}
-    </LocaleReceiver>,
+    </div>,
  );
 };

--- a/components/form/FormItemLabel.tsx
+++ b/components/form/FormItemLabel.tsx
@ -3,8 +3,8 @@ import classNames from 'classnames';
 import * as React from 'react';
 import type { ColProps } from '../grid/col';
 import Col from '../grid/col';
-import { useLocaleReceiver } from '../locale/LocaleReceiver';
 import defaultLocale from '../locale/en_US';
+import useLocale from '../locale/useLocale';
 import type { TooltipProps } from '../tooltip';
 import Tooltip from '../tooltip';
 import type { FormContextProps } from './context';
@ -53,7 +53,7 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixC
  requiredMark,
  tooltip,
 }) => {
-  const [formLocale] = useLocaleReceiver('Form');
+  const formLocale = useLocale('Form');

  const {
    vertical,
--- a/components/locale-provider/LocaleReceiver.ts
+++ b/components/locale-provider/LocaleReceiver.ts
@ -1,6 +1,6 @@
 // locale-provider 文件夹的移除需要修改 @ant-design/tools 和 antd-img-crop
-import LocaleReceiver from '../locale/LocaleReceiver';
+import useLocale from '../locale/useLocale';

-export * from '../locale/LocaleReceiver';
+export * from '../locale/useLocale';

-export default LocaleReceiver;
+export default useLocale;
--- a/components/locale/LocaleReceiver.ts
+++ b/components/locale/LocaleReceiver.ts
@ -1,64 +0,0 @@
-import * as React from 'react';
-import type { Locale } from '.';
-import type { LocaleContextProps } from './context';
-import LocaleContext from './context';
-import defaultLocaleData from './en_US';
-
-export type LocaleComponentName = Exclude<keyof Locale, 'locale'>;
-
-export interface LocaleReceiverProps<C extends LocaleComponentName = LocaleComponentName> {
-  componentName?: C;
-  defaultLocale?: Locale[C] | (() => Locale[C]);
-  children: (
-    locale: NonNullable<Locale[C]>,
-    localeCode: string,
-    fullLocale: Locale,
-  ) => React.ReactElement;
-}
-
-const LocaleReceiver = <C extends LocaleComponentName = LocaleComponentName>(
-  props: LocaleReceiverProps<C>,
-) => {
-  const { componentName = 'global' as C, defaultLocale, children } = props;
-  const antLocale = React.useContext<LocaleContextProps | undefined>(LocaleContext);
-
-  const getLocale = React.useMemo<NonNullable<Locale[C]>>(() => {
-    const locale = defaultLocale || defaultLocaleData[componentName];
-    const localeFromContext = antLocale?.[componentName] ?? {};
-    return {
-      ...(locale instanceof Function ? locale() : locale),
-      ...(localeFromContext || {}),
-    };
-  }, [componentName, defaultLocale, antLocale]);
-
-  const getLocaleCode = React.useMemo<string>(() => {
-    const localeCode = antLocale && antLocale.locale;
-    // Had use LocaleProvide but didn't set locale
-    if (antLocale && antLocale.exist && !localeCode) {
-      return defaultLocaleData.locale;
-    }
-    return localeCode!;
-  }, [antLocale]);
-
-  return children(getLocale, getLocaleCode, antLocale!);
-};
-
-export default LocaleReceiver;
-
-export const useLocaleReceiver = <C extends LocaleComponentName = LocaleComponentName>(
-  componentName: C,
-  defaultLocale?: Locale[C] | (() => Locale[C]),
-): [Locale[C]] => {
-  const antLocale = React.useContext<LocaleContextProps | undefined>(LocaleContext);
-
-  const getLocale = React.useMemo<NonNullable<Locale[C]>>(() => {
-    const locale = defaultLocale || defaultLocaleData[componentName];
-    const localeFromContext = antLocale?.[componentName] ?? {};
-    return {
-      ...(typeof locale === 'function' ? locale() : locale),
-      ...(localeFromContext || {}),
-    };
-  }, [componentName, defaultLocale, antLocale]);
-
-  return [getLocale];
-};
--- a/components/locale/useLocale.ts
+++ b/components/locale/useLocale.ts
@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { Locale } from '.';
+import type { LocaleContextProps } from './context';
+import LocaleContext from './context';
+import defaultLocaleData from './en_US';
+
+export type LocaleComponentName = Exclude<keyof Locale, 'locale'>;
+
+const useLocale = <C extends LocaleComponentName = LocaleComponentName>(
+  componentName: C,
+  defaultLocale?: Locale[C] | (() => Locale[C]),
+): Locale[C] => {
+  const antLocale = React.useContext<LocaleContextProps | undefined>(LocaleContext);
+  return React.useMemo<NonNullable<Locale[C]>>(() => {
+    const locale = defaultLocale || defaultLocaleData[componentName];
+    const localeFromContext = antLocale?.[componentName] ?? {};
+    return {
+      ...(typeof locale === 'function' ? locale() : locale),
+      ...(localeFromContext || {}),
+    };
+  }, [componentName, defaultLocale, antLocale]);
+};
+
+export default useLocale;
--- a/components/modal/ConfirmDialog.tsx
+++ b/components/modal/ConfirmDialog.tsx
@ -5,7 +5,7 @@ import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
 import classNames from 'classnames';
 import * as React from 'react';
 import ConfigProvider from '../config-provider';
-import LocaleReceiver from '../locale/LocaleReceiver';
+import useLocale from '../locale/useLocale';
 import ActionButton from '../_util/ActionButton';
 import { getTransitionName } from '../_util/motion';
 import warning from '../_util/warning';
@ -81,9 +81,8 @@ export function ConfirmContent(

  const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';

-  return (
-    <LocaleReceiver componentName="Modal">
-      {(locale) => {
+  const locale = useLocale('Modal');
+
  const mergedLocale = staticLocale || locale;

  const cancelButton = mergedOkCancel && (
@ -126,12 +125,9 @@ export function ConfirmContent(
      )}
    </div>
  );
-      }}
-    </LocaleReceiver>
-  );
 }

-const ConfirmDialog = (props: ConfirmDialogProps) => {
+const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
  const {
    close,
    zIndex,
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@ -9,7 +9,7 @@ import { NoCompactStyle } from '../space/Compact';
 import { getTransitionName } from '../_util/motion';
 import { canUseDocElement } from '../_util/styleChecker';
 import warning from '../_util/warning';
-import { renderCloseIcon, renderFooter } from './PurePanel';
+import { Footer, renderCloseIcon } from './PurePanel';
 import useStyle from './style';

 type MousePosition = { x: number; y: number } | null;
@ -209,11 +209,13 @@ const Modal: React.FC<ModalProps> = (props) => {
          prefixCls={prefixCls}
          rootClassName={classNames(hashId, rootClassName)}
          wrapClassName={wrapClassNameExtended}
-          footer={renderFooter({
-            ...props,
-            onOk: handleOk,
-            onCancel: handleCancel,
-          })}
+          footer={
+            props.footer === null ? (
+              props.footer
+            ) : (
+              <Footer {...props} onOk={handleOk} onCancel={handleCancel} />
+            )
+          }
          visible={open ?? visible}
          mousePosition={restProps.mousePosition ?? mousePosition}
          onClose={handleCancel}
--- a/components/modal/PurePanel.tsx
+++ b/components/modal/PurePanel.tsx
@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 import { Panel } from 'rc-dialog';
@ -6,10 +7,10 @@ import * as React from 'react';
 import Button from '../button';
 import { convertLegacyProps } from '../button/button';
 import { ConfigContext } from '../config-provider';
-import LocaleReceiver from '../locale/LocaleReceiver';
+import useLocale from '../locale/useLocale';
 import { ConfirmContent } from './ConfirmDialog';
 import { getConfirmLocale } from './locale';
-import type { ModalProps, ModalFuncProps } from './Modal';
+import type { ModalFuncProps, ModalProps } from './Modal';
 import useStyle from './style';

 export interface PurePanelProps
@ -27,8 +28,14 @@ export function renderCloseIcon(prefixCls: string, closeIcon?: React.ReactNode)
  );
 }

-export function renderFooter(
-  props: Pick<
+interface FooterProps {
+  onOk?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+  onCancel?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+}
+
+export const Footer: React.FC<
+  FooterProps &
+    Pick<
      ModalProps,
      | 'footer'
      | 'okText'
@ -37,11 +44,8 @@ export function renderFooter(
      | 'confirmLoading'
      | 'okButtonProps'
      | 'cancelButtonProps'
-  > & {
-    onOk?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-    onCancel?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-  },
-) {
+    >
+> = (props) => {
  const {
    okText,
    okType = 'primary',
@ -54,12 +58,12 @@ export function renderFooter(
    footer,
  } = props;

+  const locale = useLocale('Modal', getConfirmLocale());
+
  return footer === undefined ? (
-    <LocaleReceiver componentName="Modal" defaultLocale={getConfirmLocale()}>
-      {(locale) => (
    <>
      <Button onClick={onCancel} {...cancelButtonProps}>
-            {cancelText || locale!.cancelText}
+        {cancelText || locale?.cancelText}
      </Button>
      <Button
        {...convertLegacyProps(okType)}
@ -67,17 +71,15 @@ export function renderFooter(
        onClick={onOk}
        {...okButtonProps}
      >
-            {okText || locale!.okText}
+        {okText || locale?.okText}
      </Button>
    </>
-      )}
-    </LocaleReceiver>
  ) : (
-    footer
+    (footer as React.ReactElement)
  );
-}
+};

-export default function PurePanel(props: PurePanelProps) {
+const PurePanel: React.FC<PurePanelProps> = (props) => {
  const {
    prefixCls: customizePrefixCls,
    className,
@ -117,7 +119,7 @@ export default function PurePanel(props: PurePanelProps) {
    additionalProps = {
      closable: closable ?? true,
      title,
-      footer: renderFooter(props),
+      footer: props.footer === null ? props.footer : <Footer {...props} />,
      children,
    };
  }
@ -138,4 +140,6 @@ export default function PurePanel(props: PurePanelProps) {
      {...additionalProps}
    />
  );
-}
+};
+
+export default PurePanel;
--- a/components/modal/useModal/HookModal.tsx
+++ b/components/modal/useModal/HookModal.tsx
@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ConfigContext } from '../../config-provider';
-import LocaleReceiver from '../../locale/LocaleReceiver';
 import defaultLocale from '../../locale/en_US';
+import useLocale from '../../locale/useLocale';
 import ConfirmDialog from '../ConfirmDialog';
 import type { ModalFuncProps } from '../Modal';

@ -46,9 +46,9 @@ const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> =

  const mergedOkCancel = innerConfig.okCancel ?? innerConfig.type === 'confirm';

+  const contextLocale = useLocale('Modal', defaultLocale.Modal);
+
  return (
-    <LocaleReceiver componentName="Modal" defaultLocale={defaultLocale.Modal}>
-      {(contextLocale) => (
    <ConfirmDialog
      prefixCls={prefixCls}
      rootPrefixCls={rootPrefixCls}
@ -57,13 +57,11 @@ const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> =
      open={open}
      afterClose={afterClose}
      okText={
-            innerConfig.okText || (mergedOkCancel ? contextLocale.okText : contextLocale.justOkText)
+        innerConfig.okText || (mergedOkCancel ? contextLocale?.okText : contextLocale?.justOkText)
      }
      direction={direction}
-          cancelText={innerConfig.cancelText || contextLocale.cancelText}
+      cancelText={innerConfig.cancelText || contextLocale?.cancelText}
    />
-      )}
-    </LocaleReceiver>
  );
 };

--- a/components/pagination/Pagination.tsx
+++ b/components/pagination/Pagination.tsx
@ -3,13 +3,13 @@ import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import classNames from 'classnames';
-import type { PaginationProps as RcPaginationProps, PaginationLocale } from 'rc-pagination';
+import type { PaginationLocale, PaginationProps as RcPaginationProps } from 'rc-pagination';
 import RcPagination from 'rc-pagination';
 import enUS from 'rc-pagination/lib/locale/en_US';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
-import LocaleReceiver from '../locale/LocaleReceiver';
+import useLocale from '../locale/useLocale';
 import { MiddleSelect, MiniSelect } from './Select';
 import useStyle from './style';

@ -90,18 +90,13 @@ const Pagination: React.FC<PaginationProps> = ({
      [prevIcon, nextIcon] = [nextIcon, prevIcon];
      [jumpPrevIcon, jumpNextIcon] = [jumpNextIcon, jumpPrevIcon];
    }
-    return {
-      prevIcon,
-      nextIcon,
-      jumpPrevIcon,
-      jumpNextIcon,
-    };
+    return { prevIcon, nextIcon, jumpPrevIcon, jumpNextIcon };
  };

-  return (
-    <LocaleReceiver componentName="Pagination" defaultLocale={enUS}>
-      {(contextLocale) => {
+  const contextLocale = useLocale('Pagination', enUS);
+
  const locale = { ...contextLocale, ...customLocale };
+
  const isSmall = size === 'small' || !!(xs && !size && responsive);
  const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
  const extendedClassName = classNames(
@ -126,9 +121,6 @@ const Pagination: React.FC<PaginationProps> = ({
      showSizeChanger={mergedShowSizeChanger}
    />,
  );
-      }}
-    </LocaleReceiver>
-  );
 };

 if (process.env.NODE_ENV !== 'production') {
--- a/components/popconfirm/PurePanel.tsx
+++ b/components/popconfirm/PurePanel.tsx
@ -1,15 +1,15 @@
-import * as React from 'react';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import classNames from 'classnames';
+import * as React from 'react';
 import type { PopconfirmProps } from '.';
 import Button from '../button';
 import { convertLegacyProps } from '../button/button';
-import ActionButton from '../_util/ActionButton';
-import LocaleReceiver from '../locale/LocaleReceiver';
-import defaultLocale from '../locale/en_US';
-import { getRenderPropValue } from '../_util/getRenderPropValue';
 import { ConfigContext } from '../config-provider';
+import defaultLocale from '../locale/en_US';
+import useLocale from '../locale/useLocale';
 import PopoverPurePanel from '../popover/PurePanel';
+import ActionButton from '../_util/ActionButton';
+import { getRenderPropValue } from '../_util/getRenderPropValue';

 import useStyle from './style';

@ -56,9 +56,9 @@ export const Overlay: React.FC<OverlayProps> = (props) => {

  const { getPrefixCls } = React.useContext(ConfigContext);

+  const contextLocale = useLocale('Popconfirm', defaultLocale.Popconfirm);
+
  return (
-    <LocaleReceiver componentName="Popconfirm" defaultLocale={defaultLocale.Popconfirm}>
-      {(contextLocale) => (
    <div className={`${prefixCls}-inner-content`}>
      <div className={`${prefixCls}-message`}>
        {icon && <span className={`${prefixCls}-message-icon`}>{icon}</span>}
@ -76,7 +76,7 @@ export const Overlay: React.FC<OverlayProps> = (props) => {
      <div className={`${prefixCls}-buttons`}>
        {showCancel && (
          <Button onClick={onCancel} size="small" {...cancelButtonProps}>
-                {cancelText ?? contextLocale.cancelText}
+            {cancelText ?? contextLocale?.cancelText}
          </Button>
        )}
        <ActionButton
@ -87,12 +87,10 @@ export const Overlay: React.FC<OverlayProps> = (props) => {
          quitOnNullishReturnValue
          emitEvent
        >
-              {okText ?? contextLocale.okText}
+          {okText ?? contextLocale?.okText}
        </ActionButton>
      </div>
    </div>
-      )}
-    </LocaleReceiver>
  );
 };

--- a/components/qrcode/index.tsx
+++ b/components/qrcode/index.tsx
@ -1,16 +1,16 @@
-import React, { useMemo, useContext } from 'react';
-import { QRCodeCanvas } from 'qrcode.react';
-import classNames from 'classnames';
 import { ReloadOutlined } from '@ant-design/icons';
-import { ConfigContext } from '../config-provider';
-import LocaleReceiver from '../locale/LocaleReceiver';
-import type { ConfigConsumerProps } from '../config-provider';
-import type { QRCodeProps, QRPropsCanvas } from './interface';
-import warning from '../_util/warning';
-import useStyle from './style/index';
-import Spin from '../spin';
+import classNames from 'classnames';
+import { QRCodeCanvas } from 'qrcode.react';
+import React, { useContext, useMemo } from 'react';
 import Button from '../button';
+import type { ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
+import useLocale from '../locale/useLocale';
+import Spin from '../spin';
 import theme from '../theme';
+import warning from '../_util/warning';
+import type { QRCodeProps, QRPropsCanvas } from './interface';
+import useStyle from './style/index';

 const { useToken } = theme;

@ -53,6 +53,8 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
    };
  }, [errorLevel, color, icon, iconSize, size, value]);

+  const locale = useLocale('QRCode');
+
  if (!value) {
    if (process.env.NODE_ENV !== 'production') {
      warning(false, 'QRCode', 'need to receive `value` props');
@ -73,18 +75,16 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
  });

  return wrapSSR(
-    <LocaleReceiver componentName="QRCode">
-      {(locale) => (
    <div style={{ ...style, width: size, height: size }} className={cls}>
      {status !== 'active' && (
        <div className={`${prefixCls}-mask`}>
          {status === 'loading' && <Spin />}
          {status === 'expired' && (
            <>
-                  <p className={`${prefixCls}-expired`}>{locale.expired}</p>
+              <p className={`${prefixCls}-expired`}>{locale?.expired}</p>
              {typeof onRefresh === 'function' && (
                <Button type="link" icon={<ReloadOutlined />} onClick={onRefresh}>
-                      {locale.refresh}
+                  {locale?.refresh}
                </Button>
              )}
            </>
@ -92,9 +92,7 @@ const QRCode: React.FC<QRCodeProps> = (props) => {
        </div>
      )}
      <QRCodeCanvas {...qrCodeProps} />
-        </div>
-      )}
-    </LocaleReceiver>,
+    </div>,
  );
 };

--- a/components/tour/panelRender.tsx
+++ b/components/tour/panelRender.tsx
@ -5,7 +5,7 @@ import React from 'react';
 import type { ButtonProps } from '../button';
 import Button from '../button';
 import defaultLocale from '../locale/en_US';
-import LocaleReceiver from '../locale/LocaleReceiver';
+import useLocale from '../locale/useLocale';
 import type { TourStepProps } from './interface';

 function isValidNode(node: ReactNode): boolean {
@ -92,9 +92,9 @@ const TourPanel: React.FC<TourPanelProps> = ({ stepProps, current, type, indicat
    ghost: mergedType === 'primary',
  };

+  const contextLocale = useLocale('Tour', defaultLocale.Tour);
+
  return (
-    <LocaleReceiver componentName="Tour" defaultLocale={defaultLocale.Tour}>
-      {(contextLocale) => (
    <div
      className={classNames(
        mergedType === 'primary' ? `${prefixCls}-primary` : '',
@ -119,7 +119,7 @@ const TourPanel: React.FC<TourPanelProps> = ({ stepProps, current, type, indicat
                size="small"
                className={classNames(`${prefixCls}-prev-btn`, prevButtonProps?.className)}
              >
-                    {prevButtonProps?.children ?? contextLocale.Previous}
+                {prevButtonProps?.children ?? contextLocale?.Previous}
              </Button>
            ) : null}
            <Button
@ -130,14 +130,12 @@ const TourPanel: React.FC<TourPanelProps> = ({ stepProps, current, type, indicat
              className={classNames(`${prefixCls}-next-btn`, nextButtonProps?.className)}
            >
              {nextButtonProps?.children ??
-                    (isLastStep ? contextLocale.Finish : contextLocale.Next)}
+                (isLastStep ? contextLocale?.Finish : contextLocale?.Next)}
            </Button>
          </div>
        </div>
      </div>
    </div>
-      )}
-    </LocaleReceiver>
  );
 };

--- a/components/transfer/ListItem.tsx
+++ b/components/transfer/ListItem.tsx
@ -3,8 +3,8 @@ import classNames from 'classnames';
 import * as React from 'react';
 import type { KeyWiseTransferItem } from '.';
 import Checkbox from '../checkbox';
-import LocaleReceiver from '../locale/LocaleReceiver';
 import defaultLocale from '../locale/en_US';
+import useLocale from '../locale/useLocale';
 import TransButton from '../_util/transButton';

 type ListItemProps<RecordType> = {
@ -43,13 +43,12 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
    title = String(renderedText);
  }

-  return (
-    <LocaleReceiver componentName="Transfer" defaultLocale={defaultLocale.Transfer}>
-      {(contextLocale) => {
+  const contextLocale = useLocale('Transfer', defaultLocale.Transfer);
+
  const liProps: React.HTMLAttributes<HTMLLIElement> = { className, title };
+
  const labelNode = <span className={`${prefixCls}-content-item-text`}>{renderedEl}</span>;

-        // Show remove
  if (showRemove) {
    return (
      <li {...liProps}>
@ -57,7 +56,7 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
        <TransButton
          disabled={disabled || item.disabled}
          className={`${prefixCls}-content-item-remove`}
-                aria-label={contextLocale.remove}
+          aria-label={contextLocale?.remove}
          onClick={() => {
            onRemove?.(item);
          }}
@ -70,6 +69,7 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R

  // Default click to select
  liProps.onClick = disabled || item.disabled ? undefined : () => onClick(item);
+
  return (
    <li {...liProps}>
      <Checkbox
@ -80,9 +80,6 @@ const ListItem = <RecordType extends KeyWiseTransferItem>(props: ListItemProps<R
      {labelNode}
    </li>
  );
-      }}
-    </LocaleReceiver>
-  );
 };

 export default React.memo(ListItem);
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@ -7,7 +7,7 @@ import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import type { FormItemStatusContextProps } from '../form/context';
 import { FormItemInputContext } from '../form/context';
 import defaultLocale from '../locale/en_US';
-import LocaleReceiver from '../locale/LocaleReceiver';
+import useLocale from '../locale/useLocale';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { groupDisabledKeysMap, groupKeysMap } from '../_util/transKeys';
@ -367,12 +367,13 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
    hashId,
  );

-  return wrapSSR(
-    <LocaleReceiver componentName="Transfer" defaultLocale={defaultLocale.Transfer}>
-      {(contextLocale) => {
-        const listLocale = getLocale(contextLocale);
+  const contextLocale = useLocale('Transfer', defaultLocale.Transfer);
+
+  const listLocale = getLocale(contextLocale!);
+
  const [leftTitle, rightTitle] = getTitles(listLocale);
-        return (
+
+  return wrapSSR(
    <div className={cls} style={style}>
      <List<KeyWise<RecordType>>
        prefixCls={`${prefixCls}-list`}
@ -435,10 +436,7 @@ const Transfer = <RecordType extends TransferItem = TransferItem>(
        pagination={mergedPagination}
        {...listLocale}
      />
-          </div>
-        );
-      }}
-    </LocaleReceiver>,
+    </div>,
  );
 };

--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@ -12,11 +12,11 @@ import omit from 'rc-util/lib/omit';
 import { composeRef } from 'rc-util/lib/ref';
 import * as React from 'react';
 import { ConfigContext } from '../../config-provider';
-import { useLocaleReceiver } from '../../locale/LocaleReceiver';
-import TransButton from '../../_util/transButton';
-import { isStyleSupport } from '../../_util/styleChecker';
+import useLocale from '../../locale/useLocale';
 import type { TooltipProps } from '../../tooltip';
 import Tooltip from '../../tooltip';
+import { isStyleSupport } from '../../_util/styleChecker';
+import TransButton from '../../_util/transButton';
 import Editable from '../Editable';
 import useMergedConfig from '../hooks/useMergedConfig';
 import useUpdatedEffect from '../hooks/useUpdatedEffect';
@ -135,7 +135,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
    ...restProps
  } = props;
  const { getPrefixCls, direction } = React.useContext(ConfigContext);
-  const textLocale = useLocaleReceiver('Text')[0]!; // Force TS get this
+  const textLocale = useLocale('Text');

  const typographyRef = React.useRef<HTMLElement>(null);
  const editIconRef = React.useRef<HTMLDivElement>(null);
@ -408,7 +408,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
    if (symbol) {
      expandContent = symbol;
    } else {
-      expandContent = textLocale.expand;
+      expandContent = textLocale?.expand;
    }

    return (
@ -416,7 +416,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
        key="expand"
        className={`${prefixCls}-expand`}
        onClick={onExpandClick}
-        aria-label={textLocale.expand}
+        aria-label={textLocale?.expand}
      >
        {expandContent}
      </a>
@ -429,7 +429,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {

    const { icon, tooltip } = editConfig;

-    const editTitle = toArray(tooltip)[0] || textLocale.edit;
+    const editTitle = toArray(tooltip)[0] || textLocale?.edit;
    const ariaLabel = typeof editTitle === 'string' ? editTitle : '';

    return triggerType.includes('icon') ? (
@ -456,9 +456,9 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
    const iconNodes = toList(icon);

    const copyTitle = copied
-      ? getNode(tooltipNodes[1], textLocale.copied)
-      : getNode(tooltipNodes[0], textLocale.copy);
-    const systemStr = copied ? textLocale.copied : textLocale.copy;
+      ? getNode(tooltipNodes[1], textLocale?.copied)
+      : getNode(tooltipNodes[0], textLocale?.copy);
+    const systemStr = copied ? textLocale?.copied : textLocale?.copy;
    const ariaLabel = typeof copyTitle === 'string' ? copyTitle : systemStr;

    return (
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@ -6,8 +6,8 @@ import * as React from 'react';
 import { flushSync } from 'react-dom';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
-import LocaleReceiver from '../locale/LocaleReceiver';
 import defaultLocale from '../locale/en_US';
+import useLocale from '../locale/useLocale';
 import warning from '../_util/warning';
 import type { RcFile, ShowUploadListInterface, UploadChangeParam, UploadFile } from './interface';
 import { UploadProps } from './interface';
@ -339,10 +339,8 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr

  const [wrapSSR, hashId] = useStyle(prefixCls);

-  const renderUploadList = (button?: React.ReactNode, buttonVisible?: boolean) =>
-    showUploadList ? (
-      <LocaleReceiver componentName="Upload" defaultLocale={defaultLocale.Upload}>
-        {(contextLocale) => {
+  const contextLocale = useLocale('Upload', defaultLocale.Upload);
+
  const {
    showRemoveIcon,
    showPreviewIcon,
@ -350,8 +348,12 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
    removeIcon,
    previewIcon,
    downloadIcon,
-          } =
-            typeof showUploadList === 'boolean' ? ({} as ShowUploadListInterface) : showUploadList;
+  } = typeof showUploadList === 'boolean' ? ({} as ShowUploadListInterface) : showUploadList;
+
+  const renderUploadList = (button?: React.ReactNode, buttonVisible?: boolean) => {
+    if (!showUploadList) {
+      return button;
+    }
    return (
      <UploadList
        prefixCls={prefixCls}
@ -376,11 +378,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
        itemRender={itemRender}
      />
    );
-        }}
-      </LocaleReceiver>
-    ) : (
-      button
-    );
+  };

  const rtlCls = {
    [`${prefixCls}-rtl`]: direction === 'rtl',