Accounts.verifyEmail breaks React app

Can anyone explain to me why this is happening?

I have a React Router <Route/> for /verify-email which renders a component looking like this:

class VerifyEmail extends React.PureComponent {
  constructor() {
    this.state = { error: null };

  componentDidMount() {
    const { history } = this.props;
    const { params } = this.props.match;
    Accounts.verifyEmail(params.token, (error) => {
      if (error) {
        console.error('verifyEmail Error', error);
        Bert.alert(error.reason, 'danger');
        this.setState({ error: `${error.reason}. Please try again.` });
      } else {
        Bert.alert('E-Mail Adresse erfolgreich besätigt!', 'success');

  render() {
    return (
      <div className="verify-email">
          {!this.state.error ? 'Bitte warten ...' : this.state.error}

export default VerifyEmail;

The weird thing is: The component is rendered all over again. indefinitely. But it is not just rerendering, the constructor() is run all over again and again - I have never experienced this.
I just do not understand why this is happening. I don’t get it.
Any ideas on this?

Hey, did you ever solve this? I kinda hit the same wall over here and can’t figure out what to do.

I fell into always using prop-types with defaults where appropriate so I know my props are always valid.

Usually with constructor I do: constructor(props){ super(props) … }

Not sure what happens when you do not pass props to super.


Do your tests and live rendering behave differently?

Did you try just commenting out Bert.Alert (eliminate that dependency)