‫By the end of the last lecture,
‫I said that we should only update state using
‫the setter function, but don't just trust me on that.
‫So, instead, let's actually explore this and break React.
‫So, just to see what happens when we try
‫to update state manually.
‫Now, right now we have this step state here,
‫defined as a const variable
‫and so we would not be able to even change it.
‫So, let's change this to a let
‫and so then we can actually break this.
‫So, let's say the tier in handle next,
‫instead of updating the state in the correct way,
‫we would do it like this.
‫So, step equal step plus one.
‫That would be a perfectly normal way
‫of updating a variable defined with let, right?
‫And so right now, this is a let variable,
‫so a variable that we can update.
‫And so again, this would be a perfectly normal way
‫of updating variables in JavaScript.
‫But let's see what now happens when we click this button.
‫Well, simply nothing happens.
‫So, we don't get any error from React,
‫but simply nothing happens.
‫And so, the reason for that is that React has no way
‫of knowing that this is actually trying to update the state.
‫So, React has no magic way of knowing
‫that this here is the state variable
‫and that this operation is basically updating it.
‫So again, React doesn't know about that
‫and that's why React provided us
‫with this setter function here, which is a functional way
‫of updating the state value, but without mutating it.
‫Because here we are directly mutating now
‫this step variable, right?
‫But React is all about immutability.
‫And so, therefore, we can only update the state using
‫the tools that React gives us.
‫So, in this case, this set step function.
‫And so this setter function is actually tied
‫to this state variable right here.
‫So, when we use this functional way of updating the state,
‫then React does know that this is the state variable
‫that should be updated, okay?
‫So never do this mistake, just always use const
‫and always use the setter function, okay?
‫Now, another way in which this could happen,
‫which might be a little bit less obvious,
‫is when we use an object or an array for state.
‫So, let's just do a quick experiment here.
‫So, let's just say test, for example, and then use state.
‫And here as a default, we pass in an object.
‫And let's give it some property of name.
‫Now, notice that here in the destructuring,
‫I only took out the state variable itself.
‫So, I don't even have the setter function now.
‫And so here, let's say that I wanted to update this name.
‫Well, let's first actually also print it here.
‫So, test.name.
‫So, then we get Jonas there.
‫And then here, we might think that this
‫is how we update that state.
‫So test.name.
‫And now let's use Fred, for example.
‫So, just some other name and yeah,
‫watch what happens when I click next now.
‫And that did actually work.
‫So, mutating the object like this did actually trigger
‫a new re-render of the component view.
‫However, mutating objects like this is a really,
‫really bad practice.
‫So, React really doesn't want you to do this
‫and that's because sometimes, in more complex situations,
‫this actually won't work.
‫And in general, it's really just a bad practice
‫of mutating objects like this,
‫especially in a framework like React,
‫which is all about immutability
‫and functional state updates.
‫So, never do this.
‫So, if you really wanted to update this object here,
‫we would again create a setter function here.
‫So, not creating, but basically taking this setter function
‫out of the result of use state.
‫And then here we would call that setter function
‫and then pass in the complete new object.
‫So, the name should now be Fred.
‫So, it's back to what we had before now.
‫And now, if we click next, that still updates the name
‫to Fred, but it does so in the correct way.
‫So, always treat state as immutable in React.
‫So, as something that you cannot change directly,
‫but that you can only change using the tools
‫that React gives us.
‫So, using the state setter function.