При каждом вызове
setNewItemData
у тебя получается новый массив
items
. Который ты пихаешь в
setItem
. При каждом вызове
setItem
, выполнится вся твоя функция, а значит и
items.map
, и заново отрендерится каждый из
MyItem
. Если хочешь что рисовался только
MyItem
, то модифицируй его внутренний стейт, а не стейт родителя.
const Item = ({ item }) => {
const [item, setItem] = useState(itemProp);
const updateItem = useCallback(() => {
setItem((item) => ({
...item,
count: item.count + 1
}));
}, []);
return (
<div onClick={updateItem}>
{item.title} {item.count}
</div>
);
};