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

const node = ((element: any): InputWithWrapperState);
  if (__DEV__) {
    const controlled = isControlled(props);
    if (
      !node._wrapperState.controlled &&
      controlled &&
      !didWarnUncontrolledToControlled
    ) {
      warning(
        false,
        'A component is changing an uncontrolled input of type %s to be controlled. ' +
          'Input elements should not switch from uncontrolled to controlled (or vice versa). ' +
          'Decide between using a controlled or uncontrolled input ' +
          'element for the lifetime of the component. More info: https:fb.me/react-controlled-components%s',
        props.type,
        getCurrentFiberStackAddendum(),
      );
      didWarnUncontrolledToControlled = true;
    }
    if (
      node._wrapperState.controlled &&
      !controlled &&
      !didWarnControlledToUncontrolled
    ) {
      warning(
        false,
        'A component is changing a controlled input of type %s to be uncontrolled. ' +
          'Input elements should not switch from controlled to uncontrolled (or vice versa). ' +
          'Decide between using a controlled or uncontrolled input ' +