В представленном коде React-компонента создаётся список из 50 элементов с полями value и label. При нажатии на кнопку обновляется только первый элемент списка, меняя его value на новое случайное число.
import "./styles.css";
В представленном коде React-компонента создаётся список из 50 элементов с полями value и label. При нажатии на кнопку обновляется только первый элемент списка, меняя его value на новое случайное число.
Короткий ответ
Что ответить на собеседовании
Подробный разбор
Ответ с пояснениями
Условие
import "./styles.css"; import React from "react";
const getData = () => {
return Array.from({ length: 50 }, (el, idx) => ({
value: Math.random(),
label: строка ${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 (
Список приложений
<Button onClick={handleUpdate}>обновить строку 1</Button>
{data.map((row) => {
return <Row key={row.label} label={row.label} value={row.value} />;
})}
);
}
Ответ
В представленном коде 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>
);
});
Таким образом, обновление состояния с сохранением неизменных ссылок на объекты помогает избежать лишних перерисовок.