diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
index c252f2f0f2..b594415add 100644
--- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -195,66 +195,6 @@ exports[`renders ./components/modal/demo/hooks.tsx extend context correctly 1`]
 </div>
 `;
 
-exports[`renders ./components/modal/demo/info.tsx extend context correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center"
-  style="flex-wrap:wrap;margin-bottom:-8px"
->
-  <div
-    class="ant-space-item"
-    style="margin-right:8px;padding-bottom:8px"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Info
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:8px;padding-bottom:8px"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Success
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:8px;padding-bottom:8px"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Error
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
-    style="padding-bottom:8px"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Warning
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
 exports[`renders ./components/modal/demo/locale.tsx extend context correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
@@ -574,6 +514,66 @@ exports[`renders ./components/modal/demo/render-panel.tsx extend context correct
 </div>
 `;
 
+exports[`renders ./components/modal/demo/static-info.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+  style="flex-wrap:wrap;margin-bottom:-8px"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px;padding-bottom:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Info
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px;padding-bottom:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Success
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px;padding-bottom:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Error
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="padding-bottom:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Warning
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/modal/demo/width.tsx extend context correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
diff --git a/components/modal/__tests__/__snapshots__/demo.test.ts.snap b/components/modal/__tests__/__snapshots__/demo.test.ts.snap
index 0cd379ef13..c06e5039bc 100644
--- a/components/modal/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo.test.ts.snap
@@ -195,66 +195,6 @@ exports[`renders ./components/modal/demo/hooks.tsx correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/modal/demo/info.tsx correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center"
-  style="flex-wrap:wrap;margin-bottom:-8px"
->
-  <div
-    class="ant-space-item"
-    style="margin-right:8px;padding-bottom:8px"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Info
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:8px;padding-bottom:8px"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Success
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:8px;padding-bottom:8px"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Error
-      </span>
-    </button>
-  </div>
-  <div
-    class="ant-space-item"
-    style="padding-bottom:8px"
-  >
-    <button
-      class="ant-btn ant-btn-default"
-      type="button"
-    >
-      <span>
-        Warning
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
 exports[`renders ./components/modal/demo/locale.tsx correctly 1`] = `
 <div
   class="ant-space ant-space-horizontal ant-space-align-center"
@@ -574,6 +514,66 @@ exports[`renders ./components/modal/demo/render-panel.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/modal/demo/static-info.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+  style="flex-wrap:wrap;margin-bottom:-8px"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px;padding-bottom:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Info
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px;padding-bottom:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Success
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px;padding-bottom:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Error
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+    style="padding-bottom:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Warning
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/modal/demo/width.tsx correctly 1`] = `
 <button
   class="ant-btn ant-btn-primary"
diff --git a/components/modal/demo/info.md b/components/modal/demo/info.md
deleted file mode 100644
index c3a743ae1c..0000000000
--- a/components/modal/demo/info.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## zh-CN
-
-各种类型的信息提示，只提供一个按钮用于关闭。
-
-## en-US
-
-In the various types of information modal dialog, only one button to close dialog is provided.
diff --git a/components/modal/demo/locale.tsx b/components/modal/demo/locale.tsx
index 968a1dc27a..898c648dee 100644
--- a/components/modal/demo/locale.tsx
+++ b/components/modal/demo/locale.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { Button, Modal, Space } from 'antd';
+import React, { useState } from 'react';
 
 const LocalizedModal = () => {
   const [open, setOpen] = useState(false);
@@ -34,21 +34,28 @@ const LocalizedModal = () => {
   );
 };
 
-const confirm = () => {
-  Modal.confirm({
-    title: 'Confirm',
-    icon: <ExclamationCircleOutlined />,
-    content: 'Bla bla ...',
-    okText: '确认',
-    cancelText: '取消',
-  });
+const App: React.FC = () => {
+  const [modal, contextHolder] = Modal.useModal();
+
+  const confirm = () => {
+    modal.confirm({
+      title: 'Confirm',
+      icon: <ExclamationCircleOutlined />,
+      content: 'Bla bla ...',
+      okText: '确认',
+      cancelText: '取消',
+    });
+  };
+
+  return (
+    <>
+      <Space>
+        <LocalizedModal />
+        <Button onClick={confirm}>Confirm</Button>
+      </Space>
+      {contextHolder}
+    </>
+  );
 };
 
-const App: React.FC = () => (
-  <Space>
-    <LocalizedModal />
-    <Button onClick={confirm}>Confirm</Button>
-  </Space>
-);
-
 export default App;
diff --git a/components/modal/demo/manual.md b/components/modal/demo/manual.md
index 012d00ce48..54fc67d055 100644
--- a/components/modal/demo/manual.md
+++ b/components/modal/demo/manual.md
@@ -1,7 +1,7 @@
 ## zh-CN
 
-手动更新和关闭 `Modal.method` 方式创建的对话框。
+通过返回的 instance 手动更新和关闭对话框。
 
 ## en-US
 
-Manually updating and destroying a modal from `Modal.method`.
+Manually updating and destroying a modal through instance.
diff --git a/components/modal/demo/manual.tsx b/components/modal/demo/manual.tsx
index e471bcfed4..c2634309f8 100644
--- a/components/modal/demo/manual.tsx
+++ b/components/modal/demo/manual.tsx
@@ -1,27 +1,36 @@
-import React from 'react';
 import { Button, Modal } from 'antd';
+import React from 'react';
 
-const countDown = () => {
-  let secondsToGo = 5;
+const App: React.FC = () => {
+  const [modal, contextHolder] = Modal.useModal();
 
-  const modal = Modal.success({
-    title: 'This is a notification message',
-    content: `This modal will be destroyed after ${secondsToGo} second.`,
-  });
+  const countDown = () => {
+    let secondsToGo = 5;
 
-  const timer = setInterval(() => {
-    secondsToGo -= 1;
-    modal.update({
+    const instance = modal.success({
+      title: 'This is a notification message',
       content: `This modal will be destroyed after ${secondsToGo} second.`,
     });
-  }, 1000);
 
-  setTimeout(() => {
-    clearInterval(timer);
-    modal.destroy();
-  }, secondsToGo * 1000);
+    const timer = setInterval(() => {
+      secondsToGo -= 1;
+      instance.update({
+        content: `This modal will be destroyed after ${secondsToGo} second.`,
+      });
+    }, 1000);
+
+    setTimeout(() => {
+      clearInterval(timer);
+      instance.destroy();
+    }, secondsToGo * 1000);
+  };
+
+  return (
+    <>
+      <Button onClick={countDown}>Open modal to close in 5s</Button>
+      {contextHolder}
+    </>
+  );
 };
 
-const App: React.FC = () => <Button onClick={countDown}>Open modal to close in 5s</Button>;
-
 export default App;
diff --git a/components/modal/demo/static-info.md b/components/modal/demo/static-info.md
new file mode 100644
index 0000000000..53a4143f74
--- /dev/null
+++ b/components/modal/demo/static-info.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+在绝大多数场景，都不需要静态方法。它无法消费 context，例如无法响应动态主题。请优先使用 hooks 版本或者 `App` 组件提供的 Modal 实例。
+
+## en-US
+
+In most case, you do not need static method. It can not consume context like dynamic theme. Please use hooks version or `App` provided instance first.
diff --git a/components/modal/demo/info.tsx b/components/modal/demo/static-info.tsx
similarity index 100%
rename from components/modal/demo/info.tsx
rename to components/modal/demo/static-info.tsx
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
index 5e0409eacc..72e5635086 100644
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@@ -11,7 +11,9 @@ Modal dialogs.
 
 ## When To Use
 
-When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information. Additionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`, and so on.
+When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information.
+
+Additionally, if you need show a simple confirmation dialog, you can use [`App.useApp`](/components/app/) hooks.
 
 ## Examples
 
@@ -20,16 +22,16 @@ When requiring users to interact with the application, but without jumping to a
 <code src="./demo/async.tsx">Asynchronously close</code>
 <code src="./demo/footer.tsx">Customized Footer</code>
 <code src="./demo/confirm.tsx">Confirmation modal dialog</code>
-<code src="./demo/info.tsx">Information modal dialog</code>
 <code src="./demo/locale.tsx">Internationalization</code>
 <code src="./demo/manual.tsx">Manual to update destroy</code>
 <code src="./demo/position.tsx">To customize the position of modal</code>
-<code src="./demo/confirm-router.tsx">destroy confirmation modal dialog</code>
 <code src="./demo/dark.tsx" debug>Dark Bg</code>
 <code src="./demo/button-props.tsx">Customize footer buttons props</code>
 <code src="./demo/hooks.tsx">Use hooks to get context</code>
 <code src="./demo/modal-render.tsx">Custom modal content render</code>
 <code src="./demo/width.tsx">To customize the width of modal</code>
+<code src="./demo/static-info.tsx">Static Method</code>
+<code src="./demo/confirm-router.tsx">destroy confirmation modal dialog</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/custom-mouse-position.tsx" debug>Control modal's animation origin position</code>
 <code src="./demo/wireframe.tsx" debug>Wireframe</code>
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
index eaebbdf1a3..a297de303a 100644
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -14,7 +14,7 @@ demo:
 
 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。
 
-另外当需要一个简洁的确认框询问用户时，可以使用 `Modal.confirm()` 等语法糖方法。
+另外当需要一个简洁的确认框询问用户时，可以使用 [`App.useApp`](/components/app-cn/) 封装的语法糖方法。
 
 ## 代码演示
 
@@ -23,16 +23,16 @@ demo:
 <code src="./demo/async.tsx">异步关闭</code>
 <code src="./demo/footer.tsx">自定义页脚</code>
 <code src="./demo/confirm.tsx">确认对话框</code>
-<code src="./demo/info.tsx">信息提示</code>
 <code src="./demo/locale.tsx">国际化</code>
 <code src="./demo/manual.tsx">手动更新和移除</code>
 <code src="./demo/position.tsx">自定义位置</code>
-<code src="./demo/confirm-router.tsx">销毁确认对话框</code>
 <code src="./demo/dark.tsx" debug>暗背景</code>
 <code src="./demo/button-props.tsx">自定义页脚按钮属性</code>
 <code src="./demo/hooks.tsx">使用 hooks 获得上下文</code>
 <code src="./demo/modal-render.tsx">自定义渲染对话框</code>
 <code src="./demo/width.tsx">自定义模态的宽度</code>
+<code src="./demo/static-info.tsx">静态方法</code>
+<code src="./demo/confirm-router.tsx">销毁确认对话框</code>
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/custom-mouse-position.tsx" debug>控制弹框动画原点</code>
 <code src="./demo/wireframe.tsx" debug>线框风格</code>
diff --git a/components/modal/useModal/index.tsx b/components/modal/useModal/index.tsx
index db9b6e7818..1d89750889 100644
--- a/components/modal/useModal/index.tsx
+++ b/components/modal/useModal/index.tsx
@@ -27,7 +27,10 @@ const ElementsHolder = React.memo(
   }),
 );
 
-function useModal(): readonly [Omit<ModalStaticFunctions, 'warn'>, React.ReactElement] {
+function useModal(): readonly [
+  instance: Omit<ModalStaticFunctions, 'warn'>,
+  contextHolder: React.ReactElement,
+] {
   const holderRef = React.useRef<ElementsHolderRef>(null);
 
   // ========================== Effect ==========================