What React skills does "Build a Real-Time Chat" practice?

This challenge practices: useState, useEffect, useRef, scroll management, timers. It is rated hard difficulty and takes approximately 35 minutes.

What are the hints for "Build a Real-Time Chat"?

Use useRef with scrollIntoView({ behavior: "smooth" }) to auto-scroll on new messages Simulate bot response with setTimeout and a typing indicator state Handle the Enter key in onKeyDown, checking for e.key === "Enter" and !e.shiftKey

hard35 min

Build a Real-Time Chat

Build a chat interface that simulates real-time messaging. The component should auto-scroll to the latest message, support sending messages with Enter key, show typing indicators, and display timestamps. Simulate incoming messages with a timer to emulate a real-time experience.

Skills

useStateuseEffectuseRefscroll managementtimers

Tests

Shows initial welcome message
Sends a message when clicking Send
Shows typing indicator after sending
Bot responds after a delay
Sends message with Enter key

Your Code

Loading editor...