Passing functions as props causes unnecessary re-renders

without-useCallback-1.jsx

import { useState } from "react";

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

const CountButton = ({ updateCount }) => {
  // Note that this line will fire every time, 
  // showing us that an unneeded re-render has occurred. 
  console.log("=> CountButton render", Date.now());

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

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

  const updateCount = () => setCount((c) => c + 1);

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

export default OneFileApp;