useState Hook

The useState hook is used in React functional components to store and manage data (state) that changes over time.

In simple words:
It helps your component remember values and update the UI when they change.

Why use useState?

To store dynamic data (like count, input, toggle)
To update UI automatically when data changes
To manage user interaction

javascript

const [state, setState] = useState(initialValue);

state → current value
setState → function to update value
initialValue → starting value

How useState Works

Step 1: Initialize state

javascript

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

Step 2: React remembers state

Even after re-render, value stays updated

Step 3: Update state

plaintext

setCount(count + 1);

Step 4: Component re-renders

UI updates automatically

javascript

import { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Click {count} me
    </button>
  );
}

useState(0) → initial value is 0
setCount(count + 1) → increment value
UI updates automatically

plaintext

import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = () => {
    setSubmitted(true);
  };

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

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

      <button onClick={handleSubmit}>Submit</button>

      {submitted && <p>Form Submitted!</p>}
    </div>
  );
}

export default Form;

useState('') → empty initial value
onChange → updates state dynamically
submitted → controls UI rendering

Important Concepts

1. Functional Update (Important)

Use when state depends on previous value:

javascript

setCount(prevCount => prevCount + 1);

2. State is Asynchronous

Updates are not immediate
React batches updates for performance

3. State Does Not Merge Automatically

❌ Wrong:

plaintext

setState({ name: "Anil" });

✅ Correct:

plaintext

setState(prev => ({ ...prev, name: "Anil" }));

4. Can Store Any Data Type

Number
String
Array
Object
Boolean

5. Lazy Initialization (Advanced)

plaintext

const [count, setCount] = useState(() => computeValue());

Runs only once (performance optimization)

6. No Re-render if Same Value

plaintext

setValue(10); // no re-render if already 10

When to Use useState

Use it when:

You need simple state
Data changes over time
UI depends on user interaction

Performance Tips

Use functional updates when needed
Avoid unnecessary re-renders
Use useReducer for complex logic

useState is used for managing state in functional components
It returns value + update function
Updating state causes re-render
Best for simple and small state management