React useState Hook Deep Dive

The useState hook is the foundation of state management in functional React components. It allows components to store, update, and react to changing data.

What is useState?

• A React Hook for managing local component state

• Triggers a re-render when state updates

• Preserves state between renders

import { useState } from "react";

const [state, setState] = useState(initialValue);

How useState Works Internally (Conceptual)

• React stores state values outside the component

• On every render, React returns the current state

• Calling the setter schedules a re-render

Initial State

Static Initial Value

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

Lazy Initialization (Performance Optimization)

const [count, setCount] = useState(() => {
  console.log("Initialized once");
  return 0;
});

• Function runs only on the first render

• Useful for expensive calculations

Updating State

Direct Update

setCount(count + 1);

Functional Update (Recommended)

setCount(prev => prev + 1);

Use functional updates when:

• New state depends on previous state

• Multiple updates happen quickly

Multiple State Updates (Batching)

setCount(prev => prev + 1);
setCount(prev => prev + 1);

✔ Results in increment by 2 due to batching.

State Is Asynchronous

setCount(count + 1);
console.log(count); // old value

State updates do not happen immediately.

Managing Objects in State

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

Correct Update

setUser(prev => ({
  ...prev,
  age: 26
}));

❌ Never mutate state directly:

user.age = 26; // wrong

Managing Arrays in State

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

Add Item

setItems(prev => [...prev, newItem]);

Remove Item

setItems(prev => prev.filter(item => item.id !== id));

Derived State (Avoid When Possible)

❌ Bad Practice:

const [fullName, setFullName] = useState(
  firstName + lastName
);

✅ Better:

const fullName = `${firstName} ${lastName}`;

Multiple useState Hooks

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

Prefer multiple states over large objects when values are unrelated.

When NOT to Use useState

• Derived data

• Constants

• Global shared state (use Context, Redux, etc.)

Common Pitfalls

• Mutating state directly

• Missing functional updates

• Overusing state

• Storing props in state unnecessarily

Best Practices

• Keep state minimal

• Use functional updates

• Split complex state logic

• Name state variables clearly

Key Takeaways

• useState manages local state

• State updates trigger re-renders

• Updates are asynchronous and batched

• Immutability is critical