При каждом вызове
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>
);
};