跳到主要内容

useState Hook

useState = state management in function components

What is useState?​

"State hook for function components"

useState is a React Hook that lets you add state to function components.

"useState is a React Hook that enables state management in function components, returning the current state value and a function to update it."

Basic Syntax​

[state, setState] = useState(initialValue)

const [count, setCount] = useState(0);
  • Returns array with [value, setter]
  • Initial value can be primitive or function
  • Setter triggers re-render

"useState returns an array with the current state value and a setter function, using array destructuring."

Updating State​

Direct value or function updater

// Direct value
setCount(5);

// Function updater (when based on previous state)
setCount((prevCount) => prevCount + 1);

Use function updater when new state depends on previous state.

"State can be updated with a direct value or a function that receives the previous state and returns the new state."

Multiple State Variables​

Call useState multiple times

const [name, setName] = useState("");
const [age, setAge] = useState(0);
const [email, setEmail] = useState("");

Each state variable is independent.

"You can use multiple useState calls to manage different pieces of state independently."

Object State​

Spread operator to update objects

const [user, setUser] = useState({ name: "", age: 0 });

// Update
setUser({ ...user, name: "John" });
// or
setUser((prev) => ({ ...prev, name: "John" }));

"For object state, use spread operator to update properties without losing other fields."

Lazy Initialization​

Function initializer for expensive calculations

// ❌ Runs on every render
const [data, setData] = useState(expensiveCalculation());

// ✅ Runs only once
const [data, setData] = useState(() => expensiveCalculation());

"Use function initializer for expensive calculations - it only runs once on mount."

State Updates are Asynchronous​

State updates batch and don't apply immediately

setCount(count + 1);
setCount(count + 1);
// count is still the same value here
// React batches updates

"State updates are asynchronous and batched - the new value isn't available immediately after calling setState."

Common Patterns​

Counter · Form · Toggle

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

// Form
const [formData, setFormData] = useState({ name: "", email: "" });

// Toggle
const [isOpen, setIsOpen] = useState(false);

9️⃣ When to Use useState​

✅ Component needs local state ✅ State doesn't need to be shared ✅ Simple state management ❌ Don't use for derived state ❌ Don't use for complex state logic (use useReducer)

"useState is a React Hook for managing state in function components. It returns an array with the current state and a setter function. State can be updated with direct values or function updaters. Use spread operator for object updates, function initializers for expensive calculations, and remember that updates are asynchronous and batched."

🧠 Ultra-Short Cheat Sheet​

[state, setState] = useState(initial)
Function updater for previous state
Spread operator for objects
Lazy initialization
Asynchronous updates
Multiple useState calls