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

We’ve looked at React Hooks before, around here at CSS-Tricks. I have an article that introduces them as well that illustrates how to use them to create components through functions. Both articles are good high-level overviews about the way they work, but they open up a lot of possibilities, too.

So, that’s what we’re going to do in this article. We’re going to see how hooks make our development process easier and faster by building a chat application.

Specifically, we are building a chat application using Create React App. While doing so, we will be using a selection of React Hooks to simplify the development process and to remove a lot of boilerplate code that’s unnecessary for the work.

There are several open source Reacts hooks available and we’ll be putting those to use as well. These hooks can be directly consumed to build features that otherwise would have taken more of code to create. They also generally follow well-recognized standards for any functionality. In effect, this increases the efficiency of writing code and provides secure functionalities.

The chat application we are going to build will have the following features:

We’re working with a few assumptions as we dive in:

OK, we’re going to want to get our development environment ready to start writing code. First off, React requires both Node and npm. You can set them up here.

Let’s spin up a new project from the Terminal:

Now we should be able to navigate to in the browser and get the default welcome page for the project.

From here, we’re going to break the work down by the hooks we’re using. This should help us understand the hooks as we put them into practical use.

The first hook we're going to use is useState. It allows us to maintain state within our component as opposed to, say, having to write and initialize a class using . Data that remains constant, such as username, is stored in variables. This ensures the data remains easily available while requiring a lot less code to write.

The main advantage of is that it's automatically reflected in the rendered component whenever we update the state of the app. If we were to use regular variables, they wouldn’t be considered as the state of the component and would have to be passed as props to re-render the component. So, again, we’re cutting out a lot of work and streamlining things in the process.

The hook is built right into React, so we can import it with a single line:

We are going to create a simple component that returns "Hello" if the user is already logged in or a login form if the user is logged out. We check the variable for that.

Our form submissions will be handled by a function we’re creating called . It will check if the Name form field is completed. If it is, we will set the and values for that user. Otherwise, we’ll throw in a message reminding the user that the Name field is required in order to proceed.

That’s how we’re using the hook in our chat application. Again, we’re importing the hook from React, constructing values for the user’s ID and chat room location, setting those values if the user’s state is logged in, and returning a login form if the user is logged out.

We're going to use an open source hook called useSocket to maintain a connection to our server. Unlike , this hook is not baked into React, so we’re going to have to add it to our project before importing it into the app.

The server connection is maintained by using the React Hooks version of the socket.io library, which is an easier way of maintaining websocket connections with a server. We are using it for sending and receiving real-time messages as well as maintaining events, like connecting to a room.

The default socket.io client library has global declarations, i.e., the socket variable we define can be used by any component. However, our data can be manipulated from anywhere and we won't know where those changes are happening. Socket hooks counter this by constraining hook definitions at the component level, meaning each component is responsible for its own data transfer.

The basic usage for looks like this:

We’re going to be using a few socket s as we move ahead. For the sake of reference, all of them are outlined in the socket.io documentation. But for now, let’s import the hook since we’ve already installed it.

Next, we’ve got to initialize the hook by connecting to our server. Then we’ll log the socket in the console to check if it is properly connected.

Open the browser console and the URL in that snippet should be logged.

Our chat app will make use of the useImmer hook to manage state of arrays and objects without mutating the original state. It combines and Immer to give immutable state management. This will be handy for managing lists of people who are online and messages that need to be displayed.

Using Immer with useState allows us to change an array or object by creating a new state from the current state while preventing mutations directly on the current state. This offers us more safety as far as leaving the current state intact while being able to manipulate state based on different conditions.

Again, we’re working with a hook that’s not built into React, so let’s import it into the project:

The basic usage is pretty straightforward. The first value in the constructor is the current state and the second value is the function that updates that state. The hook then takes the starting values for the current state.

Notice the hook in that last example? We’re using that to make a draft copy of the current data we can use to manipulate the data safely and use it as the next state when changes become immutable. Thus, our original data is preserved until we’re done running our functions and we’re absolutely clear to update the current data.

Alright, we’re back to a hook that’s built right into React. We’re going to use the useEffect hook to run a piece of code only when the application loads. This ensures that our code only runs once rather than every time the component re-renders with new data, which is good for performance.

All we need to do to start using the hook is to import it — no installation needed!

We will need a component that renders a message or an update based on the presence or absence of a sende ID in the array. Being the creative people we are, let’s call that component .

Let’s put our socket logic inside so that we don't duplicate the same set of messages repeatedly when a component re-renders. We will define our message hook in the component, connect to the socket, then set up listeners for new messages and updates in the hook itself. We will also set up update functions inside the listeners.

Another touch we’ll throw in for good measure is a "join" message if the username and room name are correct. This triggers the rest of the event listeners and we can receive past messages sent in that room along with any updates required.

We only have a few more tweaks to wrap up our chat app. Specifically, we still need:

All of this builds off of what we’ve already covered so far. I’m going to drop in the full code for the file to show how everything fits together.

That's it! We built a fully functional group chat application together! How cool is that? The complete code for the project can be found here on GitHub.

What we’ve covered in this article is merely a glimpse of how React Hooks can boost your productivity and help you build powerful applications with powerful front-end tooling. I have built a more robust chat application in this comprehensive tutorial. Follow along if you want to level up further with React Hooks.

Now that you have hands-on experience with React Hooks, use your newly gained knowledge to get even more practice! Here are a few ideas of what you can build from here:

Have questions along the way? Leave a comment and let’s make awesome things together.

Source: Css-tricks.com

Powered by NewsAPI.org

Keywords:

Instant messaging • Application software • React (JavaScript library) • Source lines of code • React (JavaScript library) • Cascading Style Sheets • Application software • Boilerplate code • Open-source model • Computer program • Integrated development environment • Source code • React (JavaScript library) • Node.js • Npm (software) • Let's Spin! • Web browser • User (computing) • Variable (computer science) • Data • Source code • Rendering (computer graphics) • System • Patch (computing) • State (computer science) • Application software • Variable (computer science) • System • User (computing) • Login • User (computing) • Variable (computer science) • Subroutine • User (computing) • Chat room • User (computing) • Login • Login • Form (HTML) • User (computing) • Open-source model • Server (computing) • React (JavaScript library) • Application software • Server (computing) • React (JavaScript library) • Software versioning • Socket.IO • Library (computing) • WebSocket • Server (computing) • Real-time computing • Event-driven programming • Socket.IO • Web browser • Library (computing) • Declaration (computer programming) • Variable (computer science) • Network socket • Semantics • Socket.IO • Server (computing) • Network socket • Command-line interface • Web browser • Command-line interface • URL • Instant messaging • Application software • Array data structure • Object (computer science) • List (abstract data type) • State (computer science) • Function (mathematics) • Source code • Application software • Source code • System • Rendering (computer graphics) • Data • System • Rendering (computer graphics) • Logic • Message passing • Rendering (computer graphics) • Message passing • Hooking • Component-based software engineering • Hypertext Transfer Protocol • Unix domain socket • Message passing • Patch (computing) • Hooking • Patch (computing) • Subroutine • User (computing) • Observer pattern • Application software • Functional group • Application software • Source code • GitHub • Application software • Compiler • Application software • Experience point •