blog-what-is-the-difference-between-usecallback-and-usememo-02.js

import { useCallback, useState } from "react";

function Child({ calc }) {
  return <p>{`Total: ${calc()}`}</p>;
}

export default function Parent() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  
  function calc(x, y) {
    return x + y;
  }
  
  const memoizedCalc = useCallback(() => {
    return calc(a, b);
  }, [a, b]);
  
  return (
    <div className="App">
      <h1>Calculate using useCallback hook</h1>
      <>
        <p>
          <button onClick={() => setA(a + 1)}>a + 1</button> = {a}
        </p>
        <p>
          <button onClick={() => setB(b + 1)}>b + 1</button> = {b}
        </p>
      </>
      <Child calc={memoizedCalc} />
    </div>
  );
}