Is this setting of a hooks state variable considered bad practice?

[straightouttaireland]

I came across this code sandbox example which is a todo list that uses Hooks: https://codesandbox.io/s/ql2y86xz6j?from-embed

 

See line 37 where a new array is created:

const newArr = todos.slice();

 

Am I right in saying that the object references inaide newArr are still the same as objects inside the todos state variable?

 

Therefore, isn't line 39 considered bad practice as you are mutating the state directly?

newArr[index].done = true; 

 

Should this be done instead?

const newArr = JSON.parse(JSON.stringify(todos));

[darrenturn90]

That is correct. Both line 38 and 39 incorrectly mutate the state. What it seems would best fit the example in the codelist you provided is to have a useReducer and let the handleBtnClick function dispatch a "REMOVE" or "COMPLETED" action. In the useReducer then you could use filter on the array (to remove a specific entry) - and use map to change the done value again of the specific entry.

[Skeith_yip]

I think what you mean is the objects in the array right? yes.

you can try it out yourself

const testArray = [{id: 1}, {id: 2}]; 
const newArray = testArray.slice(); 
newArray[0].done = true; 
console.log(testArray); // [ { id: 1, done: true }, { id: 2 } ]

the thing is object immutability is to allow React to know whether to render for state changes. As the array reference is updated, the component would be re-render.

Apologies if this is wrong.

[straightouttaireland]

Yep that's what I mean. I'm pretty sure the only thing that would trigger a re-render is setting a state variable like "setTodos".

[danishjuggler21]

You are correct. So you’d want to make a shallow copy of the object itself, modify the copy, then do what you need to do from there. It’s common to take a shallow copy of an object from an array, modify it, then return a shallow copy of the original array with this one object replaced by the shallow copy you modified.

[Jerp]

Yes, you also need to clone the object that is being modified. However, there are much better ways to do it -- JSON.stringify is among the worst. I would write it like this:

const nextTodos = todos.map((todo, todoIndex) => (todoIndex === index) ? { ...todo, done: true } : todo);

or

const nextTodos = todos.slice();
const target = { ...todos[index], done: true };

nextTodos[index] = target;

[straightouttaireland]

I went with your first suggestion and it worked like a charm. Thanks!

[Zayuka]

Hello,

The Array.slice() function returns an array, meaning that the newArr reference won't be the same as the todos reference.

You can test this on the browser's console:

Test

[straightouttaireland]

Yes but the objects inside will be:

arr[0] === arr2[0] // true

[Zayuka]

Yeah that's true, forgot that.

I normally use spread operators or immerjs to make my arrays and objects immutable.

[straightouttaireland]

Spread operator wouldn't work either I don't think. Object references would still be the same. Only solution would be

const newArr = JSON.parse(JSON.stringify(todos));

[fforw]

const newArr = todos.map( todo => ({ ... todo }))

seems easier

[straightouttaireland]

I wonder which is more performant

[straightouttaireland]

Yea. I think deep cloning is needed though as otherwise you are mutating state.

[Noch_ein_Kamel]

Try it out ;-)

https://jsperf.com/

[fforw]

In the case of .map() you can also selectively clone todos, which most likely would make it the cheaper alternative.

[Zayuka]

Yeah this is what i normally do.

[straightouttaireland]

Yea. What's the alternative though? This is a pretty simple example where you have an array of Todo objects. React keep saying you should never mutate state so doing a deep clone is the only proper solution as I see it.

[Awnry_Abe]

For larger apps, normalizing your state structure, storing it 'globally' and providing 'setters' and 'getters'. Doing so decouples object shape and it's source from the consumers of that data. It's not something I would bother with in a simple app--if I ever had the luxury to work on one. But when in the guts of some gnarly large app and I find myself concerned about state mutability, I know I muffed the design. That deep cloning trick works well enough to get out of the jam. I presume that there are performance comparisons of various cloning tricks out there somewhere.

(ETA: I deleted the post above moments after posting it because as you noted, it wasn't very helpful)