Scribd
Upload
22 views3 pages

Notes

The document discusses challenges with live chat applications and different techniques for handling live data updates, including API polling and websockets. It notes that if all chat messages are pushed to the DOM, the page size will grow indefinitely and freeze the browser. Techniques used to prevent this include cleaning old messages, limiting the number of messages stored, and using React features like useMemo and useCallback hooks to optimize re-renders.

Uploaded by

Nishank Garg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
22 views3 pages

Notes

The document discusses challenges with live chat applications and different techniques for handling live data updates, including API polling and websockets. It notes that if all chat messages are pushed to the DOM, the page size will grow indefinitely and freeze the browser. Techniques used to prevent this include cleaning old messages, limiting the number of messages stored, and using React features like useMemo and useCallback hooks to optimize re-renders.

Uploaded by

Nishank Garg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Live Chat >>> infinit scroll >> pagination

when application have live data is involved,


hotstart cricket
zerodha stocks price - websockets
gmail - API polling
crickbuzz - live commentary - doing API polling with interval = 25secs using
waterfall(reverse engineering)
whatsapp chat/other chat application - websockets
youtube live chats = api polling = every 1.5secs
= here order does not matter but in whatsapp order matters.

challenges of live chat:


how to get data live: data layer
how to update data on UI without refreshing.: UI layer.

if we keep pusing div into thee page, page size will blow up.
page will freeze.

if data was not live we use = useEffects.


when live =
web sockets.
= 2 way connections handshake
quickly send data.
bidirectional
API polling
UI request to server
one directional
after a regular interval

why the page is not freezing?


its cleaning the old meesages.

can't push all the chat message in the dom.

youtube can improve the UX, based on browser, it can change the what number of
messages to delete.

docuemnt.getElementByTagName("yt-live-chat-text-message-renderer").length // 237

reason of choose api polling vs websockets

create chat slice.

unshift = to push element in starting vs push.

// to not blow our dom, max state to 10 size.


state.messages.splice(OFFSET_LIVE_CHAT, 1);

add our own chat message.

if one hit enter key to send message, we need to make it a form.


hw: filter search results.

hw: infinite scroll.

on scroll events.
keep videos in redux store and show with offset.

hw: websockets

cors issue bcoz of browser and not swiggy api.


bypass it without installing extensions.

useMemo hook
cache the results of a calculation between re-renderes.

use for performance.


when state changes re-render happens.
when operation is expensives.

on typting in text box, re consiliation is happening.

string mode calls the component twice. but in production it will happen on dev and
not on prod.

if i do heavy operation, the memoize heavy operation for browser.


calculate nth prime number js.

if we have another state to toggler theme, then its depended on calculating prime
number which can be a
heavy operation.

browser freeze bw heavy operation

so we will memoize the result of this function.

now toggle button is working fine. and fast.

chrome allocates memory to each tab, so if one tab freeze might not effect other
tabs.

USECALLBACK hook:
it caches the FUNCTION and not value bw re-renderes.

USE REF HOOK:


change the value of a local variable without re-render.
if we use state, it will re-render.

with let,value increase but it won't rerender.


with const, we will get error.

if we have another state y,


if its value changes, component re renders and value of let variable reset to its
initial value.

3 things:
normal variable
state variable
ref variable = normal variable whose value is not reset on rerender + track by
react.
= its a obj
= when state is changed, ref holds the last state.
= i.e ref value persist bw re-renders.

You might also like