Unexpected state behavior when updating nested state objects

[Sivanujan1998]

Title:
Unexpected state behavior when updating nested state objects

Description:
I'm experiencing an issue where state updates do not propagate correctly under certain conditions when updating nested objects in state. This seems to be a bug in React's state handling.

Steps to Reproduce:

1.Create a new React component with nested state objects.
2.Update the nested state object using a setState function.
3.Observe that the state update does not reflect correctly in the component.

Code Examble
import React, { useState } from 'react';

const NestedStateComponent = () => {
const [state, setState] = useState({ nested: { value: 0 } });

const updateNestedState = () => {
setState(prevState => ({
...prevState,
nested: { value: prevState.nested.value + 1 }
}));
};

return (

Value: {state.nested.value}

Increment

);
};

export default NestedStateComponent;

Expected Behavior:
The state.nested.value should increment by 1 every time the button is clicked.

Actual Behavior:
The state.nested.value does not update correctly, and the component does not re-render as expected.

Dependencies
"dependencies": {
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@hookform/resolvers": "^3.2.0",
"@iconify/react": "^4.1.0",
"@mui/icons-material": "^5.15.20",
"@mui/lab": "^5.0.0-alpha.139",
"@mui/material": "^5.15.20",
"@mui/x-date-pickers": "^7.8.0",
"@reduxjs/toolkit": "^2.2.5",
"apexcharts": "^3.49.2",
"autosuggest-highlight": "^3.3.4",
"axios": "^1.4.0",
"date-fns": "^2.30.0",
"framer-motion": "^10.15.1",
"history": "^5.3.0",
"lodash": "^4.17.21",
"mui-one-time-password-input": "^2.0.2",
"notistack": "^3.0.1",
"nprogress": "^0.2.0",
"numeral": "^2.0.6",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-apexcharts": "^1.4.1",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-helmet-async": "^1.3.0",
"react-hook-form": "^7.45.4",
"react-lazy-load-image-component": "^1.6.0",
"react-redux": "^9.1.2",
"react-router": "^6.14.2",
"react-router-dom": "^6.14.2",
"react-scripts": "^5.0.1",
"simplebar-react": "^3.2.4",
"stylis": "^4.2.0",
"stylis-plugin-rtl": "^2.0.2",
"yup": "^1.2.0",
"yup-phone-lite": "^2.0.1"
},

[Pranshul-art]

Sir, in my output while running the code, it is actually incrementing-

import React, { useState } from 'react';

const NestedStateComponent = () => {
const [state, setState] = useState({ nested: { value: 0 } });

const updateNestedState = () => {
setState(prevState => ({
...prevState,
nested: { value: prevState.nested.value + 1 }
}));
};

return (

Value: {state.nested.value}

Increment

); }; export default NestedStateComponent;

but i think the issue lies when i add other properties into the 'nested' object and i think the solution will be to use -

setState(prevState => ({
...prevState.nested,
nested: { value: prevState.nested.value + 1 }
}));
};

instead of -
setState(prevState => ({
...prevState,
nested: { value: prevState.nested.value + 1 }
}));
};

I hope my solution will help you....

[Pranshul-art]

...prevState.nested

instead of -

...prevState

[Pranshul-art]

the code that i have used-
import React, { useState } from 'react';

const NestedStateComponent = () => {
const [state, setState] = useState({ nested: { value: 0 } });

const updateNestedState = () => {
setState(prevState => ({
...prevState,
nested: { value: prevState.nested.value + 1 }
}));
};

return (

Value: {state.nested.value}

Increment

); }; export default NestedStateComponent;

[surenpoghosian]

@Sivanujan1998 check out the docs here,

there is an explanation of the exact same case you encountered

[champagnekamal]

the thing is your component only re render when something change and here your state is not changing, so that's why your component does not re-render,
also
const updateNestedState = () => {
setState(prevState => ({
...prevState,
nested: { ...prevState.nested, value: prevState.nested.value + 1 }
}));
};