How to update nested state properties in React?

When managing complex, deeply nested state in React, you must do so immutably—meaning you don’t modify existing objects or arrays in-place. Instead, you return a new copy of the affected data structures. Below, we’ll cover different strategies for updating nested state properties in both class components and function components with hooks.

1. Common Pitfalls of In-place Mutation

React’s re-render logic depends on reference equality checks. If you directly mutate a nested state object (e.g., this.state.user.address.street = 'New Street';), React might not detect changes properly. Worse, you risk overwriting data unintentionally in more complex apps.

Key takeaway: Always create a new copy of the object or array you’re updating.

2. Class Components Using `this.setState`

a) Shallow Copy with Object Spread

If you have a nested property, you can spread the existing object into a new object and replace only the parts that changed:

class Profile extends React.Component {
  state = {
    user: {
      name: 'Alice',
      address: {
        street: '123 Main St',
        city: 'Hometown',
      },
    },
  };

  updateStreet = () => {
    this.setState((prevState) => ({
      user: {
        ...prevState.user, // copy user object
        address: {
          ...prevState.user.address, // copy address object
          street: '456 Elm Ave', // update street
        },
      },
    }));
  };

  render() {
    return (
      <div>
        <p>{this.state.user.name}</p>
        <p>{this.state.user.address.street}</p>
        <button onClick={this.updateStreet}>Update Street</button>
      </div>
    );
  }
}

b) Using Utility Libraries (Optional)

Some developers prefer libraries like Immer that help with immutable updates by letting you “mutate” a draft object internally. Under the hood, it returns a new, updated copy of your state.

3. Function Components with Hooks (useState)

For function components, you can apply the same immutable update principles using the useState hook. Just be sure you return a new copy of the affected objects or arrays when updating the state.

function Profile() {
  const [user, setUser] = React.useState({
    name: 'Alice',
    address: {
      street: '123 Main St',
      city: 'Hometown',
    },
  });

  const updateStreet = () => {
    setUser((prevUser) => ({
      ...prevUser,
      address: {
        ...prevUser.address,
        street: '456 Elm Ave',
      },
    }));
  };

  return (
    <div>
      <p>{user.name}</p>
      <p>{user.address.street}</p>
      <button onClick={updateStreet}>Update Street</button>
    </div>
  );
}

4. Best Practices

Keep State as Flat as Possible: Deeply nested structures are harder to update immutably. Flattening data or normalizing it (similar to database records) can simplify your updates.
Immutable Updates: Either use the spread operator or an immutable library like Immer to ensure you never mutate existing state directly.
Avoid Overly Complex States: For highly complex data, consider using Redux or React Context with well-structured reducers.

5. Example with an Array of Objects

If you need to update a specific item in an array of nested objects, combine the array immutability pattern with your object updates. For instance:

const [todos, setTodos] = React.useState([
  {
    id: 1,
    title: 'Buy Groceries',
    completed: false,
    metadata: { priority: 'high' },
  },
  {
    id: 2,
    title: 'Finish React Project',
    completed: false,
    metadata: { priority: 'medium' },
  },
]);

function updateTodoPriority(id, newPriority) {
  setTodos((prevTodos) =>
    prevTodos.map((todo) =>
      todo.id === id
        ? {
            ...todo,
            metadata: {
              ...todo.metadata,
              priority: newPriority,
            },
          }
        : todo
    )
  );
}

Here, map is used to create a new array, and we spread the old object to make a new copy before changing metadata.

6. Leveling Up Your React Skills

Managing nested state is one piece of building large-scale React apps. To become more proficient in both React and general JavaScript best practices, consider these resources from DesignGurus.io:

Grokking JavaScript Fundamentals: Deepen your understanding of modern JS, including immutability, closures, and more—skills that directly translate into cleaner React code.
Grokking the Coding Interview: Patterns for Coding Questions: Strengthen your problem-solving and algorithmic thinking, invaluable for handling more complex data manipulation and interview scenarios.

For a more interactive learning experience with real-time feedback, consider Coding Mock Interviews, where ex-FAANG engineers provide personalized insights and help you refine your approach to coding and system design challenges.

Conclusion

To update nested state properties in React:

Always work with a new copy of the object or array, never mutate state directly.
Spread the old object or array and overwrite only the properties that change.
For function components, you typically use useState or useReducer with the same immutability rules.
If you find yourself managing very deeply nested state, consider flattening your data structure or using a library like Immer for more ergonomic immutable updates.

This approach ensures React recognizes state changes and triggers the appropriate re-renders, keeping your UI in sync with the latest data.

CONTRIBUTOR

TechGrind