React - how to prevent re-render for child component

Question

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

Answer 1

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.