Cuando hago clic en un elemento para cambiar solo este valor de estado. Pero luego vuelva a renderizar el elemento de descanso, aunque uso memo. Cómo evitar volver a renderizar elementos de descanso.

Aplicación.js

 const App= ()=> { const [items, setItems] = useState({ [`item-1`]: { h: 100, w: 100 }, [`item-2`]: { h: 200, w: 200 } const changeProp = (d)=>{ const getElement = d.currentTarget; const itemKey = getElement.getAttribute('data-key'); const deepCopy = JSON.parse(JSON.stringify(items)); deepCopy.[itemKey] ={ h: rect.height, w: rect.width, } setItems(deepCopy); } const getItems = Object.entries(items); return ( <div> { getItems.map( (d,i) => <Item data={d} key={i} changeProp={changeProp}/> ) } </div> ); }

Artículo.js

 const Item = ({data, changeProp}) => { return ( <div className="eachItem" id={getKey} data-key={getKey} onClick={e=>changeProp(e)}> item </div> ); } export default memo(Item);