Understanding State

Introduction to the State parameter

The typical callback function structure that we’ve used so far contains one or more Output elements and one or more Input elements. The callbacks fire immediately when users modify an Input element. We want to relax this option a little.

We’ll 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’re trying to solve clear, take a look at the illustration below:

As we 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 we might face with our 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 output area. Having output that updates quickly is more important in this case because there are two inputs governing the output. The interval between modifying the first and second output might cause this kind of confusion.

Another more important issue is that these options might take much more time and cost a lot in terms of lost computing power and/or lost analysis time. Our dataset is very small, and the types of calculations we ran on it were also very simple, so performance was not an issue. In ...