How to Use useState with Object in React: Simple Guide

In React, use useState to store an object by passing the initial object to it. To update the object, use the setter function with a new object that copies the old properties and changes only what you want, typically using the spread operator like setState(prev => ({ ...prev, key: newValue })).

Syntax

The useState hook lets you keep an object as state by initializing it with an object value. You get back the current state and a function to update it.

• const [state, setState]: Destructures the state and updater function.
• useState(initialObject): Initializes state with an object.
• To update, call setState with a new object, usually copying old state and changing parts.

javascript

const [state, setState] = useState({ key1: 'value1', key2: 'value2' });

// To update one property:
setState(prevState => ({
  ...prevState,
  key1: 'newValue'
}));

Example

This example shows a React component that uses useState with an object to track a user's name and age. Clicking buttons updates each property without losing the other.

javascript

import React, { useState } from 'react';

export default function UserInfo() {
  const [user, setUser] = useState({ name: 'Alice', age: 25 });

  const changeName = () => {
    setUser(prevUser => ({ ...prevUser, name: 'Bob' }));
  };

  const increaseAge = () => {
    setUser(prevUser => ({ ...prevUser, age: prevUser.age + 1 }));
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={changeName}>Change Name</button>
      <button onClick={increaseAge}>Increase Age</button>
    </div>
  );
}

Output

Name: Alice
Age: 25
[Change Name] [Increase Age]

// After clicking Change Name:
Name: Bob
Age: 25

// After clicking Increase Age:
Name: Bob
Age: 26

Common Pitfalls

One common mistake is replacing the entire object without copying existing properties, which causes loss of data. Always copy the previous state using the spread operator before changing parts.

Another issue is updating state directly instead of using the setter function, which React ignores.

javascript

/* Wrong: This replaces the whole object and loses other keys */
setUser({ name: 'Charlie' }); // age is lost

/* Right: Copy old state and update only name */
setUser(prevUser => ({ ...prevUser, name: 'Charlie' }));

Quick Reference

Action	Code Example	Description
Initialize state with object	const [obj, setObj] = useState({ key: 'value' });	Start with an object as state.
Update one property	setObj(prev => ({ ...prev, key: 'new' }));	Keep other properties, change one.
Avoid direct mutation	obj.key = 'new'; // wrong	Never change state object directly.
Use functional update	setObj(prev => ({ ...prev, key: 'new' }));	Best practice for updating based on previous state.

Key Takeaways

Always use the setter function from useState to update the object state.

Copy the previous state with the spread operator before changing properties.

Never mutate the state object directly; React won't detect changes.

Use functional updates to safely update state based on previous values.

Updating one property requires returning a new object with all other properties preserved.