React useState Hook Cheat Sheet

A concise cheat sheet on the React useState hook, covering state initialization, updates, functional state, and best practices for managing component state effectively.

💡 Key Takeaways

⚛️ useState: Add and manage local state in functional components.
🔢 Basic Usage: Returns [state, setState]; triggers re-render on update.
🧩 Objects & Arrays: Use spread syntax to maintain immutability.
⚙️ Lazy & Functional Updates: Optimize heavy computations and prevent stale closures.
🧩 Modular State: Multiple useState calls keep state logic isolated and easy to debug.

⚛️ What is `useState`

Adds local state inside functional components
Returns a state variable and a setter function
Triggers re-render on updates
Must be called at the top level of a component

import { useState } from 'react';

🔢 Basic Usage

Declare state: const [state, setState] = useState(initialValue)
Setter replaces old value and rerenders
Ideal for counters, toggles, and simple UI states
Works with strings, numbers, arrays, objects

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

<button onClick={() => setCount(count + 1)}>
  Increment
</button>

✏️ State with Strings

Perfect for input values and forms
Controlled inputs sync UI with state
Update via onChange handler
Prevents flickering or mismatched values

const [name, setName] = useState("Jane");

<input
  type="text"
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

🧱 State with Objects

Use spread operator to update specific fields
Always create a new object to trigger updates
Useful for user profiles, settings, or configs
Avoid mutating state directly

const [user, setUser] = useState({ name: "Jane", age: 30 });
setUser({ ...user, age: 31 });

🧩 State with Arrays

Treat arrays as immutable; create new copies when updating
Use spread syntax to add elements
Filter or map to remove/update items
Ideal for lists, todos, or collections

const [items, setItems] = useState([]);
setItems([...items, "New Item"]);

⚙️ Lazy Initialization

Pass a function to useState() for heavy initial computations
Runs only once on mount
Useful for derived or computed state
Improves performance in large components

const [value, setValue] = useState(() => computeInitialValue());

🔁 Functional Updates

Use when new state depends on previous value
Prevents stale state inside closures
Common in counters or accumulators
Cleaner than reading outer variables

setCount(prev => prev + 1);

🧩 Multiple State Hooks

Use separate useState calls for unrelated state
Keeps logic modular and easier to debug
Each state variable updates independently
Great for forms or interactive components

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