Avoid unnecessary base conversions

Instead of converting to a canonical hexadecimal base format, let the
updating component juts pass back the raw value + base. This should cut
the number of conversions by about 25%. For example, if I change the
binary field, instead of converting to hexadecimal once, then from
hexadecimal to some other base for three of the four fields (ie. four
total conversions), we instead just convert three fields.

diff --git a/src/App.js b/src/App.js
index 259457f986d7c317263f054c4d5e9976e01d290b..81bef695c3fbeebcebe4e2c3287741b7a15a4964 100644 (file)
--- a/src/App.js
+++ b/src/App.js
@@ -8,6 +8,7 @@
 'use strict';
 
 import React from 'react';
+import type Value from './Field.react';
 import Field from './Field.react';
 import Label from './Label.react';
 
@@ -21,7 +22,7 @@ export default class App extends React.Component {
     };
   }
 
-  _onValueChange = (value: string) => {
+  _onValueChange = (value: Value) => {
     this.setState({value});
   }
 

diff --git a/src/Field.react.js b/src/Field.react.js
index 4cd7d470daceadb0e0ffb0b118f8fcc3ffcbf51f..382aa784f0b233a3c83107a5a6b1138546d4159d 100644 (file)
--- a/src/Field.react.js
+++ b/src/Field.react.js
@@ -10,39 +10,34 @@
 import React from 'react';
 import convert from './convert';
 
+export type Value = {
+  base: number;
+  value: string;
+};
+export const ValuePropType = React.PropTypes.shape({
+  base: React.PropTypes.number,
+  value: React.PropTypes.string,
+});
+
 const DIGITS = '0123456789abcdef';
 
 /**
- * Convert from canonical (hexadecimal) value to `base`.
+ * Convert from `value` to `base`.
  */
-function fromValue(value: string, base: number): string {
+function fromValue(value: ?Value, base: number): string {
   if (value === null) {
     return '';
+  } else if (value.base === base) {
+    return value.value;
   }
-  if (base === 16) {
-    return value;
-  }
-  return convert(value, 16, base);
-}
-
-/**
- * Convert from `base` value to canonical (hexadecimal) value.
- */
-function toValue(value: string, base: number): ?string {
-  if (value === '') {
-    return null;
-  }
-  if (base === 16) {
-    return value;
-  }
-  return convert(value, base, 16);
+  return convert(value.value, value.base, base);
 }
 
 export default class Field extends React.Component {
   static propTypes = {
     base: React.PropTypes.number,
     onValueChange: React.PropTypes.func.required,
-    value: React.PropTypes.string.required,
+    value: ValuePropType,
   };
   static defaultProps = {
     base: 10,
@@ -67,7 +62,10 @@ export default class Field extends React.Component {
   _onChange = event => {
     const value = event.currentTarget.value;
     if (this._isValid(value)) {
-      this.props.onValueChange(toValue(value, this.props.base));
+      this.props.onValueChange({
+        base: this.props.base,
+        value,
+      });
     }
   }