So what is better is actually to create, for example, a state, right? This is kind of the main thing in React, where you have this single source through the state, and then based on the state, you render. And if you want to change something on the screen, you basically change the state. So I now add the function about the state, about changing the state. And I don't forget that after updating the state, I actually have to re-render. So I do this now, and then in my render function, I kind of declaratively explain what needs to happen. If this is loading, then show this. And all this has nothing to do with React. You can see I could just get this thing, I could use it without React.
So the declarative way of writing and thinking is not bound to React. You could actually take this concept, this pattern, use it in another place. And this leads to the same kind of conclusion, where we have this one-direction data flow, where you have state, change, re-render, user interaction, change of the state, and then you do the same. So this type of flow wasn't really typical in the past. When Angular, for example, came, there was this two-way data binding, which is kind of the opposite of this. You write something, you have the state, then you have the UI, and these things are synced immediately between each other.
When you change one, the other one is kind of updated automatically. When you change the UI, you have the state updated automatically. And this was done by the framework. While the concept here in React is different, in order for you to change something, you have to go and update the state. This is why we have this uncontrolled and controlled input, right? The idea of having this input is really interesting, because for the first time when I tried React, I had this input field, and I couldn't update the value of the input field. I'm typing in the field, why is it not changing? It's not changing because I was having this value in the state, and I'm just passing the value of the input field to the inputs, but I'm not updating the state with the hook.
Comments