Unexpected state behavior when updating nested state objects about react HOT 5 OPEN

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 (

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....

from react.

...prevState.nested

instead of -

...prevState

from react.

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 (

from react.

@Sivanujan1998 check out the docs here,

there is an explanation of the exact same case you encountered

from react.

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 }
}));
};

from react.