When I hover the number, the state selectedItem will change to the number hovered.
However, from what I see in Console, every time I hover a number, all 7 items re-render, which is the situation I want to avoid.
How to do it?
App.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>
);
}
Codesandbox:
https://codesandbox.io/s/jolly-panini-6gl6b?file=/src/App.js:106-118
Move Item outside the component and memo-ize it:
const Item = React.memo({ setSelectedItem, itemId }) => {
const onItemHover = (id) => {
setSelectedItem(id);
};
console.log("rendering item ", itemId);
return (
<div
onMouseOver={() => {
onItemHover(itemId);
}}
>
{itemId}
</div>
);
});
By default, memo will do a shallow equality check and not re-render when the properties haven't changed.
You'd pass setSelectedItem as well as itemId to it:
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>
);
}
useState state setters are stable, so won't cause rerendering by changing. So the Item will only re-render if itemId changes.