useState

🔍 What Is It?

useState is a React hook that lets you add reactive state to a function component.

const [value, setValue] = useState<Type>(initialValue);

• →value — the current state (read-only inside this render)
• →setValue — the updater function that schedules a re-render
• →initialValue — the value on the first render only (ignored on subsequent renders)

Two update forms:

• →setValue(newValue) — direct update
• →setValue(prev => prev + 1) — functional update, safe when new value depends on old value

🎯 Why Do We Need It?

Before hooks, only class components could have state. Function components were purely presentational. useState changed that — now any function can hold reactive data.

Without useState, you cannot build:

• →A form that tracks user input
• →A button that shows loading state
• →A modal that opens and closes
• →A counter, a toggle, a dropdown — any interactive UI element

useState is the foundation of all React interactivity.

🏗️ What Happens in Real Projects?

In an e-commerce checkout flow:

• →const [step, setStep] = useState<1|2|3>(1) — which checkout step is active
• →const [cart, setCart] = useState<CartItem[]>([]) — items in the cart
• →const [coupon, setCoupon] = useState('') — coupon code input
• →const [processing, setProcessing] = useState(false) — payment in flight
• →const [error, setError] = useState<string | null>(null) — payment error message

⚙️ How It Works

Under the hood:

React maintains a list of state slots for each component instance. On the first render, useState initialises the slot. On subsequent renders, it returns the current value from that slot. This is why hooks must always be called in the same order — React uses call order to match hooks to their slots.

Batching (React 18+):

Multiple setState calls in the same event handler are batched — React runs only one re-render for all of them. In React 18, this batching also applies inside async functions, timeouts, and promises.

Object state:

useState does a shallow replace, not a deep merge. If your state is an object, you must spread the previous state: setUser(prev => ({ ...prev, name: 'Alice' })). Forgetting the spread overwrites the entire object.

💻 Example

useState Patterns You Will Use Daily — Primitives, objects, arrays, and the async state pattern.

// Boolean toggle
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(prev => !prev);

// String input
const [search, setSearch] = useState('');

// Enum-like state
type Tab = 'overview' | 'claims' | 'documents';
const [activeTab, setActiveTab] = useState<Tab>('overview');

// Nullable async result
const [user, setUser] = useState<User | null>(null);
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(true);

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits