[Mistake]: nextId++ is violating React's principle of purity

[behanprw]

Summary

nextId++ is mutating a (global) variable declared outside the component, violating React's principle of immutability.

Page

https://react.dev/learn/updating-arrays-in-state

Details

React expects state updates to be pure (immutable).
nextId is not stored in useState, therefore, nextId++ mutates a global variable outside of React’s state system.

[TheCaptain1810]

I'll fix this.

[gaearon]

It’s not used for rendering so it’s not a problem. It’s not state in that sense.

[behanprw]

@gaearon Wouldn’t storing nextId in state be a more robust and scalable solution in larger apps? I'm referring to challenge #3's solution in https://react.dev/learn/updating-arrays-in-state

[TheCaptain1810]

@gaearon Wouldn’t storing nextId in state be a more robust and scalable solution in larger apps? I'm referring to challenge #3's solution in https://react.dev/learn/updating-arrays-in-state

I guess, but I think he wants to say that the variables only need to be states if they are going to cause a re-render. But in this case, nextId does not affect the dom in any way, so this would be unnecessary.

[gaearon]

There's no reason to store nextId in state because it is not used for rendering, and thus is not "state" in React sense of the word.

[TheCaptain1810]

@gaearon exactly, understood! Thanks for the clarification!

[behanprw]

Ok, thanks! @gaearon