The Startup
Published in

The Startup

Photo by Tatiana Rodriguez on Unsplash

Using Hooks in React: useState

In this intro to my series on hooks, we cover the useState hook and how to use it.

Many of us have spent most of our time in React working with class components. They are comfy, and we understand them.

But the future is here, and hooks are the future. Hooks allow React developers to write cleaner, more concise code that is easier to debug.

“How do hooks even work?”

“But how do you use state? And how do you update it?”

I hear you. I hear you. I would be lying if I said hooks don’t come with a little, teensy bit of anxiety for a developer used to mostly writing class components, but there is no need to be afraid.

Hooks are your friends, and are here to help keep your code clean and concise. Let’s break down why hooks are useful as well as the first hook you’ll likely begin using — useState.

Functional Components and Hooks

Functional components are functions that return JSX. On their own, functional components can’t do anything particularly interesting. Before React v16.8, functional components were mostly used to write presentational components that don’t need to handle any changes in state.

React v16.8 introduced hooks for functional components. Hooks allow functional components to use state in every way class components use them, but with less code.

In class components, setting an initial state and rendering state looks as follows:

...class Person extends Component {
constructor(){
super()

this.state = {
name: "Alex",
job: "Software Developer",
title: "Burger Slayer"
}
}
render () {
return (
<div>
<h1>{this.state.name}</h1>
<h3>{this.state.job}</h3>
<p> AKA: {this.state.title} </p>
</div>
)
}
}

Here are some downsides to this syntax:

  1. Our state is written inside an object that we have to map through using the given keys. This might work well with a few key/value pairs, but what if we need to save a lot of information in state? Our state object can quickly become unwieldy and difficult to maintain or debug.
  2. We are not as expressive as we could be. Yes “this.state.name” does the job, but boy oh boy can that clutter up our code quickly.

There are plenty of people who could list off more reasons why using a class component is less than ideal, but these reasons are sufficient to begin understanding why we need a better way to use state in React.

Enter useState!

The useState hook is available for functional components, and allows us to set an initial state with much greater ease and more readable code. This hook looks like this:

const [name, setName] = useState("Alex")
const [job, setJob] = useState("Software Developer")
const [title, setTitle] = useState("Burger Slayer")

We write separate lines for each field we wish to store in state, and we create a reference to the value as well as its setter method by destructuring the useState hook.

Now it’s time to use our values in a functional component!

...function Person () {  const [name, setName] = useState("Alex")
const [job, setJob] = useState("Software Developer")
const [title, setTitle] = useState("Burger Slayer")
return (
<div>
<h1>{name}</h1>
<h3>{job}</h3>
<p> AKA: {title} </p>
</div>
)
}

Holy cow check out how clean and readable that component is! We can easily see what each value is and it is called within our JSX in a way that is more communicative.

This is only the tip of the iceberg, but I hope this has been helpful in easing you into using hooks in React.

Stay tuned for my next blog where we’ll dive into the mighty useEffect hook!
You can also learn more about hooks here.

Thanks for reading! You can find more of my blogs here. Also connect with me on LinkedIn and check out my Github.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store