React Fundamentals

Chapter 13: useState Hook

13.1 Using useState

useState is the most commonly used hook for managing component state.

import { useState } from 'react';

function Component() {
    const [state, setState] = useState(initialValue);
    
    return (
        <div>
            <p>{state}</p>
            <button onClick={() => setState('New Value')}>
                Update
            </button>
        </div>
    );
}

useState Returns:

• Array with [currentValue, setterFunction]
• Destructure to get value and setter
• Setter triggers re-render

Initial Value:

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

// Object
const [user, setUser] = useState({ name: ', email: ' });

// Array
const [items, setItems] = useState([]);

// Function (lazy initialization)
const [data, setData] = useState(() => {
    return expensiveComputation();
});

13.2 Multiple State Variables

Use multiple useState calls for different pieces of state.

function Form() {
    const [name, setName] = useState(');
    const [email, setEmail] = useState(');
    const [age, setAge] = useState(0);
    
    return (
        <form>
            <input value={name} onChange={e => setName(e.target.value)} />
            <input value={email} onChange={e => setEmail(e.target.value)} />
            <input value={age} onChange={e => setAge(e.target.value)} />
        </form>
    );
}

Or Use Object State:

function Form() {
    const [formData, setFormData] = useState({
        name: ',
        email: ',
        age: 0
    });
    
    const handleChange = (e) => {
        setFormData(prev => ({
            ...prev,
            [e.target.name]: e.target.value
        }));
    };
}

13.3 Functional Updates

Use functional updates when new state depends on previous state.

// Direct update
setCount(count + 1);

// Functional update (better when state depends on previous)
setCount(prevCount => prevCount + 1);

// Multiple updates
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1);
// Result: +3 (all updates applied)

13.4 useState Best Practices

Follow best practices for useState.

• Use multiple useState for unrelated state
• Group related state in objects
• Use functional updates when needed
• Initialize with appropriate defaults
• Don't mutate state directly