You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: versioned_docs/version-6.x/params.md
+10-8Lines changed: 10 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -181,9 +181,9 @@ See [Nesting navigators](nesting-navigators.md) for more details on nesting.
181
181
182
182
## What should be in params
183
183
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.
185
185
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.
187
187
188
188
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:
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.
203
203
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:
205
205
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:
207
209
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.
211
213
212
214
A better way is to pass only the ID of the user in params:
Copy file name to clipboardExpand all lines: versioned_docs/version-7.x/params.md
+9-7Lines changed: 9 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -375,9 +375,9 @@ See [Nesting navigators](nesting-navigators.md) for more details on nesting.
375
375
376
376
## What should be in params
377
377
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.
379
379
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.
381
381
382
382
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:
This looks convenient and lets you access the user objects with `route.params.user` without any extra work.
397
397
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:
399
399
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:
401
403
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.
405
407
406
408
A better way is to pass only the ID of the user in params:
0 commit comments