In the second article of this series (click here to read part 1), I’m going to introduce the two types of state that exist in all user interface (UI) applications. The first is “essential” state, original information that cannot be calculated (i.e. a person’s birthday). The second is “derived”, information that can be calculated (i.e. a person’s age). While simple and seemingly similar concepts, they should be handled quite differently in code.
I’ll guide you through a simple example outlining the differences, and illustrate why it is so important to implement derived state with a separate pattern. First, let’s jump into the first (and simpler) of the two types, essential state.

#javascript