-
Notifications
You must be signed in to change notification settings - Fork 46.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unexpected state behavior when updating nested state objects #30414
Comments
Sir, in my output while running the code, it is actually incrementing- import React, { useState } from 'react'; const NestedStateComponent = () => { const updateNestedState = () => { return ( Value: {state.nested.value} Incrementbut 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 => ({ instead of - I hope my solution will help you.... |
instead of -
|
the code that i have used- const NestedStateComponent = () => { const updateNestedState = () => { return ( Value: {state.nested.value} Increment |
@Sivanujan1998 check out the docs here, there is an explanation of the exact same case you encountered |
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, |
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"
},
The text was updated successfully, but these errors were encountered: