Use State 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