diff --git a/pages/docs/prefetching.en-US.md b/pages/docs/prefetching.en-US.md index b163aa33..864eed3c 100644 --- 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 (