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

    Digital marketing without third-party cookies – new rules
    • Technology
    • Trends

    Digital marketing without third-party cookies – new rules

    February 21, 2024 by createIT
    eCommerce healthcheck
    • Services
    • Trends

    eCommerce healthcheck

    January 24, 2024 by createIT
    Live Visitor Count in WooCommerce with SSE
    • Dev Tips and Tricks

    Live Visitor Count in WooCommerce with SSE

    December 12, 2023 by createIT
    Calculate shipping costs programmatically in WooCommerce
    • Dev Tips and Tricks

    Calculate shipping costs programmatically in WooCommerce

    December 11, 2023 by createIT
    Designing a cookie consent modal certified by TCF IAB
    • Dev Tips and Tricks

    Designing a cookie consent modal certified by TCF IAB

    December 7, 2023 by createIT
    Understanding the IAB’s Global Vendor List (GVL)
    • Dev Tips and Tricks

    Understanding the IAB’s Global Vendor List (GVL)

    December 6, 2023 by createIT
    Effortlessly transform JSON data into a clear schema
    • Uncategorized

    Effortlessly transform JSON data into a clear schema

    December 5, 2023 by createIT
    Anatomy of WordPress malware: a technical deep dive
    • Dev Tips and Tricks
    • Technology

    Anatomy of WordPress malware: a technical deep dive

    December 4, 2023 by createIT
    Initializing CMP with the Stub Script and cmpapi.js
    • Dev Tips and Tricks

    Initializing CMP with the Stub Script and cmpapi.js

    November 29, 2023 by createIT

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

    Contact us