useCallback and memoization

Question

How the memorized callback function works? In some articles I read that the function is recreated if we do not use useCallback. But if it is recreated, should it be different from the prev version? In my code I didn't notice that there was a difference in callback functions. My question is: Why in both cases, my set size is 1?

from off doc useCallback

Returns a memoized callback.

Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

import { useCallback } from "react";

const dataSource = [
    {
        id: 1,
        model: "Honda",
        color: "red",
    },
    {
        id: 2,
        model: "Mazda",
        color: "yellow",
    },
    {
        id: 3,
        model: "Toyota",
        color: "green",
    },
];

const Car = ({ model, color, set, onCarClick }) => {
    const onClick = () => onCarClick(model, color);
    set.add(onCarClick);
    console.log(set.size);
    return (
        <div onClick={onClick}>
            Model: {model} Color: {color}
        </div>
    );
};

const CarsCallback = ({ cars, set }) => {
    const onCarClick = (model, color) => {
        console.log(model, color);
    };
    console.log("CarsCallback");
    return (
        <>
            {cars.map((car) => {
                return (
                    <Car
                        key={car.id}
                        set={set}
                        {...car}
                        onCarClick={onCarClick}
                    />
                );
            })}
        </>
    );
};

const CarsUseCallback = ({ cars, set }) => {
    const onCarClick = useCallback((model, color) => {
        console.log(model, color);
    }, []);
    console.log("CarsUseCallback");
    return (
        <>
            {cars.map((car) => {
                return (
                    <Car
                        key={car.id}
                        {...car}
                        set={set}
                        onCarClick={onCarClick}
                    />
                );
            })}
        </>
    );
};

export default function App() {
    return (
        <div className="App">
            <CarsCallback cars={dataSource} set={new Set()} />
            <CarsUseCallback cars={dataSource} set={new Set()} />
        </div>
    );
}

Answer 1

Because CarsUseCallback and CarsCallback was triggered once.

We can see the only one log of CarsUseCallback and CarsCallback.

If we re-render the CarsUseCallback and CarsCallback, we can see the size is 1 and 2.

const CarsCallback = ({ cars, set }) => {
  const [count, setCount] = useState(1);
  console.log('CarsCallback');
  useEffect(() => {
    setCount(2);
  }, []);
  // ...

};

const CarsUseCallback = ({ cars, set }) => {
  const [count, setCount] = useState(1);
  console.log('CarsUseCallback');

  useEffect(() => {
    setCount(2);
  }, []);
  // ...

}