Understanding State
The typical callback function structure that we used so far contained one or more Output elements and one or more Input elements. As mentioned in the introduction, the callbacks fire immediately when users modify an Input element. We want to relax this option a little. We will start with a simple example demonstrating why and how to use State, which is an optional argument that can be given to our callbacks.
To make the problem we are trying to solve clear, take a look at Figure 10.1:
Figure 10.1 – An interactive app with outputs that are not properly synchronized with input values
As you can see, the output is showing the wrong values. The reason is that the app was made very slow by introducing a waiting time, to simulate a practical situation that you might face with your apps. The output was not wrong, actually; it just took too long to update, so when the input was changed, it wasn't immediately reflected in the...