title: Calling a state update function within a state update function - useState hook in React Functional component
body: <p>I have a callback function that updates two states.</p>
  <ol>
  <li>Simple increment and set of a state variable</li>
  <li>Updating another state from within the state update function of the first state utilizing the updated state value of the first state.</li>
  </ol>
  <p>An example code is given below,</p>
  <pre><code>const [index, setIndex] = useState(-1);
  const [fields, setFields] = useState([]); 
  
  const callbackFunction = () =&gt; {
      setIndex(prevState =&gt; {
          const newIndex = prevState + 1;
          setFields(prevState =&gt; [...prevState, {id: newIndex, question: &quot;&quot;, type: &quot;&quot;}]);
          return newIndex;
      });
  };
  
  //I will be calling the callbackFunction somewhere over here in my JSX
  
  </code></pre>
  <p>Please note that my initial description may not accurately describe the code. Apologies if so.</p>
  <p>I want to know if the code I implemented is</p>
  <ol>
  <li>An anti patter or not</li>
  <li>Would cause any problems which I am not seeing at the moment</li>
  </ol>
  <p>The red flag for me is the state update within a state update.</p>
  <p>Thanks in advance for any information that would enlighten me.</p>