Build a Chat App Using React Hooks in 100 Lines of Code

This tutorial demonstrates the power of React Hooks by building a functional chat application in surprisingly concise code. Previous articles have introduced React Hooks, showcasing their ability to create components using functions. This tutorial takes it further, illustrating how Hooks simplify development and reduce boilerplate.

We'll leverage several React Hooks, including some open-source options, to streamline the process and build features efficiently. These pre-built hooks adhere to established standards, enhancing code security and maintainability.

Project Requirements

Our chat application will include:

• Retrieval of past messages from a server.
• Group chat room functionality.
• Real-time updates for user connections and disconnections.
• Sending and receiving messages.

Assumptions:

• The server is treated as a black box, communicating via simple sockets.
• Styling is handled by a single CSS file (available in the linked repository).

Setting Up the Development Environment

This project requires Node.js and npm (Node Package Manager). Install them if necessary. Then, create the React project using Create React App:

npx create-react-app socket-client
cd socket-client
npm start

Navigate to http://localhost:3000 to see the default welcome page. We'll structure the tutorial around the Hooks used.

useState Hook

The useState Hook manages component state. Instead of using this.state in a class component, we use useState to store persistent data, like the username. Updates to useState variables automatically re-render the component.

Import the Hook:

import React, { useState } from 'react';

A simple component will display "Hello" if logged in, or a login form otherwise, based on the id variable:

// App.js
import React, { useState } from 'react';
import './index.css';

export default () => {
  const [id, setId] = useState("");
  const [nameInput, setNameInput] = useState("");
  const [room, setRoom] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    if (!nameInput) {
      return alert("Name can't be empty");
    }
    setId(nameInput); // Corrected: Use nameInput instead of name
    socket.emit("join", nameInput, room); // Corrected: Use nameInput instead of name
  };

  // ... (rest of the component)
};

This demonstrates useState for managing login status.

useSocket Hook

The open-source useSocket Hook manages the server connection using the socket.io library. This provides a more manageable approach to WebSocket connections compared to the global declarations of the standard socket.io client.

Install the Hook:

npm add use-socket.io-client

Basic usage:

const [socket] = useSocket('socket-url');

Import and initialize:

import useSocket from 'use-socket.io-client';
const [socket] = useSocket('<your-socket-url>');
socket.connect();
console.log(socket);</your-socket-url>

Check the browser console for the connection.

useImmer Hook

The useImmer Hook simplifies immutable state management for arrays and objects. It prevents direct mutation of the original state. This is crucial for managing lists of online users and messages.

Install the Hook:

npm add use-immer

Basic usage:

const [data, setData] = useImmer(defaultValue);

setData creates a draft copy for safe manipulation, ensuring the original state remains intact.

setData(draft => {
  draft.push(newItem);
});

useEffect Hook

The built-in useEffect Hook executes code after rendering. We'll use it to handle socket listeners and avoid redundant message displays.

Import:

import React, { useState, useEffect } from 'react';

A Messages component renders messages and updates:

const Messages = props => props.data.map(m => (
  m[0] !== '' ? <div>{m[0]}: {m[1]}</div> : <div classname="innermsg">{m[1]}</div>
));

Socket logic within useEffect prevents repeated message rendering:

useEffect(() => {
  socket.on('update', message => setMessages(draft => {
    draft.push(['', message]);
  }));
  // ... other socket listeners
}, []);

A "join" message triggers further listeners.

Final Touches and Complete Code

The final app requires:

• An Online component to display online users.
• A useImmer hook and socket listener for online users.
• A message submission handler.

The complete App.js is too extensive to include here, but the complete code is available on GitHub (link provided in the original article).

This tutorial demonstrates the efficiency of React Hooks for building complex applications with minimal code. The example showcases a functional chat application, but the principles can be applied to a wide range of projects.

The above is the detailed content of Build a Chat App Using React Hooks in 100 Lines of Code. For more information, please follow other related articles on the PHP Chinese website!