Skip to content

Commit 1e12308

Browse files
committed
Shorten what should be in params docs
1 parent 6e6901e commit 1e12308

File tree

2 files changed

+19
-15
lines changed

2 files changed

+19
-15
lines changed

versioned_docs/version-6.x/params.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -181,9 +181,9 @@ See [Nesting navigators](nesting-navigators.md) for more details on nesting.
181181
182182
## What should be in params
183183
184-
It's important to understand what kind of data should be in params. Params are like options for a screen. They should only contain information to configure what's displayed in the screen. Avoid passing the full data which will be displayed on the screen itself (e.g. pass a user id instead of user object). Also avoid passing data which is used by multiple screens, such data should be in a global store.
184+
Params are essentially options for a screen. They should contain the minimal data required to show a screen, nothing more. If the data is used by multiple screens, it should be in a global store or global cache. Params is not designed for state management.
185185
186-
You can also think of the route object like a URL. If your screen had a URL, what should be in the URL? Params shouldn't contain data that you think should not be in the URL. This often means that you should keep as little data as possible needed to determine what the screen is. Think of visiting a shopping website, when you are seeing product listings, the URL usually contains category name, type of sort, any filters etc., it doesn't contain the actual list of products displayed on the screen.
186+
You can think of the route object as a URL. If your screen had a URL, what should be in the URL? The same principles apply to params. Think of visiting a shopping website; when you see product listings, the URL usually contains category name, type of sort, any filters etc., not the actual list of products displayed on the screen.
187187
188188
For example, say if you have a `Profile` screen. When navigating to it, you might be tempted to pass the user object in the params:
189189
@@ -199,15 +199,17 @@ navigation.navigate('Profile', {
199199
});
200200
```
201201
202-
This looks convenient, and lets you access the user objects with `route.params.user` without any extra work.
202+
This looks convenient and lets you access the user objects with `route.params.user` without any extra work.
203203
204-
However, this is an anti-pattern. Data such as user objects should be in your global store instead of the navigation state. Otherwise you have the same data duplicated in multiple places. This can lead to bugs such as the profile screen showing outdated data even if the user object has changed after navigation.
204+
However, this is an anti-pattern. There are many reasons why this is a bad idea:
205205
206-
It also becomes problematic to link to the screen via deep linking or on the Web, since:
206+
- The same data is duplicated in multiple places. This can lead to bugs such as the profile screen showing outdated data even if the user object has changed after navigation.
207+
- Each screen that navigates to the `Profile` screen now needs to know how to fetch the user object - which increases the complexity of the code.
208+
- URLs to the screen (browser URL on the web, or deep links on native) will contain the user object. This is problematic:
207209
208-
1. The URL is a representation of the screen, so it also needs to contain the params, i.e. full user object, which can make the URL very long and unreadable
209-
2. Since the user object is in the URL, it's possible to pass a random user object representing a user which doesn't exist, or has incorrect data in the profile
210-
3. If the user object isn't passed, or improperly formatted, this could result in crashes as the screen won't know how to handle it
210+
1. Since the user object is in the URL, it's possible to pass a random user object representing a user that doesn't exist or has incorrect data in the profile.
211+
2. If the user object isn't passed or improperly formatted, this could result in crashes as the screen won't know how to handle it.
212+
3. The URL can become very long and unreadable.
211213
212214
A better way is to pass only the ID of the user in params:
213215

versioned_docs/version-7.x/params.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -375,9 +375,9 @@ See [Nesting navigators](nesting-navigators.md) for more details on nesting.
375375
376376
## What should be in params
377377
378-
It's important to understand what kind of data should be in params. Params are like options for a screen. They should only contain information to configure what's displayed in the screen. Avoid passing the full data which will be displayed on the screen itself (e.g. pass a user id instead of user object). Also avoid passing data which is used by multiple screens, such data should be in a global store.
378+
Params are essentially options for a screen. They should contain the minimal data required to show a screen, nothing more. If the data is used by multiple screens, it should be in a global store or global cache. Params is not designed for state management.
379379
380-
You can also think of the route object like a URL. If your screen had a URL, what should be in the URL? Params shouldn't contain data that you think should not be in the URL. This often means that you should keep as little data as possible needed to determine what the screen is. Think of visiting a shopping website, when you are seeing product listings, the URL usually contains category name, type of sort, any filters etc., it doesn't contain the actual list of products displayed on the screen.
380+
You can think of the route object as a URL. If your screen had a URL, what should be in the URL? The same principles apply to params. Think of visiting a shopping website; when you see product listings, the URL usually contains category name, type of sort, any filters etc., not the actual list of products displayed on the screen.
381381
382382
For example, say if you have a `Profile` screen. When navigating to it, you might be tempted to pass the user object in the params:
383383
@@ -395,13 +395,15 @@ navigation.navigate('Profile', {
395395
396396
This looks convenient and lets you access the user objects with `route.params.user` without any extra work.
397397
398-
However, this is an anti-pattern. Data such as user objects should be in your global store instead of the navigation state. Otherwise, you have the same data duplicated in multiple places. This can lead to bugs such as the profile screen showing outdated data even if the user object has changed after navigation.
398+
However, this is an anti-pattern. There are many reasons why this is a bad idea:
399399
400-
It also becomes problematic to link to the screen via deep linking or on the Web, since:
400+
- The same data is duplicated in multiple places. This can lead to bugs such as the profile screen showing outdated data even if the user object has changed after navigation.
401+
- Each screen that navigates to the `Profile` screen now needs to know how to fetch the user object - which increases the complexity of the code.
402+
- URLs to the screen (browser URL on the web, or deep links on native) will contain the user object. This is problematic:
401403
402-
1. The URL is a representation of the screen, so it also needs to contain the params, i.e. full user object, which can make the URL very long and unreadable
403-
2. Since the user object is in the URL, it's possible to pass a random user object representing a user which doesn't exist or has incorrect data in the profile
404-
3. If the user object isn't passed, or improperly formatted, this could result in crashes as the screen won't know how to handle it
404+
1. Since the user object is in the URL, it's possible to pass a random user object representing a user that doesn't exist or has incorrect data in the profile.
405+
2. If the user object isn't passed or improperly formatted, this could result in crashes as the screen won't know how to handle it.
406+
3. The URL can become very long and unreadable.
405407
406408
A better way is to pass only the ID of the user in params:
407409

0 commit comments

Comments
 (0)