React · Hooks (Comprehensive)

useState Hook

Master the useState Hook - React's most fundamental Hook for adding state to function components with detailed examples and best practices.

Find videos you like?

Save to resource drawer for future reference!

What is useState?

Adding state to function components

useState is a React Hook that lets you add state to function components. State is data that can change over time and trigger re-renders.

Basic Syntax

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

state:Current value of the state

setState:Function to update the state

initialValue:Starting value (can be any type)

Key Concept

When you call setState, React re-renders your component with the new value!

Step-by-Step Guide

Learn useState progressively

Step 1: Import useState

First, import useState from React at the top of your component file.

import React, { useState } from 'react';

Pro Tip

You can import multiple hooks: { useState, useEffect, useContext }.

Step 2: Initialize State

Call useState with an initial value to create a state variable.

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

const [name, setName] = useState('');

const [user, setUser] = useState(null);

Key Point

useState returns an array: [currentValue, setterFunction]. Use array destructuring!

Step 3: Use State in JSX

Display the state value in your component's JSX.

function Counter() {}

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

return (

<div>

Current count: {}count}

</div>

);

};

Important

Use curly braces {} to embed JavaScript values in JSX. State values are reactive!

Step 4: Update State

Use the setter function to update the state value.

const handleClick = () => {}

setCount(count + 1); // Direct update

setCount(prevCount => prevCount + 1); // Functional update

});

Click me

</button>

Key Point

State updates trigger re-renders! Use functional updates when new state depends on previous state.

Example 1: Simple Counter

Basic useState usage

Counter with useState

Click buttons to see state updates

Frontend

function Counter() {
  // Declare state variable with initial value 0
  const [count, setCount] = React.useState(0);

  return (
    <div className="container">
      <h1>🔢 Counter</h1>

      <div className="counter-display">
        {count}
      </div>

      <div className="buttons">
        <button 
          onClick={() => setCount(count - 1)}
          className="btn-decrement"
        >
          - Decrement
        </button>
        
        <button 
          onClick={() => setCount(0)}
          className="btn-reset"
        >
          Reset
        </button>
        
        <button 
          onClick={() => setCount(count + 1)}
          className="btn-increment"
        >
          + Increment
        </button>
      </div>

      <div className="info-box">
        <h3>How it works:</h3>
        <ul>
          <li>• useState(0) creates state with initial value 0</li>
          <li>• count holds the current value</li>
          <li>• setCount updates the value</li>
          <li>• Component re-renders on each update</li>
        </ul>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);

Live Preview

Loading preview...

Functional Updates

Update based on previous state

When updating state based on the previous state, always use the functional form. This ensures you're working with the latest state value!

❌ Wrong: Direct Value

// Can miss updates!

setCount(count + 1);

If multiple updates happen quickly, some may be lost!

✅ Right: Updater Function

// Always correct!

setCount(prev => prev + 1);

React guarantees you get the latest value!

Example 2: Multiple State Variables

Managing different pieces of state

Form with Multiple States

Each input has its own state

Frontend

function UserForm() {
  // Multiple useState calls for different data
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [age, setAge] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);

  function handleSubmit(e) {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 3000);
  }

  return (
    <div className="container">
      <h1>📝 User Form</h1>

      {submitted && (
        <div className="success">
          ✅ Form submitted successfully!
        </div>
      )}

      <form onSubmit={handleSubmit}>
        <div className="field">
          <label>Name</label>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="John Doe"
            required
          />
        </div>

        <div className="field">
          <label>Email</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="john@example.com"
            required
          />
        </div>

        <div className="field">
          <label>Age</label>
          <input
            type="number"
            value={age}
            onChange={(e) => setAge(e.target.value)}
            placeholder="25"
            required
          />
        </div>

        <button type="submit" className="btn-submit">
          Submit
        </button>
      </form>

      {name && (
        <div className="preview">
          <h3>Preview:</h3>
          <p><strong>Name:</strong> {name}</p>
          <p><strong>Email:</strong> {email}</p>
          <p><strong>Age:</strong> {age}</p>
        </div>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<UserForm />);

Live Preview

Loading preview...

Key Takeaways

Remember these important points

Returns Array

useState returns [currentValue, setterFunction]. Use array destructuring to name them.

Triggers Re-render

Calling setState causes component to re-render with the new state value.

Functional Updates

Use updater function when new state depends on previous: setState(prev => prev + 1)

Multiple States

You can call useState multiple times in one component for different state variables.

Most Used Hook!

useState is the most commonly used React Hook. Master it, and you'll be able to build interactive components easily!

Previous Topic

Rules of Hooks

Master the two fundamental rules of Hooks and understand why they're essential for React to work.

Next Topic

useEffect Deep Dive

Master useEffect: cleanup functions, dependency arrays, effects lifecycle, and common patterns.

Ask a Question

Have a question about useState Deep Dive? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Hooks (Comprehensive)

useState Hook

Master the useState Hook - React's most fundamental Hook for adding state to function components with detailed examples and best practices.

Find videos you like?

Save to resource drawer for future reference!

What is useState?

Adding state to function components

useState is a React Hook that lets you add state to function components. State is data that can change over time and trigger re-renders.

Basic Syntax

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

state:Current value of the state

setState:Function to update the state

initialValue:Starting value (can be any type)

Key Concept

When you call setState, React re-renders your component with the new value!

Step-by-Step Guide

Learn useState progressively

Step 1: Import useState

First, import useState from React at the top of your component file.

import React, { useState } from 'react';

Pro Tip

You can import multiple hooks: { useState, useEffect, useContext }.

Step 2: Initialize State

Call useState with an initial value to create a state variable.

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

const [name, setName] = useState('');

const [user, setUser] = useState(null);

Key Point

useState returns an array: [currentValue, setterFunction]. Use array destructuring!

Step 3: Use State in JSX

Display the state value in your component's JSX.

function Counter() {}

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

return (

<div>

Current count: {}count}

</div>

);

};

Important

Use curly braces {} to embed JavaScript values in JSX. State values are reactive!

Step 4: Update State

Use the setter function to update the state value.

const handleClick = () => {}

setCount(count + 1); // Direct update

setCount(prevCount => prevCount + 1); // Functional update

});

Click me

</button>

Key Point

State updates trigger re-renders! Use functional updates when new state depends on previous state.

Example 1: Simple Counter

Basic useState usage

Counter with useState

Click buttons to see state updates

Frontend

function Counter() {
  // Declare state variable with initial value 0
  const [count, setCount] = React.useState(0);

  return (
    <div className="container">
      <h1>🔢 Counter</h1>

      <div className="counter-display">
        {count}
      </div>

      <div className="buttons">
        <button 
          onClick={() => setCount(count - 1)}
          className="btn-decrement"
        >
          - Decrement
        </button>
        
        <button 
          onClick={() => setCount(0)}
          className="btn-reset"
        >
          Reset
        </button>
        
        <button 
          onClick={() => setCount(count + 1)}
          className="btn-increment"
        >
          + Increment
        </button>
      </div>

      <div className="info-box">
        <h3>How it works:</h3>
        <ul>
          <li>• useState(0) creates state with initial value 0</li>
          <li>• count holds the current value</li>
          <li>• setCount updates the value</li>
          <li>• Component re-renders on each update</li>
        </ul>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Counter />);

Live Preview

Loading preview...

Functional Updates

Update based on previous state

When updating state based on the previous state, always use the functional form. This ensures you're working with the latest state value!

❌ Wrong: Direct Value

// Can miss updates!

setCount(count + 1);

If multiple updates happen quickly, some may be lost!

✅ Right: Updater Function

// Always correct!

setCount(prev => prev + 1);

React guarantees you get the latest value!

Example 2: Multiple State Variables

Managing different pieces of state

Form with Multiple States

Each input has its own state

Frontend

function UserForm() {
  // Multiple useState calls for different data
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [age, setAge] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);

  function handleSubmit(e) {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 3000);
  }

  return (
    <div className="container">
      <h1>📝 User Form</h1>

      {submitted && (
        <div className="success">
          ✅ Form submitted successfully!
        </div>
      )}

      <form onSubmit={handleSubmit}>
        <div className="field">
          <label>Name</label>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="John Doe"
            required
          />
        </div>

        <div className="field">
          <label>Email</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="john@example.com"
            required
          />
        </div>

        <div className="field">
          <label>Age</label>
          <input
            type="number"
            value={age}
            onChange={(e) => setAge(e.target.value)}
            placeholder="25"
            required
          />
        </div>

        <button type="submit" className="btn-submit">
          Submit
        </button>
      </form>

      {name && (
        <div className="preview">
          <h3>Preview:</h3>
          <p><strong>Name:</strong> {name}</p>
          <p><strong>Email:</strong> {email}</p>
          <p><strong>Age:</strong> {age}</p>
        </div>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<UserForm />);

Live Preview

Loading preview...

Key Takeaways

Remember these important points

Returns Array

useState returns [currentValue, setterFunction]. Use array destructuring to name them.

Triggers Re-render

Calling setState causes component to re-render with the new state value.

Functional Updates

Use updater function when new state depends on previous: setState(prev => prev + 1)

Multiple States

You can call useState multiple times in one component for different state variables.

Most Used Hook!

useState is the most commonly used React Hook. Master it, and you'll be able to build interactive components easily!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Rules of Hooks

useEffect Deep Dive

Building Your Learning Module...

useState Hook

Basic Syntax

Key Concept

Step 1: Import useState

Step 2: Initialize State

Step 3: Use State in JSX

Step 4: Update State

Counter with useState

❌ Wrong: Direct Value

✅ Right: Updater Function

Form with Multiple States

Returns Array

Triggers Re-render

Functional Updates

Multiple States

Most Used Hook!

Rules of Hooks

useEffect Deep Dive

useState Hook

Basic Syntax

Key Concept

Step 1: Import useState

Step 2: Initialize State

Step 3: Use State in JSX

Step 4: Update State

Counter with useState

❌ Wrong: Direct Value

✅ Right: Updater Function

Form with Multiple States

Returns Array

Triggers Re-render

Functional Updates

Multiple States

Most Used Hook!