Do I need useCallback when running a function from a child component

I understand that we should consider useCallback when we care about ensuring referential equality is considered during parent component renders. However, I am not clear if I need it in the following scenario where the parent is actually processing a child function.

import { ReactNode, useCallback, useState } from "react";

interface WrapperProps {
  children: ReactNode;
  onDoIt: () => Promise<void>;
}

type Status = "Do It" | "Doing It..." | "Did It";

export const Wrapper: React.FC<WrapperProps> = ({ children, onDoIt }) => {
  const [status, setStatus] = useState<Status>("Do It");

  const handleDidIt = () => {
    setStatus("Did It");
  };

  const handleDoIt = async () => {
    setStatus("Doing It...");
    await onDoIt();
    handleDidIt();
  };

  return (
    <>
      <button onClick={handleDoIt} disabled={status !== "Do It"}>
        {status}
      </button>
      <hr />
      {children}
    </>
  );
};

export default function App() {
  const [result, setResult] = useState<string>("");

  const doIt = (): Promise<void> => {
    return new Promise((resolve) => {
      window.setTimeout(() => {
        setResult("Done, thanks");
        return resolve();
      }, 1000);
    });
  };

  return (
    <Wrapper onDoIt={doIt}>
      <h1>Hello CodeSandbox</h1>
      <p>{result}</p>
    </Wrapper>
  );
}

Should the hoc function handleDoIt() be wrapped in useCallback here?

  const handleDoItCallback = useCallback(async () => {
    setStatus("Doing It...");
    await onDoIt();
    handleDidIt();
  }, [onDoIt]);

Codesandbox Demo

Yes it should be wrapped, as well as any other function it uses.

In this case:

const handleDidIt = useCallback(() => {
    setStatus("Did It");
}, []);

and then include in the deps array:

const handleDoIt = useCallback(async () => {
    setStatus("Doing It...");
    await onDoIt();
    handleDidIt();
  }, [onDoIt, handleDidIt]);

If you do not do this, then handleDoIt can fall out-of-date with the latest handleDidIt. In this case, it doesn't matter as it's just a constant state update, but it can with more complex logic.

Lastly, in the parent:

const doIt = useCallback((): Promise<void> => {
    return new Promise((resolve) => {
      window.setTimeout(() => {
        setResult("Done, thanks");
        return resolve();
      }, 1000);
    });
  });

Notably, setStatus does not need to be included in either dependency array because it is always guaranteed to be stable.