From 700cd6c8faeb288805c256dda6d19faed766c905 Mon Sep 17 00:00:00 2001
From: Shu Ding <ds303077135@gmail.com>
Date: Tue, 17 Dec 2019 03:11:08 +0800
Subject: [PATCH] Improve multiple argument example in README (#201)

* improve multiple argument example

* typo
---
 README.md | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 1a2097dd3..92f68fc7c 100644
--- a/README.md
+++ b/README.md
@@ -254,7 +254,7 @@ function MyProjects () {
 In some scenarios, it's useful pass multiple arguments (can be any value or object) to the `fetcher` function. For example:
 
 ```js
-useSWR('/api/data', url => fetchWithToken(url, token))
+useSWR('/api/user', url => fetchWithToken(url, token))
 ```
 
 This is **incorrect**. Because the identifier (also the index of the cache) of the data is `'/api/data'`, 
@@ -263,10 +263,13 @@ so even if `token` changes, SWR will still have the same key and return the wron
 Instead, you can use an **array** as the `key` parameter, which contains multiple arguments of `fetcher`:
 
 ```js
-useSWR(['/api/data', token], fetchWithToken)
+const { data: user } = useSWR(['/api/user', token], fetchWithToken)
+
+// ...and pass it as an argument to another query
+const { data: orders } = useSWR(user ? ['/api/orders', user] : null, fetchWithUser)
 ```
 
-This solves the problem. The key of the request is now the combination of both values. SWR **shallowly** compares
+The key of the request is now the combination of both values. SWR **shallowly** compares
 the arguments on every render, and triggers revalidation if any of them has changed.  
 Keep in mind that you should not recreate objects when rendering, as they will be treated as different objects on every render:
 
@@ -274,9 +277,8 @@ Keep in mind that you should not recreate objects when rendering, as they will b
 // Don’t do this! Deps will be changed on every render.
 useSWR(['/api/user', { id }], query)
 
-// Make sure objects are stable
-const params = useMemo(() => ({ id }), [id])
-useSWR(['/api/user', params], query)
+// Instead, you should only pass “stable” values.
+useSWR(['/api/user', id], (url, id) => query(url, { id }))
 ```
 
 Dan Abramov explains dependencies very well in [this blog post](https://overreacted.io/a-complete-guide-to-useeffect/#but-i-cant-put-this-function-inside-an-effect).