When using native form validation and loading a page with a form containing an input with the `required` prop set, it triggers browser validation immediately. This produces Firefox's native error highlighting. This is because Firefox appears to run validation when the DOM is used to set a value on an existing input component. 

The behavior can be seen here: http://codepen.io/anon/pen/zowOzo

Angular has [run into this already](https://github.com/ggershoni/angular.js/commit/cc311740c6b680c68a88c44fecd97ede1f18f831).

'element for the lifetime of the component. More info: https:fb.me/react-controlled-components%s',
        props.type,
        getCurrentFiberStackAddendum(),
      );
      didWarnControlledToUncontrolled = true;
    }
  }
  updateChecked(element, props);
  const value = getSafeValue(props.value);
  if (value != null) {
    if (props.type === 'number') {
      if (
        (value === 0 && node.value === '') ||
        
        node.value != value
      ) {
        node.value = '' + value;
      }
    } else if (node.value !== '' + value) {
      node.value = '' + value;
    }
  }
  if (props.hasOwnProperty('value')) {
    setDefaultValue(node, props.type, value);
  } else if (props.hasOwnProperty('defaultValue')) {
    setDefaultValue(node, props.type, getSafeValue(props.defaultValue));
  }
  if (props.checked == null && props.defaultChecked != null) {
    node.defaultChecked = !!props.defaultChecked;
  }