import "./styles.css"; import React from "react"; const getData = () => { return Array.from({ length: 50 }, (el, idx) => ({ value: Math.random(), label: `row ${idx + 1}`, })); }; export default function App() { const [data, setData] = React.useState(getData()); const handleUpdate = () => { setData((prev) => { return prev.map((row, i) => i === 0 ? { ...row, value: Math.random() } : row ); }); }; return ( <div> <h1>List App</h1> <Button onClick={handleUpdate}>update `row 1`</Button> {data.map((row) => { return <Row key={row.label} label={row.label} value={row.value} />; })} </div> ); }

В представленном коде React-компонента создаётся список из 50 элементов с полями value и label. При нажатии на кнопку обновляется только первый элемент списка, меняя его value на новое случайное число.

Ключевой момент — при обновлении состояния используется функция setData, которая создаёт новый массив, где только первый объект изменён, остальные остаются прежними. Это важно для оптимизации рендеринга, так как React сравнивает объекты по ссылке.

Если в компоненте Row реализан React.memo или shouldComponentUpdate, то при обновлении изменится только первый Row, остальные не будут перерисовываться, что повышает производительность.

Пример использования React.memo для компонента Row:

const Row = React.memo(({ label, value }) => {
  console.log(`Render ${label}`);
  return (
    <div>
      {label}: {value.toFixed(2)}
    </div>
  );
});

Таким образом, обновление состояния с сохранением неизменных ссылок на объекты помогает избежать лишних перерисовок.