State & useState Hook

⚛️ ReactLesson 3Beginner

State is data that can change over time and causes React to re-render the component when it does. The useState hook is the primary way to add state to function components.

1 useState Basics

React — useState

import { useState } from "react";

function Counter() {
  // [currentValue, setterFunction] = useState(initialValue)
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

2 Functional Updates & Object State

React — State Patterns

// Functional update — always use when new state depends on old state
setCount(prev => prev + 1);

// Object state — spread to preserve other fields
const [user, setUser] = useState({ name: "Balaji", age: 22 });
setUser(prev => ({ ...prev, age: 23 }));  // ✅ correct
// setUser({ age: 23 });                  // ❌ loses 'name'

// Array state
const [items, setItems] = useState([]);
// Add
setItems(prev => [...prev, newItem]);
// Remove
setItems(prev => prev.filter(item => item.id !== id));
// Update
setItems(prev => prev.map(item => item.id === id ? { ...item, done: true } : item));

3 Toggle, Input & Multiple State

React — Common State Patterns

function LoginForm() {
  const [email, setEmail]       = useState("");
  const [password, setPassword] = useState("");
  const [showPass, setShowPass] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={email}
        onChange={e => setEmail(e.target.value)}
        type="email"
        placeholder="Email"
      />
      <input
        value={password}
        onChange={e => setPassword(e.target.value)}
        type={showPass ? "text" : "password"}
        placeholder="Password"
      />
      <button type="button" onClick={() => setShowPass(p => !p)}>
        {showPass ? "Hide" : "Show"} Password
      </button>
      <button type="submit">Login</button>
    </form>
  );
}

4 Code Challenge

Challenge: Build a shopping cart component. Maintain an array of items in state. Add an "Add Item" button and a "Remove" button per item. Display the total count and total price.