useCallbacn in action

useCallbacn.js

import { useCallback, useRef } from "react";
const Elem = ({ index, onClick }) => {
  const onClickRef = useRef(onClick);
  const handleEvent = useCallback(() => {
    onClickRef.current(index);
  }, [index, onClickRef]);

  return <button onClick={handleEvent}>{index}</button>;
};

export default function App() {
  const handleClick = useCallback((index) => {
    alert(index);
  }, []);
  return (
    <div className="App">
      {["1", "2", "3", "4", "5"].map((index) => (
        <Elem key={index} index={index} onClick={handleClick} />
      ))}
    </div>
  );
}