Ref Callbackを使用してCustom Hooks内でDOMを参照する

引用元

import React, {useCallback, useRef} from 'react'

function useHookWithRefCallback() {
  const ref = useRef(null)
  const setRef = useCallback(node => {
    if (ref.current) {
      // Make sure to cleanup any events/references added to the last instance
    }

    if (node) {
      // Check if a node is actually passed. Otherwise node would be null.
      // You can now do what you need to, addEventListeners, measure, etc.
    }

    // Save a reference to the node
    ref.current = node
  }, [])

  return [setRef]
}

function Component() {
  // In your component you'll still recieve a `ref`, but it 
  // will be a callback function instead of a Ref Object
  const [ref] = useHookWithRefCallback()

  return <div ref={ref}>Ref element</div>
}

refをコールバックにして返すやり方。普段はuseEffectを使用してDOMを取得するようにしているのだが、このデザインパターンは初めて見た。
なお、動作確認したところちゃんと取れていた。

TypeScriptを使用してHooks化するとこうなる

import { useRef, useCallback } from 'react';

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

  return {
    ref,
    setRef
  };
};
const App: React.FC = () => {
  const { setRef } = useHookWithRefCallback()
  return (<div ref={setRef} />
}

関連記事