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の両方をレンダリングしています。