Cuando paso el cursor por encima del número, el elemento selectedItem de estado cambiará al número sobre el que se pasa el cursor.
Sin embargo, por lo que veo en Console, cada vez que paso el cursor sobre un número, los 7 elementos se vuelven a representar, que es la situación que quiero evitar.
¿Cómo hacerlo?
Aplicación.js
import "./styles.css"; import React, { useState } from "react"; export default function App() { const [selectedItem, setSelectedItem] = useState(1); const Item = ({ itemId }) => { const onItemHover = (id) => { setSelectedItem(id); }; console.log("rendering item ", itemId); return ( <div onMouseOver={() => { onItemHover(itemId); }} > {itemId} </div> ); }; return ( <div className="App"> <div>Selected ITEM: {selectedItem}</div> <div className=".container"> <div className="row"> <Item itemId="1" /> <Item itemId="2" /> </div> <div className="row"> <Item itemId="3" /> <Item itemId="4" /> <Item itemId="5" /> </div> <div className="row"> <Item itemId="6" /> <Item itemId="7" /> </div> </div> </div> ); } Códigosycaja:
https://codesandbox.io/s/jolly-panini-6gl6b?file=/src/App.js:106-118
Mueva el Item fuera del componente y memo :
const Item = React.memo({ setSelectedItem, itemId }) => { const onItemHover = (id) => { setSelectedItem(id); }; console.log("rendering item ", itemId); return ( <div onMouseOver={() => { onItemHover(itemId); }} > {itemId} </div> ); }); De forma predeterminada, memo hará una verificación de igualdad superficial y no se volverá a procesar cuando las propiedades no hayan cambiado.
Le pasaría setSelectedItem así como itemId :
export default function App() { const [selectedItem, setSelectedItem] = useState(1); return ( <div className="App"> <div>Selected ITEM: {selectedItem}</div> <div className=".container"> <div className="row"> <Item setSelectedItem={setSelectedItem} itemId="1" /> <Item setSelectedItem={setSelectedItem} itemId="2" /> </div> <div className="row"> <Item setSelectedItem={setSelectedItem} itemId="3" /> <Item setSelectedItem={setSelectedItem} itemId="4" /> <Item setSelectedItem={setSelectedItem} itemId="5" /> </div> <div className="row"> <Item setSelectedItem={setSelectedItem} itemId="6" /> <Item setSelectedItem={setSelectedItem} itemId="7" /> </div> </div> </div> ); } Los establecedores de estado useState son estables, por lo que no provocarán que se vuelvan a representar al cambiar. Por lo tanto, el Item solo se volverá a procesar si cambia itemId del elemento.