// src/components/MessageInput.tsx
import React, { useState } from 'react';

interface MessageInputProps {
  onSendMessage: (message: string) => void;
}

export const MessageInput: React.FC<MessageInputProps> = ({ onSendMessage }) => {
  const [message, setMessage] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (message.trim()) {
      onSendMessage(message);
      setMessage('');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="flex p-4">
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        className="flex-grow border rounded-l-md p-2 focus:outline-none"
        placeholder="Type a message..."
      />
      <button type="submit" className="bg-blue-500 text-white px-4 rounded-r-md">
        Send
      </button>
    </form>
  );
};

Step 4: Wiring Up Real-Time Communication

This is where the magic happens. We need to connect our React frontend to the Socket.IO server. A custom hook is the perfect pattern for managing the socket connection lifecycle.

First, create a singleton instance of the socket client to avoid multiple connections.

// src/socket.ts
import { io } from 'socket.io-client';

const URL = 'http://localhost:3001';
export const socket = io(URL);

Now, let's tie this into our state. The UI shouldn't know or care about Socket.IO directly. It should only react to state changes.

Step 5: Managing State with Modern Hooks

We'll use Zustand to create a store for our chat. This store will hold our messages and any other relevant global state, like connection status.

// src/store/useChatStore.ts
import { create } from 'zustand';

interface Message {
  id: string;
  text: string;
  author: string;
  timestamp: number;
}

interface ChatState {
  messages: Message[];
  addMessage: (message: Message) => void;
}

export const useChatStore = create<ChatState>((set) => ({
  messages: [],
  addMessage: (message) =>
    set((state) => ({ messages: [...state.messages, message] })),
}));

Now, let's connect our socket events to this store. We can do this in a central place, like our main `App.tsx` file, to keep logic organized.

// src/App.tsx
import { useEffect } from 'react';
import { socket } from './socket';
import { useChatStore } from './store/useChatStore';

function App() {
  const { addMessage } = useChatStore();

  useEffect(() => {
    function onConnect() {
      console.log('Connected to server!');
    }

    function onDisconnect() {
      console.log('Disconnected from server!');
    }

    function onReceiveMessage(value: any) {
      // Here, you'd add logic to differentiate your messages from others
      addMessage(value);
    }

    socket.on('connect', onConnect);
    socket.on('disconnect', onDisconnect);
    socket.on('receiveMessage', onReceiveMessage);

    return () => {
      socket.off('connect', onConnect);
      socket.off('disconnect', onDisconnect);
      socket.off('receiveMessage', onReceiveMessage);
    };
  }, [addMessage]);

  // ... rest of your component rendering ChatWindow, etc.
}

When our MessageInput component calls onSendMessage, we'll simply emit an event through our socket instance, and also add the message directly to our own state for immediate feedback.

Step 6: Adding Essential Features (The "2025" Touch)

A basic chat is good, but modern features are what create a great user experience.

Typing Indicators

This provides crucial real-time feedback. The logic is simple:

1. Client: When a user starts typing in MessageInput, emit a typing event. Use a debounce function to emit a stopTyping event a second or two after they've stopped.
2. Server: When it receives a typing or stopTyping event, it broadcasts that event to all other clients.
3. Client: Listen for these events and display a "User is typing..." message in the UI.

Online Presence

Users want to know who is available to chat.

1. Server: Maintain a list of connected users. On connection, add the user (you'll need to pass some user info on connection) and broadcast the updated list. On disconnect, remove them and broadcast again.
2. Client: Store the online user list in your Zustand store and render it somewhere in the UI.

Step 7: Deployment & Scaling Considerations

Getting your app on the internet is the final step. For our stack, deployment is straightforward:

• Frontend (React/Vite): Deploy to a static hosting provider like Vercel or Netlify. They offer seamless Git integration and CI/CD out of the box.
• Backend (Node.js/Socket.IO): Deploy to a service like Render or Fly.io. They have simple workflows for deploying Node.js applications.

A crucial scaling note: If your app becomes popular and you need to run multiple instances of your backend server, a standard Socket.IO setup will break. A user connected to Server A won't get messages from a user connected to Server B. To solve this, you need to use an adapter, like the Socket.IO Redis Adapter. This uses a central Redis instance to broadcast events across all your server instances, ensuring everyone stays in sync.

Conclusion

And there you have it—a complete blueprint for building a modern, performant chat application in React. We’ve gone from selecting a cutting-edge tech stack to implementing core functionality, adding modern UX features, and planning for future scale. This foundation is solid, maintainable, and ready for you to build upon. Now go ahead and create something amazing!