Performance

The React Native Chat SDK is feature-rich, but some features are costly for high-concurrency apps like livestreaming. Use these tips to keep performance stable under heavy traffic.

Best Practices

• Tune channel event settings per use case to reduce WebSocket load.
• Increase state update throttling gradually and validate UX impact.
• Disable expensive UI features (grouping, separators) only when necessary.
• Avoid per-row animations or gesture handlers in long lists.
• Keep context usage shallow to prevent mass re-renders.

Channel Settings

Each channel type has settings that apply to all channels, including which events are sent over the WebSocket. Disabling events reduces client load.

• For Livestream, disable Connect, Read Events, and Typing Events. They add load without much UX value in this use case.
• Also consider using Slow Mode for Livestream events.

State update throttling

The Channel component updates its internal state based on WebSocket events.

By default, updates are throttled to once per 500 ms. For high-traffic apps, increase the interval with these Channel props:

• newMessageStateUpdateThrottleInterval: throttles new message updates.
• stateUpdateThrottleInterval: throttles all other channel updates.

Recommended starting values:

<Channel
  newMessageStateUpdateThrottleInterval={2000}
  stateUpdateThrottleInterval={800}
/>

Heavy UI features

You can reduce JS thread load by disabling heavier features:

Sticky Date Header and Inline Date Separator

MessageList renders a sticky date header and date separators by default. Computing these can be expensive for long lists.

For livestreaming, disable both:

<Channel hideDateSeparators={true} hideStickyDateHeader={true} />

Message grouping

Messages from the same user are grouped by default. Grouping requires iterating the list and can be expensive for long histories.

You can disable this feature by setting the enableMessageGroupingByUser prop to false on a Channel component.

<Channel enableMessageGroupingByUser={false} />

Disabling grouping can increase avatar renders. Only do this if you also hide avatars:

<Channel MessageAvatar={() => null} />

Animations and gesture handlers in MessageList

Animations (reanimated hooks) or gesture handlers on dynamic list items (like MessageList) can leak memory. Avoid adding them to custom message components.

Usage of ChannelContext within Customized Components

The ChannelContext is useful, but using it deep in the message tree can cause unnecessary re-renders.