diff --git a/pages/docs/getting-started.en-US.mdx b/pages/docs/getting-started.en-US.mdx
index 50eddc69..e125b9a4 100644
--- a/pages/docs/getting-started.en-US.mdx
+++ b/pages/docs/getting-started.en-US.mdx
@@ -44,8 +44,8 @@ Then you can import `useSWR` and start using it inside any function components:
 ```jsx
 import useSWR from 'swr'
 
-function Profile () {
-  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
+function Profile ({ userId }) {
+  const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)
 
   if (error) return <div>failed to load</div>
   if (isLoading) return <div>loading...</div>
@@ -78,8 +78,8 @@ function useUser (id) {
 And use it in your components:
 
 ```jsx
-function Avatar ({ id }) {
-  const { user, isLoading, isError } = useUser(id)
+function Avatar ({ userId }) {
+  const { user, isLoading, isError } = useUser(userId)
 
   if (isLoading) return <Spinner />
   if (isError) return <Error />
@@ -105,15 +105,15 @@ Traditionally, we fetch data once using `useEffect` in the top level component,
 ```jsx {7-11,17,18,27}
 // page component
 
-function Page () {
+function Page ({ userId }) {
   const [user, setUser] = useState(null)
 
   // fetch data
   useEffect(() => {
-    fetch('/api/user')
+    fetch(`/api/user/${userId}`)
       .then(res => res.json())
       .then(data => setUser(data))
-  }, [])
+  }, [userId])
 
   // global loading state
   if (!user) return <Spinner/>
@@ -153,30 +153,30 @@ SWR solves the problem perfectly. With the `useUser` hook we just created, the c
 ```jsx {20,26}
 // page component
 
-function Page () {
+function Page ({ userId }) {
   return <div>
-    <Navbar />
-    <Content />
+    <Navbar userId={userId} />
+    <Content userId={userId} />
   </div>
 }
 
 // child components
 
-function Navbar () {
+function Navbar ({ userId }) {
   return <div>
     ...
-    <Avatar />
+    <Avatar userId={userId} />
   </div>
 }
 
-function Content () {
-  const { user, isLoading } = useUser()
+function Content ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <h1>Welcome back, {user.name}</h1>
 }
 
-function Avatar () {
-  const { user, isLoading } = useUser()
+function Avatar ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <img src={user.avatar} alt={user.name} />
 }
diff --git a/pages/docs/getting-started.es-ES.mdx b/pages/docs/getting-started.es-ES.mdx
index c0f50ea7..b9a62da8 100644
--- a/pages/docs/getting-started.es-ES.mdx
+++ b/pages/docs/getting-started.es-ES.mdx
@@ -44,8 +44,8 @@ Luego puede importar `useSWR` y empezar a usarlo dentro de cualquier componente
 ```jsx
 import useSWR from "swr"
 
-function Profile () {
-  const { data, error, isLoading } = useSWR("/api/user/123", fetcher)
+function Profile ({ userId }) {
+  const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)
 
   if (error) return <div>failed to load</div>
   if (isLoading) return <div>loading...</div>
@@ -112,15 +112,15 @@ a través de props (fíjate que por ahora no manejamos el estado de error):
 ```jsx {7-11,17,18,27}
 // componente de la página
 
-function Page() {
+function Page ({ userId }) {
   const [user, setUser] = useState(null)
 
   // obtener datos
   useEffect(() => {
-    fetch("/api/user")
-      .then((res) => res.json())
-      .then((data) => setUser(data))
-  }, [])
+    fetch(`/api/user/${userId}`)
+      .then(res => res.json())
+      .then(data => setUser(data))
+  }, [userId])
 
   // estado de carga global
   if (!user) return <Spinner />
@@ -166,31 +166,31 @@ SWR resuelve el problema perfectamente, Con el hook `useUser` que acabamos de cr
 
 // componente de la página
 
-function Page () {
+function Page ({ userId }) {
   return <div>
-    <Navbar />
-    <Content />
+    <Navbar userId={userId} />
+    <Content userId={userId} />
   </div>
 }
 
 // componentes hijos
 
-function Navbar() {
-   return <div>
+function Navbar ({ userId }) {
+  return <div>
     ...
-    <Avatar />
+    <Avatar userId={userId} />
   </div>
 }
 
-function Content() {
-  const { user, isLoading } = useUser()
+function Content ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <h1>Welcome back, {user.name}</h1>
 }
 
-function Avatar() {
-  const { user, isLoading } = useUser()
-  if(isLoading) return <Spinner />
+function Avatar ({ userId }) {
+  const { user, isLoading } = useUser(userId)
+  if (isLoading) return <Spinner />
   return <img src={user.avatar} alt={user.name} />
 }
 
diff --git a/pages/docs/getting-started.fr-FR.mdx b/pages/docs/getting-started.fr-FR.mdx
index 65fbaddb..b1e3b20a 100644
--- a/pages/docs/getting-started.fr-FR.mdx
+++ b/pages/docs/getting-started.fr-FR.mdx
@@ -43,8 +43,8 @@ Ensuite, vous pouvez importer `useSWR` et commencer à l'utiliser dans n'importe
 ```jsx
 import useSWR from 'swr'
 
-function Profile () {
-  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
+function Profile ({ userId }) {
+  const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)
 
   if (error) return <div>échec du chargement</div>
   if (isLoading) return <div>chargement...</div>
@@ -102,15 +102,15 @@ D'habitude, on récupére les données une fois en utilisant `useEffect` dans le
 ```jsx {7-11,17,18,27}
 // Composant Page
 
-function Page () {
+function Page ({ userId }) {
   const [user, setUser] = useState(null)
 
   // Récupération des données
   useEffect(() => {
-    fetch('/api/user')
+    fetch(`/api/user/${userId}`)
       .then(res => res.json())
       .then(data => setUser(data))
-  }, [])
+  }, [userId])
 
   // Etat de chargement global
   if (!user) return <Spinner/>
@@ -150,30 +150,30 @@ SWR résout parfaitement le problème. Avec le hook `useUser` que nous venons de
 ```jsx {20,26}
 // Composant Page
 
-function Page () {
+function Page ({ userId }) {
   return <div>
-    <Navbar />
-    <Content />
+    <Navbar userId={userId} />
+    <Content userId={userId} />
   </div>
 }
 
 // Composants enfants
 
-function Navbar () {
+function Navbar ({ userId }) {
   return <div>
     ...
-    <Avatar />
+    <Avatar userId={userId} />
   </div>
 }
 
-function Content () {
-  const { user, isLoading } = useUser()
+function Content ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
-  return <h1>Bon retour, {user.name}</h1>
+  return <h1>Welcome back, {user.name}</h1>
 }
 
-function Avatar () {
-  const { user, isLoading } = useUser()
+function Avatar ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <img src={user.avatar} alt={user.name} />
 }
diff --git a/pages/docs/getting-started.ja.mdx b/pages/docs/getting-started.ja.mdx
index 05e8e73c..cb649264 100644
--- a/pages/docs/getting-started.ja.mdx
+++ b/pages/docs/getting-started.ja.mdx
@@ -43,8 +43,8 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
 ```jsx
 import useSWR from 'swr'
 
-function Profile () {
-  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
+function Profile ({ userId }) {
+  const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)
 
   if (error) return <div>failed to load</div>
   if (isLoading) return <div>loading...</div>
@@ -103,15 +103,15 @@ import { Welcome } from 'components/diagrams/welcome'
 ```jsx {7-11,17,18,27}
 // ページコンポーネント
 
-function Page () {
+function Page ({ userId }) {
   const [user, setUser] = useState(null)
 
   // データの取得
   useEffect(() => {
-    fetch('/api/user')
+    fetch(`/api/user/${userId}`)
       .then(res => res.json())
       .then(data => setUser(data))
-  }, [])
+  }, [userId])
 
   // グローバルなローディング状態
   if (!user) return <Spinner/>
@@ -151,30 +151,30 @@ SWR はその問題を完璧に解決してくれます。 先ほど作成した
 ```jsx {20,26}
 // ページコンポーネント
 
-function Page () {
+function Page ({ userId }) {
   return <div>
-    <Navbar />
-    <Content />
+    <Navbar userId={userId} />
+    <Content userId={userId} />
   </div>
 }
 
 // 子コンポーネント
 
-function Navbar () {
+function Navbar ({ userId }) {
   return <div>
     ...
-    <Avatar />
+    <Avatar userId={userId} />
   </div>
 }
 
-function Content () {
-  const { user, isLoading } = useUser()
+function Content ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <h1>Welcome back, {user.name}</h1>
 }
 
-function Avatar () {
-  const { user, isLoading } = useUser()
+function Avatar ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <img src={user.avatar} alt={user.name} />
 }
diff --git a/pages/docs/getting-started.ko.mdx b/pages/docs/getting-started.ko.mdx
index e9605284..761b2946 100644
--- a/pages/docs/getting-started.ko.mdx
+++ b/pages/docs/getting-started.ko.mdx
@@ -43,8 +43,8 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
 ```jsx
 import useSWR from 'swr'
 
-function Profile () {
-  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
+function Profile ({ userId }) {
+  const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)
 
   if (error) return <div>failed to load</div>
   if (isLoading) return <div>loading...</div>
@@ -104,15 +104,15 @@ import { Welcome } from 'components/diagrams/welcome'
 ```jsx {7-11,17,18,27}
 // 페이지 컴포넌트
 
-function Page () {
+function Page ({ userId }) {
   const [user, setUser] = useState(null)
 
   // 데이터 가져오기
   useEffect(() => {
-    fetch('/api/user')
+    fetch(`/api/user/${userId}`)
       .then(res => res.json())
       .then(data => setUser(data))
-  }, [])
+  }, [userId])
 
   // 전역 로딩 상태
   if (!user) return <Spinner/>
@@ -152,30 +152,30 @@ SWR은 이 문제를 완벽하게 해결합니다. 우리가 막 생성한 `useU
 ```jsx {20,26}
 // 페이지 컴포넌트
 
-function Page () {
+function Page ({ userId }) {
   return <div>
-    <Navbar />
-    <Content />
+    <Navbar userId={userId} />
+    <Content userId={userId} />
   </div>
 }
 
 // 자식 컴포넌트
 
-function Navbar () {
+function Navbar ({ userId }) {
   return <div>
     ...
-    <Avatar />
+    <Avatar userId={userId} />
   </div>
 }
 
-function Content () {
-  const { user, isLoading } = useUser()
+function Content ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <h1>Welcome back, {user.name}</h1>
 }
 
-function Avatar () {
-  const { user, isLoading } = useUser()
+function Avatar ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <img src={user.avatar} alt={user.name} />
 }
diff --git a/pages/docs/getting-started.pt-BR.mdx b/pages/docs/getting-started.pt-BR.mdx
index 1f7a9b7f..02d96f18 100644
--- a/pages/docs/getting-started.pt-BR.mdx
+++ b/pages/docs/getting-started.pt-BR.mdx
@@ -43,8 +43,8 @@ Então você pode importar `useSWR` e começar a usá-lo em qualquer componente
 ```jsx
 import useSWR from 'swr'
 
-function Profile () {
-  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
+function Profile ({ userId }) {
+  const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)
 
   if (error) return <div>falhou ao carregar</div>
   if (isLoading) return <div>carregando...</div>
@@ -105,15 +105,15 @@ filhos via props (note que nós não tratamos o estado de erro por agora).
 ```jsx {7-11,17,18,27}
 // componente da página
 
-function Page () {
+function Page ({ userId }) {
   const [user, setUser] = useState(null)
 
   // obtendo os dados data
   useEffect(() => {
-    fetch('/api/user')
+    fetch(`/api/user/${userId}`)
       .then(res => res.json())
       .then(data => setUser(data))
-  }, [])
+  }, [userId])
 
   // estado de carregamento (loading) global
   if (!user) return <Spinner/>
@@ -153,30 +153,30 @@ SWR resolve o problema perfeitamente. Com o hook `useUser`, o código pode ser r
 ```jsx {20,26}
 // componente page
 
-function Page () {
+function Page ({ userId }) {
   return <div>
-    <Navbar />
-    <Content />
+    <Navbar userId={userId} />
+    <Content userId={userId} />
   </div>
 }
 
 // componentes filho
 
-function Navbar () {
+function Navbar ({ userId }) {
   return <div>
     ...
-    <Avatar />
+    <Avatar userId={userId} />
   </div>
 }
 
-function Content () {
-  const { user, isLoading } = useUser()
+function Content ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
-  return <h1>Bem-vindo de volta, {user.name}</h1>
+  return <h1>Welcome back, {user.name}</h1>
 }
 
-function Avatar () {
-  const { user, isLoading } = useUser()
+function Avatar ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <img src={user.avatar} alt={user.name} />
 }
diff --git a/pages/docs/getting-started.ru.mdx b/pages/docs/getting-started.ru.mdx
index 3e903154..63bd5b4b 100644
--- a/pages/docs/getting-started.ru.mdx
+++ b/pages/docs/getting-started.ru.mdx
@@ -45,8 +45,8 @@ const fetcher = (...args) => fetch(...args).then(res => res.json())
 ```jsx
 import useSWR from 'swr'
 
-function Profile () {
-  const { data, error, isLoading } = useSWR('/api/user/123', fetcher)
+function Profile ({ userId }) {
+  const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)
 
   if (error) return <div>ошибка загрузки</div>
   if (isLoading) return <div>загрузка...</div>
@@ -109,15 +109,15 @@ import { Welcome } from 'components/diagrams/welcome'
 ```jsx {7-11,17,18,27}
 // компонент страницы
 
-function Page () {
+function Page ({ userId }) {
   const [user, setUser] = useState(null)
 
   // выборка данных
   useEffect(() => {
-    fetch('/api/user')
+    fetch(`/api/user/${userId}`)
       .then(res => res.json())
       .then(data => setUser(data))
-  }, [])
+  }, [userId])
 
   // глобальное состояние загрузки
   if (!user) return <Spinner/>
@@ -159,30 +159,30 @@ SWR отлично решает проблему. С помощью только
 ```jsx {20,26}
 // компонент страницы
 
-function Page () {
+function Page ({ userId }) {
   return <div>
-    <Navbar />
-    <Content />
+    <Navbar userId={userId} />
+    <Content userId={userId} />
   </div>
 }
 
 // дочерний компонент
 
-function Navbar () {
+function Navbar ({ userId }) {
   return <div>
     ...
-    <Avatar />
+    <Avatar userId={userId} />
   </div>
 }
 
-function Content () {
-  const { user, isLoading } = useUser()
+function Content ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
-  return <h1>С возвращением, {user.name}</h1>
+  return <h1>Welcome back, {user.name}</h1>
 }
 
-function Avatar () {
-  const { user, isLoading } = useUser()
+function Avatar ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <img src={user.avatar} alt={user.name} />
 }
diff --git a/pages/docs/getting-started.zh-CN.mdx b/pages/docs/getting-started.zh-CN.mdx
index a2522df8..6c9549ab 100644
--- a/pages/docs/getting-started.zh-CN.mdx
+++ b/pages/docs/getting-started.zh-CN.mdx
@@ -42,8 +42,8 @@ const fetcher = (...args) => fetch(...args).then((res) => res.json())
 ```jsx
 import useSWR from "swr";
 
-function Profile() {
-  const { data, error, isLoading } = useSWR("/api/user/123", fetcher)
+function Profile ({ userId }) {
+  const { data, error, isLoading } = useSWR(`/api/user/${userId}`, fetcher)
 
   if (error) return <div>failed to load</div>
   if (isLoading) return <div>loading...</div>
@@ -100,15 +100,15 @@ import { Welcome } from 'components/diagrams/welcome'
 ```jsx {7-11,17,18,27}
 // 页面组件
 
-function Page() {
+function Page ({ userId }) {
   const [user, setUser] = useState(null)
 
   // 请求数据
   useEffect(() => {
-    fetch("/api/user")
-      .then((res) => res.json())
-      .then((data) => setUser(data))
-  }, [])
+    fetch(`/api/user/${userId}`)
+      .then(res => res.json())
+      .then(data => setUser(data))
+  }, [userId])
 
   // 全局加载状态
   if (!user) return <Spinner />
@@ -146,30 +146,30 @@ SWR 完美地解决了这个问题。使用我们刚刚创建的 `useUser` hook
 ```jsx {20,26}
 // 页面组件
 
-function Page() {
+function Page ({ userId }) {
   return <div>
-    <Navbar />
-    <Content />
+    <Navbar userId={userId} />
+    <Content userId={userId} />
   </div>
 }
 
 // 子组件
 
-function Navbar() {
+function Navbar ({ userId }) {
   return <div>
     ...
-    <Avatar />
+    <Avatar userId={userId} />
   </div>
 }
 
-function Content() {
-  const { user, isLoading } = useUser()
+function Content ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <h1>Welcome back, {user.name}</h1>
 }
 
-function Avatar() {
-  const { user, isLoading } = useUser()
+function Avatar ({ userId }) {
+  const { user, isLoading } = useUser(userId)
   if (isLoading) return <Spinner />
   return <img src={user.avatar} alt={user.name} />
 }