Using the useState Hook in ReactJS

When I first learned ReactJS while in Flatiron School’s full stack web development immersive I was taught that if my component was going to use state that component should be a Class component. So, along I went to create an application where every component that used state was a class component and all the other components were functional components.

After graduating from the program I had heard about something called React hooks. So I decided to do some research and teach myself this small addition to React. Hooks were introduced into React at a React conference in Oct 2018, so at the time when I first started using React, hooks were only about half a year old. To use hooks you must have at least React 16.8.0 installed. In short, React hooks allows developers to use state in functional components. This went against everything I had learned before, so it definitely sparked my interest. Before learning about hooks, class based components were often referred to as stateful components and functional components as stateless components. I knew that being a developer meant that I had to deal with an ever-changing, ever-growing world and this was my first taste of that.

The above example is the most basic use of React hooks. It uses the “useState” function as a hook. First, useState must be imported from React. In the “useState(0)” part of the constant whatever you put in the parentheses will be the default of that state. (Anything can go into that parentheses, a string, a number, an object, or an empty array). This is the equivalent to declaring your state object in a class based component. Next, dogs is just the name of the state variable. This could be named anything you want. After that “setDogs” works just like a function that would use this.setState in a class based component. To align with best practices this should always be set followed by whatever you named your state variable. If you named your state variable data, the setState function should be called setData and so forth.

This above example shows how the class component would be written.You may notice a few subtle, but very important differences. First there is no “this” when using a functional component. Second, when setting a new state using the setDogs function there is no need to name dogs again like you would in the class based component. You would simply call setDogs followed by whatever you want to change it to inside parentheses.

In this example there are many different state variables all using separate useState hooks. This is the ideal way to declare state variables as opposed to using just one state variable with a lot of data inside because the setState function in functional components replaces information rather than updating it. This means that if you had a bunch of different state like you would in class based components and used a setState function, you would need to write out all the different state that you would want to be saved including the one you initially wanted to change. This is tedious and not convention which makes the above example the best way to use the useState hook.

So hooks are all good and fun but why do they exist? What problem do they really solve?

First, I really appreciate that hooks are completely opt-in. It doesn’t need to be implemented immediately but if you do decide to implement it, it doesn’t break other parts of your app. I went back to one of my older projects and used hooks in a part of my app but not the entire thing and it still worked perfectly. Second, For newer developers the “this” keyword used in class components is kind of difficult to get a grasp of. With the use of hooks this is no longer used and that tiny headache can be skipped entirely. Next, functional components are easier to read because they are plain javascript and when using them you end up with less code. Lastly, the React team has said that functional components will get a performance boost in future React versions.

Related posts:

A Balkan beauty at the edge of the Adriatic Sea, Montenegro is one of those places that just does not get enough credit. It’s a shame! Not only is Montenegro rich in history, natural beauty…

Dos meses de deseos frustrados.. “Tiempo” is published by Proyecto Tres.

Music has been a part of human life since the dawn of time. It has been used to express emotions, to tell stories, to lift spirits, and to bring people together. But what is it about music that makes…