Stateless versus stateful
To react means to switch from one state to another. This means that you need to have a state in the first place and the ability to change that state. Have we mentioned a state or the ability to change that state in React elements? No. They are stateless. Their sole purpose is to construct and render virtual DOM elements. In fact, we want them to render in the exact same way, given that we provide them the exact same set of parameters. We want them to be consistent because it makes it easy for us to reason about them. That's one of the key benefits of using the React library—the ease of reasoning how our web application works.
How can we add a state to our stateless React elements? If we can't encapsulate a state in React elements, then we should encapsulate React elements in something that already has a state. Think of a simple state machine that represents a user interface. Every user action triggers a change of a state in that state machine....
