Hooks Essentials

React useState Hook

Manage local component state and updates correctly using the useState hook.

Basic usage

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

Updating state

tsx
setCount(count + 1);

When new state depends on previous state:

tsx
setCount(prev => prev + 1);

State with objects

tsx
const [user, setUser] = useState({ name: 'Ava', age: 24 });
setUser(prev => ({ ...prev, age: prev.age + 1 }));

Best practices

  • Keep state minimal
  • Do not mutate state directly
  • Split unrelated concerns into separate state variables

Next, we will handle side effects using useEffect.