Skip to content

Commit 4b56f99

Browse files
docs: apply suggestions from code review
Co-authored-by: Mads Røskar <[email protected]>
1 parent 42049bb commit 4b56f99

File tree

1 file changed

+30
-28
lines changed

1 file changed

+30
-28
lines changed

docusaurus/docs/reactnative/guides/performance_boost.mdx

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,34 @@ title: Performance Boost
66

77
import channelSettings from '../assets/guides/performance-boost/channel_settings.jpeg'
88

9-
React Native Chat SDK provides feature rich components which caters to all the types of chat messaging applications.
10-
Although some of the features or components may come with performance cost, which you will want to avoid for the cases of high
11-
concurrency applications such as livestreaming. In this guide we have noted down some tips for improving the performance of your
9+
React Native Chat SDK provides feature-rich components which cater to all types of chat messaging applications.
10+
Some of the features or components may come with a performance cost you will want to avoid for high
11+
concurrency applications such as livestreaming. In this guide, we have noted down some tips for improving the performance of your
1212
chat application if you are expecting heavy traffic on your chat.
1313

1414
## Channel Settings
1515

1616
Within each channel type, some settings are available that apply to all channels of that type.
17-
Among these settings are the ability to enable/disable each event type.
18-
When disabled, events of that type (for channels of this type) will not be passed through to a client's open WebSocket connection.
19-
It's also important to note that increasing the events enabled on a channel type also increases the load on clients in those channels.
17+
Among these settings is the ability to enable or disable each event type.
18+
While disabled, an event of a selected type will not be passed through to a client's open WebSocket connection in the channel type it has been set.
19+
It's also important to note that increasing the number of enabled events for a channel type also increases the load on clients in those channels.
2020

21-
- For Livestream type channels, we recommend disabling Connect, Read Events, and Typing Events. These will cause performance issues and don't generally add to the user experience in these use cases.
21+
- For the Livestream channel type, we recommend disabling Connect, Read Events, and Typing Events. These will cause performance issues and don't generally add to the user experience in these use cases.
2222
- Also consider using [Slow Mode](https://getstream.io/chat/docs/slow_mode/?language=js#channel-slow-mode) for Livestream events.
2323

2424
<img src={channelSettings} />
2525

2626
## State update throttling
2727

28-
[Channel](../core-components/channel.mdx) component updates its internal react state based on chat related events received from websocket.
29-
By default these state updates are throttled to once per 500 ms. For high traffic applications, you may want to adjust throttling
30-
interval to a higher number. You can configure throttle interval via props on Channel component:
31-
32-
- `newMessageStateUpdateThrottleInterval` prop adjusts the throttling interval for state updates when new messages arrive in chat.
33-
- `stateUpdateThrottleInterval` prop adjusts the throttling interval for state updates for all the other updates to channel except new message.
34-
35-
We recommend following configuration, but you can adjust it as per your requirement.
28+
The [Channel](../core-components/channel.mdx) component updates its internal react state based on chat related events received from the websocket.
29+
30+
By default, these state updates are throttled to once per 500 ms. For high-traffic applications, you may want to adjust the throttling interval to a higher number. You can configure throttle interval via the following props on the Channel component:
31+
32+
- The `newMessageStateUpdateThrottleInterval` prop adjusts the throttling interval for state updates when new messages arrive in chat.
33+
34+
- The `stateUpdateThrottleInterval` prop adjusts the throttling interval for state updates for all the other updates to a channel except new message.
35+
36+
We recommend the following configuration, but you can adjust it to fit the requirements of your application.
3637

3738
```tsx
3839
<Channel
@@ -43,36 +44,36 @@ We recommend following configuration, but you can adjust it as per your requirem
4344

4445
:::note
4546
- These props are available in version >= v3.9.0
46-
- Changes to `stateUpdateThrottleInterval` will result in delays in adding a reaction to message. So try not to keep too high value for this prop.
47+
- Changes to `stateUpdateThrottleInterval` will result in delays in adding a reaction to a message. Therefore, you should avoid setting the value too high.
4748
:::
4849

4950
## Heavy UI features
5051

51-
You can relieve the JS thread by disabling some of the heavy features as mentioned below.
52+
You can lighten the load for the JS thread by disabling some of the heavier features mentioned below.
5253

5354
:::note
5455
These props are available in version >= v3.9.0
5556
:::
5657

5758
### Image Viewer
5859

59-
By default, when you open (or press on) an image attachment, it opens the image in full screen image viewer.
60-
And within the viewer, you can keep swiping left to scroll through all the images within channel (which have been loaded so far).
61-
This creates quite a lot of extra work for JS thread in terms of keeping track of image attachments loaded in channel and pre-populating them in the viewer
62-
for smooth transitions.
60+
By default, when you open (press) an image attachment it opens the image in a full-screen image viewer.
61+
Within the viewer, you can keep swiping left to scroll through all the images that have been loaded within a channel so far.
62+
This creates quite a lot of extra work for the JS thread to keep track of image attachments loaded in a channel and pre-populating them in the viewer for smooth transitions.
6363

64-
Since v3.9.0 we have introduced an alternate UX for image viewer, where image attachments of only the selected messages will be loaded in the viewer.
65-
You can enable this alternate UX by setting a prop `legacyImageViewerSwipeBehaviour` as false on Channel component.
64+
In v3.9.0, we introduced an alternate UX for the image viewer where image attachments are only loaded for the selected messages in a viewer.
65+
You can enable this alternate UX by setting the prop `legacyImageViewerSwipeBehaviour` to false on a Channel component.
6666

6767
```tsx
6868
<Channel legacyImageViewerSwipeBehaviour={false} />
6969
```
7070

7171
### Sticky Date Header and Inline Date Separator
7272

73-
By default MessageList component renders sticky date header a the top, and date separators in between messages from different dates.
74-
Computation and insertion of these dates can be heavy for message list when there are lot of messages in channel, since it involves iterating
75-
through the entire list. For livestream applications we would recommend disabling these features using following two props on Channel component.
73+
By default, the MessageList component renders a sticky date header at the top of the list, and date separators between messages from different dates.
74+
Computation and insertion of these dates can be heavy for a message list when there are a lot of messages in the channel since it involves iterating through the entire list.
75+
76+
For livestream applications, we would recommend disabling these features using the following two props on a Channel component:
7677

7778
```tsx
7879
<Channel
@@ -83,8 +84,9 @@ through the entire list. For livestream applications we would recommend disablin
8384

8485
### Message grouping
8586

86-
Messages from same user are grouped by default in the MessageList component. Computations of these groups involves iterating through entire list of messages,
87-
and thus can be heavy if length of message list is too long. You can disable this feature by setting `enableMessageGroupingByUser` prop as false on Channel component.
87+
Messages from the same user are grouped by default in the MessageList component. Creating these groups involves iterating through the entire list of messages and thus can be heavy if the length of the message list is too long.
88+
89+
You can disable this feature by setting the `enableMessageGroupingByUser` prop to false on a Channel component.
8890

8991
```tsx
9092
<Channel enableMessageGroupingByUser={false} />

0 commit comments

Comments
 (0)