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).

props.value !== undefined &&
      props.defaultValue !== undefined &&
      !didWarnValueDefaultValue
    ) {
      warning(
        false,
        '%s contains an input of type %s with both value and defaultValue props. ' +
          'Input elements must be either controlled or uncontrolled ' +
          '(specify either the value prop, or the defaultValue prop, but not ' +
          'both). Decide between using a controlled or uncontrolled input ' +
          'element and remove one of these props. More info: ' +
          'https:fb.me/react-controlled-components',
        getCurrentFiberOwnerName() || 'A component',
        props.type,
      );
      didWarnValueDefaultValue = true;
    }
  }
  const node = ((element: any): InputWithWrapperState);
  const defaultValue = props.defaultValue == null ? '' : props.defaultValue;
  node._wrapperState = {
    initialChecked:
      props.checked != null ? props.checked : props.defaultChecked,
    initialValue: getSafeValue(
      props.value != null ? props.value : defaultValue,
    ),
    controlled: isControlled(props),
  };
}
export function updateChecked(element: Element, props: Object) {