Why changing state object property isn't needed any setState in React?

Question

I have an object in a useState as this:

const [sidebarItems, setSidebarItems] = useState([
     {
         id: 1,
         name: 'داشبورد',
         icon: <Item1 />,
         active: true
     }, ...];

I use the find method to get an object in the state and change it like this:

const handleToggle = (id) => {

     const activeMainItem = sidebarItems.find(i => i.active === true);
     activeMainItem.active = false;

}

I thought I should use setSidebarItems to change the array in the state but my code works well. Can you please explain to why this happens and doesn't need any setState?

Where do you read it? Where is it that you see it reacting to state changes without using the _setter_? — Phil, Dec 20 '21 at 06:10
Maybe you are calling `setState` elsewhere so it triggers re-render you component. Otherwise it shouldn't work: https://codesandbox.io/s/hardcore-mestorf-r5fc8?file=/src/App.js — Mosh Feu, Dec 20 '21 at 06:15

score 0 · Accepted Answer · answered Dec 20 '21 at 06:20

0

You can change the value of Array or Object, but you can not access the modified variable immediately inside your component it can not re-render your components because this is happening just when the states change, and it makes bug in your code. The correct way is setting state and track the changed state in your component.

answered Dec 20 '21 at 06:20

Reza Ghorbani

537
4
14

Exactly, but I can access the modified property as well as other properties. – Ali Bahaari Dec 20 '21 at 07:08

Why changing state object property isn't needed any setState in React?

1 Answers1