title: How can I avoid to get too much recursion when storing data using firebase?
body: <p>I'm creating a small application using only React.js, material-ui and firebase. I don't want to use Redux now in order to be familiar more with react.
  I create a form which is described by:</p>
  
  <p>User.jsx:</p>
  
  <pre><code>import React, { Component } from 'react'
  import Button from '@material-ui/core/Button'
  import Grid from '@material-ui/core/Grid';
  import { withStyles } from '@material-ui/core/styles';
  import PropTypes from 'prop-types';
  import Typography from '@material-ui/core/Typography';
  import moment from 'moment';
  import db from '../db/config';
  import InputTextField from './textField';
  import RadioGroup from './radioGroup';
  import SnackBar from './snackBar';
  
  
  const styles = (theme) =&gt; ({
    button: {
      margin: theme.spacing.unit,
    },
    root: {
      display: 'flex',
      marginTop: theme.spacing.unit * 8,
      padding: theme.spacing.unit * 3,
    },
    item: {
      padding: theme.spacing.unit * 2
    }
  });
  
  class User extends Component {
    state = {
      birthday: moment().format('YYYY-MM-DD'),
      message: '',
      name: '',
      open: false,
      gender: 'male',
  
    };
  
    handleChange = name =&gt; event =&gt; {
      this.setState({
        [name]: event.target.value,
      });
    };
  
    handleClose = (event, reason) =&gt; {
      if (reason === 'clickaway') {
        return;
      }
  
      this.setState({ open: false });
    };
  
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      const { 
        birthday,
        name,
        gender,
    } = this.state;
      console.log(`birthday: ${birthday} \n` + 
    `Name: ${name} \n` + 
    `gender: ${gender} \n`)
  
  
    const ref = db.ref('users/');
  
    ref.orderByChild('name').on('child_added', (snapshot) =&gt; {
      const existedName = (snapshot.val().name).toLowerCase().trim();
      const newName = name.toLowerCase().trim();
      if(existedName === newName){
        this.setState({
          open: true,
          message: 'Name already exists!!',
        })
      } else {
        ref.push({
          name: name.trim(),
          gender,
          birthday
      })
      .then(() =&gt; {
        this.setState({
          open: true,
          message: 'saved successfully!!',
        })
        return true;
      })
      .catch((error) =&gt; {
        this.setState({
          open: true,
          message: `Error adding baby: ${error}`,
        })
        return false;
      });
      }
    })
    }
  
    render(){
      const { classes } = this.props;
      const { 
        birthday,
        message,
        name,
        open,
        gender,
       } = this.state;
      return (
        &lt;div className={classes.root}&gt;
          &lt;Grid 
            container 
            spacing={40}
            justify='center'
            direction="column"
            alignItems="center"
          &gt;
            {open &amp;&amp; (
            &lt;SnackBar
              handleClose={this.handleClose}
              message={message}
              open
            /&gt;
            )}
            &lt;Typography 
              align="center"
              gutterBottom
              variant="title"
            &gt;
            Add New User
            &lt;/Typography&gt; 
  
            &lt;form onSubmit={this.handleSubmit} className={classes.form}&gt;
              &lt;Grid item className={classes.item} xs={12}&gt;
                &lt;InputTextField 
                  label="Name"
                  handleChange={this.handleChange('name')}
                  required
                  value={name}
                  type="text"
                /&gt;
              &lt;/Grid&gt;
              &lt;Grid item className={classes.item}&gt;
                &lt;InputTextField 
                  label="Birthday"
                  handleChange={this.handleChange('birthday')}
                  required
                  value={birthday}
                  type="date"
                  InputLabelProps={{shrink: true}}
                /&gt;
              &lt;/Grid&gt;
              &lt;Grid item className={classes.item}&gt;
                &lt;RadioGroup 
                  name="Gender"
                  handleChange={this.handleChange('gender')}
                  value={gender}
                /&gt;
              &lt;/Grid&gt;
              &lt;Grid item className={classes.item}&gt;
                &lt;Grid
                  container
                  direction="row"
                &gt;
                  &lt;Grid item&gt;
                    &lt;Button 
                      variant="contained" 
                      color="primary" 
                      className={classes.button}
                    &gt;
              Cancel
                    &lt;/Button&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item&gt;
                    &lt;Button 
                      variant="contained" 
                      color="primary" 
                      className={classes.button}
                      type='submit'
                    &gt;
              Save
                    &lt;/Button&gt;
                  &lt;/Grid&gt;
                &lt;/Grid&gt;
              &lt;/Grid&gt;
            &lt;/form&gt;
          &lt;/Grid&gt;
        &lt;/div&gt;
  
      )
    }
  }
  User.propTypes = {
    classes: PropTypes.object.isRequired,
  }
  
  export  default withStyles(styles)(User);
  </code></pre>
  
  <p>SnackBar.jsx:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
  import Snackbar from '@material-ui/core/Snackbar';
  import IconButton from '@material-ui/core/IconButton';
  import CloseIcon from '@material-ui/icons/Close';
  
  const styles = theme =&gt; ({
    close: {
      width: theme.spacing.unit * 4,
      height: theme.spacing.unit * 4,
    },
  });
  
  const SimpleSnackbar = (props) =&gt; {
      const { 
          classes,
          handleClose,
          message,
          open,
       } = props;
  
      return (
        &lt;div&gt;
          &lt;Snackbar
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'left',
            }}
            open={open}
            autoHideDuration={6000}
            onClose={handleClose}
            ContentProps={{
              'aria-describedby': 'message-id',
            }}
            message={&lt;span id="message-id"&gt;{message}&lt;/span&gt;}
            action={[
              &lt;Button key="undo" color="secondary" size="small" onClick={handleClose}&gt;
                UNDO
              &lt;/Button&gt;,
              &lt;IconButton
                key="close"
                aria-label="Close"
                color="inherit"
                className={classes.close}
                onClick={handleClose}
              &gt;
                &lt;CloseIcon /&gt;
              &lt;/IconButton&gt;,
            ]}
          /&gt;
        &lt;/div&gt;
      );
  }
  
  SimpleSnackbar.propTypes = {
    classes: PropTypes.object.isRequired,
    handleClose: PropTypes.func.isRequired,
    message: PropTypes.string.isRequired,
    open: PropTypes.bool.isRequired,
  };
  
  export default withStyles(styles)(SimpleSnackbar);
  </code></pre>
  
  <p>When I enter the different attributes of the form, I got this warning in the console: <a href="https://pastebin.com/MJ8fCVw2" rel="nofollow noreferrer">Firebase Warning</a> </p>
  
  <p>Added to the message <code>too much recursion</code> described by <a href="https://pastebin.com/aGb1Y29n" rel="nofollow noreferrer">Firebase: too much recursion</a></p>
  
  <p>I'm beginner to firebase and it's my first app using it.I think that I missed something or I didn't use the suitable function in order to fetch if a given name already exists. Unless it will be saved. I will be grateful if anyone tried to help me to fix the warning and the error displayed on the console.</p>