useCallback helps us prevent unnecessary re-renders

useCallback-example.js

import { useState, useCallback } from "react";

const CountDisplay = ({ count }) => <h3>Count: {count}</h3>;

const CountButton = React.memo(({ updateCount }) => {
  // Note that this line will now only execute once on initial render!
  console.log("=> CountButton render", Date.now());

  return <button onClick={() => updateCount()}>Increment</button>;
});

const CounterApp = () => {
  const [count, setCount] = useState(0);

  const updateCount = useCallback(() => {
    setCount((c) => c + 1);
  }, [setCount]);

  return (
    <>
      <CountButton updateCount={updateCount} />
      <CountDisplay count={count} />
    </>
  );
};

export default CounterApp;