BFE.devでのAI解答例 - React コーディング問題
11. useFocus()

import { useState, useEffect, useRef } from 'react';

function useFocus() {
  const [isFocused, setIsFocused] = useState(false);
  const ref = useRef(null);

  const onFocus = () => setIsFocused(true);
  const onBlur = () => setIsFocused(false);

  useEffect(() => {
    const node = ref.current;
    if (node) {
      node.addEventListener('focus', onFocus);
      node.addEventListener('blur', onBlur);
      return () => {
        node.removeEventListener('focus', onFocus);
        node.removeEventListener('blur', onBlur);
      };
    }
  }, []);

  return [ref, isFocused];
}

function App() {
  const [ref, isFocused] = useFocus();
  return (
    <div>
      <input ref={ref} />
      {isFocused && <p>focused</p>}
    </div>
  );
}

useFocus()は、useState、useEffect、useRefを使用して、フォーカス状態をコントロールします。refを返し、それを<input>要素に提供して、focusおよびblurイベントをuseEffectから追加/削除します。そして、真偽値のisFocusedステートを返します。isFocusedが真の場合、条件付きレンダリングで<p>要素をレンダリングします。そして、<App>でuseFocus()を使用し、refとisFocusedの両方をレンダリングしています。