Using the useState Hook with Object State in React

Update Multiple Properties in Object State

Create a React component with an object state containing 'firstName' and 'lastName'. Add a button that updates both properties immutably.

Expected output: The component displays updated firstName and lastName when the button is clicked.

Hint: Use the spread operator to copy existing state and update both properties in one setState call.

Nested Object State Update

Manage a state object with a nested 'address' object containing 'city' and 'zip'. Implement a function to update only the 'city' immutably.

Expected output: Only the city property updates without affecting other state properties.

Hint: Spread both the outer state and the nested address object when updating.

You create a new object by copying the existing state with the spread operator and then override the specific property, for example: setState(prev => ({ ...prev, property: newValue })).

Direct mutation does not trigger React's re-rendering because React relies on detecting changes via new object references, so mutations can cause UI inconsistencies.

Functional updates provide the previous state as an argument, ensuring you work with the latest state value, which is important when updates depend on prior state.