Get a free advice now!

    Pick the topic

    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.


    Sendbird chat – how to optimize message rendering

    Sendbird chat – how to optimize message rendering

    Sendbird UIKit for React provides User Interface components for chat creation. You can add the chat functionality to your application, including video and voice conversation. Chat is fully functional, you can start chatting after importing the npm package.

    Customize message thread

    We would like to customize how messages are displayed: add an additional CSS class, message author and time of creation. This can be done by implementing the renderChatItem component (which is a prop for Channel item).

    // App.jsx
    import React from 'react';
    import './App.css';
    import { Channel, SendBirdProvider } from "sendbird-uikit";
    import { MyCustomChatMessage } from './MyCustomChatMessage';
    import "sendbird-uikit/dist/index.css";
    const YOUR_APP_ID = 'XXX';
    const USER_ID = 'YYY';
    const CHANNEL_URL = 'ZZZ';
    const App = () => {
      return (
          <div className="App">
            <SendBirdProvider appId={YOUR_APP_ID} userId={USER_ID}>
              <div style={{ height: '500px' }}>
                    renderChatItem={({ message, onDeleteMessage, onUpdateMessage }) => (
    export default App;

    Make sure to fill in config variables: YOUR_APP_ID, USER_ID and CHANNEL_URL.

    Sendbird customized messages

    Our component MyCustomChatMessage will override the React UIKit behavior. We can decide how messages should look like, add different rendering based on message type or message sender. To display human friendly time, we’re getting timestamp and converting it to hour format.

    // MyCustomChatMessage.jsx
    import React from 'react';
    import { MsgTypeFile } from './MsgTypeFile';
    export const MyCustomChatMessage = (props) => {
        const { message, onDeleteMessage, onUpdateMessage } = props;
        return (
            <div className={(message.customType ? "type--" + message.customType : '')+ ' customizedMessage'}>
                <div className="customizedMessage_content">
                    { message.messageType === 'file'
                        ? (
                            <MsgTypeFile message={message} />
                        ) :
                <div className="customizedMessage_time">
                    { getTimeFromTimestamp(message.createdAt) }
                <div className="customizedMessage_author">
                    {` by 
                        ${message.messageType === 'admin'
                        ? 'Channel Admin'
                        : message.sender && message.sender.userId}
    const getTimeFromTimestamp = (timestamp) => {
        const date = new Date(timestamp);
        const hours = date.getHours();
        const minutes = "0" + date.getMinutes();
        const seconds = "0" + date.getSeconds();
        const formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
        return formattedTime;

    Chat images rendering

    User can upload an image file and send it to chat. We’re going to add a separate view to get file metadata and display the image with the img-fluid CSS class.

    // MsgTypeFile.jsx
    import React from 'react';
    export const MsgTypeFile = (props) => {
        const {message} = props;
        return (
            <div className="img-fluid">

    Currently, messages in React Chat are rendering very often. When you scroll the chat, the component is refreshed a hundred times every second. This sendbird implementation can:

    • slow down the browser
    • use a high amount of RAM
    • crash the chat
    • cause delays in chat scrolling
    • lead to chat images flickering
    • freeze the browser

    Optimize SB Chat messages

    To prevent excessive re-rendering in React we can use the React.memo function. It was introduced in React version 16.6 to optimize the render performance of pure function components. The result of the function wrapped in React.memo is cached and returned from memory. If function arguments don’t change, output doesn’t need to re-render. Let’s wrap our MyCustomChatMessage in React.memo.

    // MyCustomChatMessage.jsx
    export const MyCustomChatMessage = React.memo((props) => {
        // component body
        // end of component

    Using React.memo with SendBird

    After our performance fix, the chat now works more smoothly, the browser is not doing unnecessary rendering. The component is rendered only on initial load and when fetching old messages.

    That’s it for today’s tutorial. Make sure to follow us for other useful guidelines and sign up for our newsletter to stay up to date.

    0 response

    Add comment

    Your email address will not be published. Required fields are marked *

    Popular news

    Be on the same page as the rest of the industry.

    Contact us