Как правильно оптимизировать сохранение state при вводе?

Question

[EvelynWaugh]

Например:

const [value, setValue] = useState([
{
id: 1,
text: ''
}.
{
id:2,
text: ''
}
]);

//onChange
const handleOnChange = (e, id) => {
const newState = value.map(v => v.id  === id ? {...v, text: e.target.text} : v);
setValue(newState )
}
return (
<>
{value.map(v => (
<input onChange={(e) => handleOnChange(e,v.id)} />
))}
</>
)

И вот весь компонент будет перерендерироваться при каждом нажатии. А если у меня большой объект с дочерними элементами и у каждого есть такое поле для ввода, то печатать получается с тормозами а удалять с Backspace вообще зависает. Можно это как-то оптимизировать ? Я думал может мутировать state.

Answer 1

[Bikishov Dmitry]

Создай компонент и используй его, при изменение всего объекта будут изменяться только где отличаются props

const Input = React.memo(({id,  text}) => (
  <input onChange={(e) => handleOnChange(e, id)} />
))