Presence and a typing indicator that expires
Asha sends three "typing" pings 100ms apart. Each one resets a 400ms timer kept in a ref; when they stop, the indicator disappears by itself, with no "stopped typing" message needed. Ben leaves later.
Live data reaches a React app in four ways: polling (ask on a timer), long polling (the server holds the request until something changes), Server-Sent Events (a one-way stream from the server) and WebSockets (a two-way connection); whichever you pick, the client must reconnect with backoff, merge updates into state without duplicates, and show presence and typing indicators that expire.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a usePolling(fn, ms) hook that calls fn immediately and then every ms, skips calls while the tab is hidden, and stops on unmount.
Write the backoff delay function with a 30-second cap and full jitter.
Explain it without notes
Compare polling, long polling, SSE and WebSockets.
How would you implement reliable reconnection for a WebSocket in React?
How do you merge live updates into existing state safely?
How would you implement a typing indicator?
Preview
Console
Nothing logged yet.Expected console output
Online: nobody
Online: Asha
Online: Asha, Ben
Online: Asha, Ben | Asha is typing…
Online: Asha, Ben
Online: Asha