title: React functional component with useState hook executes function immediately
body: <p>I have a functional React component with useState hooks, and I have an array with five textinput fields. The values of the input fields are registered in the state in an array. The problem is, that I want to update the inputfields array with an onChange listener every time I input something. However, once I load the page, the function (onChange listener) is executed immediately in an endless loop... why is that? </p>
  
  <pre><code>const addDublette = props =&gt; {
      // constructor(props) {
      //     super(props);
      //     this.textInput1 =  React.createRef();
      // }
      const [actualState, changeState] = useState({
          showInputField: false,
          dublettenIDs: [],
          errorMessage: '',   
          inputFields: ['','','','',''],
      });  ....
  </code></pre>
  
  <p>My method to update input values in state:</p>
  
  <pre><code>const handleDoublettenIDs = (event,index) =&gt; {     
          let idnumber = event.target.value;
          let newInputFields = [...actualState.inputFields];
          newInputFields.splice(index,1, idnumber);
          console.log(newInputFields);
          if (isNaN(idnumber)) {
              changeState({...actualState, errorMessage: 'ID is not a number'})
          } if (idnumber &gt; 2147483647) {
              changeState({...actualState, errorMessage: 'Number can not be bigger than 2147483647!'})
          }        
          else {
              changeState({...actualState, inputFields: newInputFields, errorMessage: '' });
          }      
      }
  </code></pre>
  
  <p>My return render method:</p>
  
  <pre><code>return (
  &lt;p&gt;       
                  {
  
                      actualState.inputFields.map((val,index) =&gt; (                        
                          &lt;InputElement key={index} elemValue = {val} name={"input" +  index} onChangeListener={(event,index) =&gt; handleDoublettenIDs(event,index)} /&gt;
                          )
                      )
                  }
  
                  &lt;p&gt;{errorMessage}&lt;/p&gt;
                  &lt;br /&gt;                    
                  &lt;p&gt;&lt;button onClick = {handleInputs(props.anzeigeID)}&gt;absenden&lt;/button&gt;&lt;/p&gt;   
              &lt;/p&gt;  ...)
  </code></pre>
  
  <p>I pass the onChangeListener method down to my InputElement components "onChange" method with the props.onChangeListener property...</p>
  
  <pre><code>const inputElement = (props) =&gt; (
      &lt;p&gt;
          &lt;input 
              value ={props.elemValue}
              ref={props.reference}
              name={props.name}
              type="number" 
              max="2147483647"
              placeholder="Doubletten-ID" 
              onChange={props.onChangeListener}&gt;            
          &lt;/input&gt;
      &lt;/p&gt;
  
  
  )
  
  
  
  export default inputElement
  </code></pre>
  
  <p>I think the problem could be in a circular update dependency loop, but I still have not found out where and how...</p>