useCallbackで囲んだ関数内で参照している変数を、その関数を呼び出すタイミングで更新したい

Question

前提・実現したいこと

タイトル通りのことを実装したいです。

仮のコードを以下に載せています。

以下の例では、意図的にuseCallbackの第二引数に[text]を設定していません。

[text]を設定せずに、setValが呼び出されたタイミングで、その時点でのtextの値を取得して const t = text; を実行したいです。

何か方法等あれば、是非ご教示いただきたいです。

また、質問や疑問点等ございましたら追記していきますので、ご指摘お願いいたします。

該当のソースコード

export const App = () => {
  const [text, setText] = useState("click")
  const setVal = useCallback(() => {
    const t = text
    setText(`${t} ${t}`)
  }, [])
  return (
    <>
      <button onClick={setVal}>{text}</button>
    </>
  )
}

Comments

[maisumakun]

なぜそのようなことが必要となったのでしょうか？

[tksx1227]

そうですね、少し前に質問させていただいた箇所の最後の詰め、といったところになるのですが、少々文面だと説明しづらいので、前回の質問に追記することにします。

Answer 1

いくつか手法は考えられますが、どれも一長一短です。

• 素直にsetValのパラメーターへ[text]を入れる
• setValueの処理を行う関数はrefに格納しておいて、イベントに指定する関数はrefに入った関数を呼び出す形にする（タイミングによってはうまく動かないかもしれません）
• 「クリックした」ことだけを記録するstateを別に立てて、そのstateが変化したことをuseEffectで拾ってsetValueを行う（動作行程が長くなってしまいます）