docs: add an example for preload in effect (#345)

* docs: add an example for preload in effects * Update pages/docs/prefetching.en-US.md Co-authored-by: Jiachi Liu <[email protected]> * merge examples for inside React * Update pages/docs/prefetching.en-US.md Co-authored-by: Jiachi Liu <[email protected]> * apply a suggestion Co-authored-by: Jiachi Liu <[email protected]>
vercel · Aug 30, 2022 · 602e161 · 602e161
1 parent 5a01793
commit 602e161
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 14 deletions.
diff --git a/pages/docs/prefetching.en-US.md b/pages/docs/prefetching.en-US.md
@@ -14,7 +14,9 @@ It will prefetch the data when the HTML loads, even before JavaScript starts to
 
 ## Programmatically Prefetch
 
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
 
 ```jsx
 import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
 }
 ```
 
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
 
 ```jsx
 function App({ userId }) {
   const [show, setShow] = useState(false)
+
+  // preload in effects
+  useEffect(() => {
+    preload('/api/user?id=' + userId, fetcher)
+  }, [useId])
+
   return (
     <div>
       <button
         onClick={() => setShow(true)}
+        {/* preload in event callbacks */}
         onHover={() => preload('/api/user?id=' + userId, fetcher)}
       >
         Show User

diff --git a/pages/docs/prefetching.es-ES.md b/pages/docs/prefetching.es-ES.md
@@ -14,7 +14,9 @@ Se precargarán los datos cuando se cargue el HTML, incluso antes de que el Java
 
 ## Programmatically Prefetch
 
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
 
 ```jsx
 import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
 }
 ```
 
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
 
 ```jsx
 function App({ userId }) {
   const [show, setShow] = useState(false)
+
+  // preload in effects
+  useEffect(() => {
+    preload('/api/user?id=' + userId, fetcher)
+  }, [useId])
+
   return (
     <div>
       <button
         onClick={() => setShow(true)}
+        {/* preload in event callbacks */}
         onHover={() => preload('/api/user?id=' + userId, fetcher)}
       >
         Show User

diff --git a/pages/docs/prefetching.ja.md b/pages/docs/prefetching.ja.md
@@ -14,7 +14,9 @@ JavaScriptのダウンロードが開始される前であっても、HTMLの読
 
 ## プログラムによるプリフェッチ
 
-SWR は `preload` というデータをプログラマブルにプリフェッチして結果をキャッシュに保存する API を提供しています。`preload` は `key` と `fetcher` を引数として受け取ります。`preload` は React の外からも呼ぶことが可能です。
+SWR は `preload` というデータをプログラマブルにプリフェッチして結果をキャッシュに保存する API を提供しています。`preload` は `key` と `fetcher` を引数として受け取ります。
+
+`preload` は React の外からも呼ぶことが可能です。
 
 ```jsx
 import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
 }
 ```
 
-またボタンをホバーしたタイミングでプリロードすることもできます
+React のレンダリングツリー内においては, `preload` はイベントコールバックやエフェクトの中で利用可能です。
 
 ```jsx
 function App({ userId }) {
   const [show, setShow] = useState(false)
+
+  // エフェクトの中でプリロードする
+  useEffect(() => {
+    preload('/api/user?id=' + userId, fetcher)
+  }, [useId])
+
   return (
     <div>
       <button
         onClick={() => setShow(true)}
+        {/* イベントコールバックの中でプリロードする */}
         onHover={() => preload('/api/user?id=' + userId, fetcher)}
       >
         Show User

diff --git a/pages/docs/prefetching.ko.md b/pages/docs/prefetching.ko.md
@@ -14,7 +14,9 @@ HTML `<head>` 안에 넣기만 하면 됩니다. 쉽고 빠르며 네이티브
 
 ## 프로그래밍 방식으로 프리패치
 
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
 
 ```jsx
 import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
 }
 ```
 
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
 
 ```jsx
 function App({ userId }) {
   const [show, setShow] = useState(false)
+
+  // preload in effects
+  useEffect(() => {
+    preload('/api/user?id=' + userId, fetcher)
+  }, [useId])
+
   return (
     <div>
       <button
         onClick={() => setShow(true)}
+        {/* preload in event callbacks */}
         onHover={() => preload('/api/user?id=' + userId, fetcher)}
       >
         Show User

diff --git a/pages/docs/prefetching.pt-BR.md b/pages/docs/prefetching.pt-BR.md
@@ -14,7 +14,9 @@ Irá pré-obter os dados quando o HTML carregar, antes mesmo de iniciar a baixar
 
 ## Prefetching Programático
 
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
 
 ```jsx
 import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
 }
 ```
 
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
 
 ```jsx
 function App({ userId }) {
   const [show, setShow] = useState(false)
+
+  // preload in effects
+  useEffect(() => {
+    preload('/api/user?id=' + userId, fetcher)
+  }, [useId])
+
   return (
     <div>
       <button
         onClick={() => setShow(true)}
+        {/* preload in event callbacks */}
         onHover={() => preload('/api/user?id=' + userId, fetcher)}
       >
         Show User

diff --git a/pages/docs/prefetching.ru.md b/pages/docs/prefetching.ru.md
@@ -14,7 +14,9 @@
 
 ## Программная предварительная выборка
 
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
 
 ```jsx
 import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
 }
 ```
 
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
 
 ```jsx
 function App({ userId }) {
   const [show, setShow] = useState(false)
+
+  // preload in effects
+  useEffect(() => {
+    preload('/api/user?id=' + userId, fetcher)
+  }, [useId])
+
   return (
     <div>
       <button
         onClick={() => setShow(true)}
+        {/* preload in event callbacks */}
         onHover={() => preload('/api/user?id=' + userId, fetcher)}
       >
         Show User

diff --git a/pages/docs/prefetching.zh-CN.md b/pages/docs/prefetching.zh-CN.md
@@ -14,7 +14,9 @@
 
 ## 手动预请求
 
-SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments. You can call `preload` even outside of React.
+SWR provides the `preload` API to prefetch the resources programmatically and store the results in the cache. `preload` accepts `key` and `fetcher` as the arguments.
+
+You can call `preload` even outside of React.
 
 ```jsx
 import { useState } from 'react'
@@ -43,15 +45,22 @@ export default function App() {
 }
 ```
 
-You can also preload it when hovering the button:
+Within React rendering tree, `preload` is also avaiable to use in event handlers or effects.
 
 ```jsx
 function App({ userId }) {
   const [show, setShow] = useState(false)
+
+  // preload in effects
+  useEffect(() => {
+    preload('/api/user?id=' + userId, fetcher)
+  }, [useId])
+
   return (
     <div>
       <button
         onClick={() => setShow(true)}
+        {/* preload in event callbacks */}
         onHover={() => preload('/api/user?id=' + userId, fetcher)}
       >
         Show User