diff --git a/src/App.tsx b/src/App.tsx
index 5d2d25d..35f3464 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,8 @@
 import "./App.css";
-import { RecordProvider, useNamedRecord, useRecord } from "./core/record";
+import { RecordContextProvider, useRecordContext } from "./core/record";
 
 function Consumer({ name }: { name: string }) {
-  const record = useNamedRecord<{ text: string }>(name);
+  const record = useRecordContext<{ text: string }>(name);
   return (
     <div
       style={{
@@ -20,7 +20,7 @@ function Consumer({ name }: { name: string }) {
 }
 
 function RecordConsumer() {
-  const record = useRecord<{ text: string }>();
+  const record = useRecordContext<{ text: string }>();
   return (
     <div
       style={{
@@ -42,16 +42,16 @@ const App = () => {
     <div className="content">
       <h1>Rsbuild with React</h1>
       <p>Start building amazing things with Rsbuild.</p>
-      <RecordProvider name="a" value={{ text: "aaa Rsbuild message" }}>
-        <RecordProvider name="av" value={{ text: "vvv with Rsbuild" }}>
+      <RecordContextProvider name="a" value={{ text: "aaa Rsbuild message" }}>
+        <RecordContextProvider name="av" value={{ text: "vvv with Rsbuild" }}>
           <Consumer name="av" />
           <Consumer name="a" />
           <RecordConsumer />
-        </RecordProvider>
+        </RecordContextProvider>
         <Consumer name="a" />
         <Consumer name="x" />
         <RecordConsumer />
-      </RecordProvider>
+      </RecordContextProvider>
     </div>
   );
 };