useState

Code

import { useState } from 'react';

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

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

// Functional update
function Form() {
    const [form, setForm] = useState({ name: '', email: '' });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setForm(prev => ({ ...prev, [name]: value }));
    };

    return (
        <input name="name" value={form.name} onChange={handleChange} />
    );
}

// Lazy initialization
function ExpensiveInit() {
    const [data, setData] = useState(() => {
        const saved = localStorage.getItem('data');
        return saved ? JSON.parse(saved) : [];
    });
    return <div>{data.length} items</div>;
}

// useReducer for complex state
function useToggle(initial = false) {
    const [on, setOn] = useState(initial);
    const toggle = () => setOn(!on);
    return [on, toggle];
}

Explanation

useState manages component state; functional updates avoid closure traps; lazy initialization avoids repeated computation.

More React Snippets