Understanding the useState Hook in React

Hey everyone! Today, let’s dive into one of the most important concepts in React — the useState hook. If you've ever wondered how websites remember your clicks, update numbers on the screen, or toggle between light and dark mode, it’s all thanks to state. With useState, you can add this kind of dynamic behavior to our React apps in a super simple way. No complicated logic, no class components — just clean, functional code. By the end of this post, you’ll understand exactly how useState works, why it’s essential, and how you can start using it to build interactive, user-friendly interfaces. Let’s get started!

What is the useState Hook in React?

The useState hook is a special function in React that allows you to add state to a functional component. State is like a memory for a component — it lets you store information that can change over time and re-render the UI when it changes.

Why Do We Use useState?

Automatic UI Updates: When the state changes, React automatically re-renders the component, so you don't need to manually update the UI.

Component Memory: It allows the component to "remember" things between renders.

Cleaner Code: It makes functional components behave like class components with state but in a simpler, cleaner way.

Why Not Change State Directly?

React Needs to Know: If you change a variable directly, React won't know that it needs to re-render the component.

Reactivity: useState tells React to keep track of the variable and re-render the component when it changes.

Predictable Behavior: React tracks multiple state changes for better performance, which wouldn't happen if you update variables directly.

How Does useState Work?

1. First we need to import useState hook from React library

2. Then, we need call useState hook and intialize it with zero or whatever value we want it to be intially.

   useState hook returns two things :

   \> current state

   \> state updater function.

When we call the update function, React knows the state has changed, and it will re-render the component.

A Simple Counter Functionality implemented using useState Hook

Line-by-Line Code Explanation

1. Import Statement:

   

   We import useState from React so we can use it to manage state in the functional component.

2. State Declaration:

   

   • count: This is the state variable. It holds the current value of the count (initially 0).

   • setCount: This is a special function to update the count state. When you call setCount, React knows to re-render the component.

   • useState(0): It sets the initial value of count to 0.

3. Displaying State:

   

   • This shows the current value of count inside the <h1> tag.

   • When count changes, React automatically updates the displayed value.

4. Button Click Event: The onClick attribute tells React to run the increment function when the button is clicked.

   

5. Update State:

   

   • setCount(count + 1): Calls the setCount function to increase the value of count by 1.

   • Why use setCount? If you tried to do count = count + 1, React wouldn't know that something changed, so the UI wouldn't update.

What Happens If We Change State Directly?

Problem:

• The count will change in memory, but React will not know about it, so the screen won't re-render.

• React tracks changes only when you use setCount(). If you change the variable directly, React doesn't know it needs to re-render the component.

Summary

• useState lets functional components "remember" and "react" to changes in state.

• You get two things from useState: the value of the state and the function to update it.

• Never update state directly; always use the provided update function, so React knows when to re-render.

With useState, you can add dynamic, interactive features to your app, like counters, toggles, and forms.

And that’s it we have come to the end of this article. I hope i have made everything clear about useState hook in React in beginner perspective. Keep following me for more articles like.

Thank you ~ PurnaChandra Bandaru.