React HooksのuseEffect経由でrefを使う場合

React HooksのuseEffect内経由でrefを使うとundefinedになっていて動作しなかった。具体的にはこんな感じでキーボードイベントを使いたかったパターン。

const ref = createRef<HTMLDivElement>()

useEffect(() => {
  document.addEventListener('keydown', onKeyDown)
  return () => document.removeEventListener('keydown', onKeyDown)
})

function onKeyDown(e: KeyboardEvent) {
  someFunc()
}

function someFunc() {
  ref.current
}

これでrefを指定する。

return (
  <div ref={ref}>
  </div>
)

すると、キー入力をしてuseEffect経由で呼び出されたsomeFunc内のref.currentはundefinedになっている。よく分からない。

とりあえず、createRefではなく、useRefとuseCallbackを組み合わせるとちゃんといけるっぽい。

const ref = useRef<HTMLDivElement>()
const setRef = useCallback((node: HTMLDivElement) => {
  ref.current = node
}, [])

refの指定は下記。

return (
  <div ref={setRef}>
  </div>
)

複雑…。

Ref objects inside useEffect Hooks - Daniel Schmidt - Medium