Sendbird chat how to optimize message rendering - Blog | createIT
Get a free advice now!

    Pick the topic
    Developer OutsourcingWeb developingApp developingDigital MarketingeCommerce systemseEntertainment systems

    Thank you for your message. It has been sent.
    Tags

    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' }}>
                <Channel
                    channelUrl={CHANNEL_URL}
                    renderChatItem={({ message, onDeleteMessage, onUpdateMessage }) => (
                        <MyCustomChatMessage
                            message={message}
                            onDeleteMessage={onDeleteMessage}
                            onUpdateMessage={onUpdateMessage}
                        />
                    )}
                />
              </div>
            </SendBirdProvider>
          </div>
      );
    };
    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;
        console.log("rendering");
        return (
            <div className={(message.customType ? "type--" + message.customType : '')+ ' customizedMessage'}>
                <div className="customizedMessage_content">
                    { message.messageType === 'file'
                        ? (
                            <MsgTypeFile message={message} />
                        ) :
                        (
                        <>
                            {message.message}
                        </>
                        )
                    }
                </div>
                <div className="customizedMessage_time">
                    { getTimeFromTimestamp(message.createdAt) }
                </div>
                <div className="customizedMessage_author">
                    {` by 
                        ${message.messageType === 'admin'
                        ? 'Channel Admin'
                        : message.sender && message.sender.userId}
                    `}
                </div>
                <hr/>
            </div>
        );
    };
    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">
                <img
                    className="img-fluid"
                    src={message.url}
                    alt={message.name}
                />
            </div>
        );
    };

    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.

    Comments
    0 response

    Add comment

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

    Popular news

    Automating stock and price updates in WooCommerce
    • Dev Tips and Tricks

    Automating stock and price updates in WooCommerce

    September 23, 2024 by createIT
    Integrating advanced subscription features in WooCommerce
    • Dev Tips and Tricks

    Integrating advanced subscription features in WooCommerce

    September 16, 2024 by createIT
    Fetching Time records from ActiveCollab API
    • Dev Tips and Tricks

    Fetching Time records from ActiveCollab API

    September 9, 2024 by createIT
    Docker Compose for PrestaShop
    • Dev Tips and Tricks

    Docker Compose for PrestaShop

    September 2, 2024 by createIT
    WordPress wizard in admin – step by step
    • Dev Tips and Tricks

    WordPress wizard in admin – step by step

    August 29, 2024 by createIT
    Order Status Sync between PrestaShop and External APIs
    • Dev Tips and Tricks

    Order Status Sync between PrestaShop and External APIs

    August 26, 2024 by createIT
    What is PHP used for in web development 
    • Dev Tips and Tricks

    What is PHP used for in web development 

    August 22, 2024 by createIT
    Automating WooCommerce product availability date
    • Dev Tips and Tricks

    Automating WooCommerce product availability date

    August 15, 2024 by createIT
    WP Quiz Adventure – FAQ
    • Dev Tips and Tricks

    WP Quiz Adventure – FAQ

    August 12, 2024 by createIT

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

    Contact us