Temperature Conversion Problem

The Temperature Conversion Problem is a set of requirements for a small application that illustrates the difference between Bidirectional and Unidirectional Data Flow. The requirements are as follows:

• Provide the user with two text inputs, labeled Fahrenheit and Celcius.
• The user may update either input to any decimal number.
• As the user updates one input, the other changes in real time to satisfy the relation f = 1.8c + 32.

These three requirements are surprisingly tricky to solve with many modern Functional Reactive UI Frameworks, as the conversion from one unit to another tends to lose ephemeral characters, like trailing zero’s. For this reason, a component needs to know how to convert both from Celcius to Fahrenheit, and vice versa, and to only convert from whichever input the user last used to the other. If the application is built to only track one value as the Source of Truth, like celsius, then the component would need to not update Fahrenheit while the user is typing Fahrenheit, otherwise characters will seemingly be rejected. This model, however, goes against the intended approach of frameworks like React, Vue.js, and Svelte, in that the DOM is written as a declarative side-effect of the current Minimal Essential State, with no knowledge of any prior input or the actual input events.