title: Huge React State Array with Hundreds of Inputs, slow state changes onChange
body: <p>I'm trying to a large React form, but each input in the form is complex and has a complex state. I keep the state of all of the inputs in a <code>parent</code> component, and each input is wrapped in a <code>child</code> component. I have a state array in parent that contains the current value of the state for all of the input elements. Currently, every time there's an <code>onChange</code> in the input, I try to reset the entire state array in the parent via <code>setState()</code>. This was okay with up to 5 inputs, but once I got above that (like a hundred inputs), I started to notice some serious lag in the program. <strong>Please note</strong>: <strong>the program will also allow you to rearrange, <code>delete</code>, and <code>add</code> inputs, so the state needs to accommodate those changes</strong> Ie. the first input could swap positions with the 2nd input or be inserted right after the 10th input.</p>
  
  <p>My objective is to find a way to optimize the performance of this onChange. Ultimately, I don't really need the data to be in the <code>parent</code> component, I just need to collect the values for the inputs when I click <code>save</code> at the bottom of the page. </p>
  
  <p>Just to reiterate, I have two components.</p>
  
  <ol>
  <li><p>A Parent Component</p></li>
  <li><p>A Child Component</p></li>
  </ol>
  
  <p>The Child component is basically an <code>input</code> where users can write hundreds of lines of text. </p>
  
  <p>The Parent component contains 100s of the children and essentially looks like this:</p>
  
  <pre><code>export default function Parent(props) {
    const [state, setState] = useState(createDummyData());
    useEffect(() =&gt; {});
  
  
  
    const onInputChange = (value, index) =&gt; {
      var tempValue = [...state];
      tempValue[index] = value;
      setState(tempValue);
    };
  
    return (
      &lt;&gt;
        &lt;div style={{ display: "flex", flexDirection: "column" }}&gt;
          {state.map((item, index) =&gt; (
            &lt;Child
              value={state[index].content}
              index={index}
              onChange={onInputChange}
            /&gt;
          ))}
          &lt;button style={{backgroundColor: "red"}}&gt;save input data&lt;/button&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <p>The child component looks like this</p>
  
  <pre><code>export default function Child(props) {
    useEffect(() =&gt; {});
  
    const onChange = event =&gt; {
      props.onChange(event.target.value, props.index);
    };
  
    return (
      &lt;&gt;
        &lt;input value={props.value} onChange={onChange} /&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <p>I haven't found a simple way around this. Some seem to suggest using Redux, others seem to say use a combination of <code>useMemo</code> and <code>useEffect</code> to prevent rerenders. Your help would be much appreciated.</p>
  
  <p>One thing I noticed is that if I try to keep individual state within the Child components, they render <code>onChange</code> much faster. This is probably because it doesn't have to setState for the parent state array each time. If possible, I'd like to be able to simply go through and grab the state of the child nodes when I click save. Would I use a <code>ref</code> in this case? Is it possible to do it without a ref?</p>
  
  <p>I'd also like to AVOID using <code>onBlur()</code> just for the purpose of this project</p>
  
  <p>The codesandbox is copied down below for reference: <a href="https://codesandbox.io/s/cocky-knuth-jm8n6?fontsize=14" rel="noreferrer">https://codesandbox.io/s/cocky-knuth-jm8n6?fontsize=14</a></p>