React efficiently update object in array with useState hook : <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>
