title: React efficiently update object in array with useState hook
body: <p>I have a React component that renders a moderately large list of inputs (100+ items). It renders okay on my computer, but there's noticeable input lag on my phone. The React DevTools shows that the entire parent object is rerendering on every keypress.</p>
  
  <p>Is there a more efficient way to approach this?</p>
  
  <p><a href="https://codepen.io/anon/pen/YMvoyy?editors=0011" rel="noreferrer">https://codepen.io/anon/pen/YMvoyy?editors=0011</a></p>
  
  <pre><code>function MyInput({obj, onChange}) {
    return (
      &lt;div&gt;
        &lt;label&gt;
          {obj.label}
          &lt;input type="text" value={obj.value} onChange={onChange} /&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    );
  }
  
  // Passed in from a parent component
  const startingObjects = 
    new Array(100).fill(null).map((_, i) =&gt; ({label: i, value: 'value'}));
  
  function App() {
    const [objs, setObjects] = React.useState(startingObjects);
    function handleChange(obj) {
      return (event) =&gt; setObjects(objs.map((o) =&gt; {
        if (o === obj) return {...obj, value: event.target.value}
        return o;
      }));
    }
    return (
      &lt;div&gt;
        {objs.map((obj) =&gt; &lt;MyInput obj={obj} onChange={handleChange(obj)} /&gt;)}  
      &lt;/div&gt;
    );
  }
  
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>