useCallbackがうまく動かない

Question

下記のコンポーネントをuseCollbackでメモ化したいのですが、うまく動かず、、
target is not definedがかえってきます、、
こちらのコンポーネントでメモ化する場合、どのような記述をしたら良いでしょうか？
targetに依存する形にしたいのですが、、

import QRCode from 'qrcode'
import { useCallback } from 'react'
export const qrDownload = useCallback((target: string | undefined) => {
  if (!target) return
  QRCode.toDataURL(target, (err, url) => {
    const link = document.createElement('a')
    link.href = url
    link.download = 'test.png'
    console.log(link)
    link.click()
  })
},[target])

Answer 1

依存配列内のtargetはどこにも定義していないのでtarget is not definedが出るのは当たり前です。

---

そもそもuseCallbackはファイルのトップレベルで呼び出すことはできません。関数コンポーネントかカスタムHook内で呼び出すようにしてください。

export const qrDownload = (target: string | undefined): string => {
  if (!target) return "";
    /* 
  省略
  */
};

import { qrDownload } from "./qrDownload";

export default function App() {
  const [target, setTarget] = useState("a");
  const callbackTest = useCallback(() => qrDownload(target), [target]);
  /* 
  省略
  */
}