Vinayagam

Posted on Apr 29

useState in React Made Easy for Beginners

#react #javascript #tutorial #beginners

Introduction

useState is one of the most commonly used features in React. It is a Hook that helps to store and manage data inside a functional component. In real applications, values keep changing like user input, counters, or form data. To handle these changing values, useState is used.

Why Hooks are used...

In React, we need to update the UI whenever data changes. Earlier this was done using class components, but the code was longer and sometimes confusing. Hooks make this process simple. They allow us to handle data directly inside functions and reduce unnecessary complexity in the code.

Hooks also help to keep related logic in one place, which makes the code easier to understand when the application grows.

useState and how it works...

useState is an inbuilt function in React. It is used to create state in a functional component.

const [count, setCount] = useState(0);

Here, count stores the value and setCount is used to update it. The value inside useState is the initial value.

When setCount is called, React updates the value and re-renders the component. Because of this, the updated value appears on the screen.

Updating state step by step

When the value is updated, a small process happens in the background.

onClick={() => setCount(count + 1)}

When the button is clicked, the current value of count is taken, increased by one, and passed to setCount. React then updates the component and shows the new value.

This makes the UI always stay in sync with the data.

Example with a counter

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

In this example, the value starts from 0. When the button is clicked, setCount updates the value. React automatically updates the UI and shows the new value.

We can also decrease or reset the value in the same way by calling setCount with different values.

Working with input

In real applications, we often take input from the user. useState helps to store that input and display it.

import { useState } from "react";

function InputExample() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <h3>Hello, {name}</h3>
    </div>
  );
}

Here, when the user types something, e.target.value gets the input. That value is passed to setName. After updating, React shows the latest value on the screen.

This is how input fields are connected with state in React.

Using multiple state values

In some cases, we need more than one value. We can use useState multiple times inside the same component.

import { useState } from "react";

function User() {
  const [name, setName] = useState("");
  const [age, setAge] = useState(0);

  return (
    <div>
      <input
        type="text"
        placeholder="Enter name"
        onChange={(e) => setName(e.target.value)}
      />

      <input
        type="number"
        placeholder="Enter age"
        onChange={(e) => setAge(e.target.value)}
      />

      <h3>{name} - {age}</h3>
    </div>
  );
}

Each state works independently and updates the UI when its value changes.

Important idea behind useState

useState connects data and UI. When the value changes, React updates the component and shows the latest value. This is why React applications feel dynamic.

React does not update the UI for normal variables. It only updates when state changes.

Without useState

If a normal variable is used instead of state, React will not track the changes and the UI will not update.

let name = "";

Even if this value changes, React does not re-render the component. Because of this, the updated value will not be shown on the screen.

Final understanding

useState is a simple but powerful concept. It allows us to store values, update them, and automatically reflect those changes in the UI. This makes functional components capable of handling dynamic data in an easy way.

References:

While writing this blog, I referred to some learning resources to understand the concept better.

React Official Documentation
AI tools like ChatGPT for explanation and clarity

DEV Community