useControl.js

function useControl(defaultValue, value, onChange) {
  let [localValue, setLocalValue] = React.useState(defaultValue)
  let isControlled = value != null // the key

  let activeValue = isControlled ? value : localValue
  let setActiveValue = nextValue => {
    if (isControlled) {
      if (onChange) {
        onChange(nextValue)
      } else {
        // bad spot... we should warn them!
      }
    } else {
      setLocalValue(nextValue)
      if (onChange) {
        onChange(nextValue)
      }
    }
  }

  return [activeValue, setActiveValue]
}

// Usage
function Widget({ defaultValue, value: valueProp, onChange }) {
  let [value, setValue] = useControl(defaultValue, valueProp, onChange);
  // ...
}