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.

#facebook #react #javascript #front-end-development #software-development