Listening to a Value Change

Monitor the change in value

We might wonder why we need to listen to a value change. Aren't the developers the ones who control the change of a value? As in the previous example, we use the event handler to change a counter. In this case, we know exactly when the value gets changed.

That's true for this case, but there are other cases. We might send a value into a child component via a prop, or there might be two components that touch a value at the same time. In either of these cases, we can lose track of the moment when the value is changed, but we still want to perform an action upon the value change. This means that we want to have the ability to listen to a value change.

Example to track changes

Let's set up one example to demonstrate this. In our "Hello World" button example, we want to know if the count value has recently changed whenever the count changes: