renderHookでcurrentがundefinedになる原因

tl;dr

renderHook の引数のコールバックをブロック{}で囲っちゃだめ。

自作 React アプリのカスタムフックのテストをする際、renderHook で返り値の中身を見ると undefined になっていて暫くハマった。

実装の詳細は割愛するが、超絶単純化するとこんなノリのテストを書いてた。

const { result } = renderHook(() => {
  useCounter(100)
})

console.log(result.current) // undefined

state の更新タイミングの問題ならwaitForが必要って話はよくあるが、undefined なっちゃうのはなんで。。？

暫くハマったが、公式の書き方と比較した時にブロック{} の有無の差に気づいた。まさか。

const { result } = renderHook(() => useCounter(100))

console.log(result.current) // 100!

なんと。こんなミスに遭遇する人はそうそういないと思うが念のため。。