<pre class="shiki github-dark shaku"><code>import React, { Ref, useRef, useEffect, useState } from 'react'export function useFocus&lt;T extends HTMLElement&gt;(): [Ref&lt;T&gt;, boolean] { const ref=useRef(); const [isFocused, setIsFocused]=useState(false); const onFocus=()=&gt;{ setIsFocused(true); } const onBlur=()=&gt;{ setIsFocused(false); } useEffect(()=&gt;{ console.log( ref.current); const element=ref.current; if (!element) return; element.addEventListener('focus', onFocus); element.addEventListener('blur', onBlur); return ()=&gt;{ element.removeEventListener('focus', onFocus); element.removeEventListener('blur', onBlur); } },) return [ref, isFocused]}// if you want to try your code on the right panel// remember to export App() component like belowexport function App() { const [ref, isFocused] = useFocus() return &lt;div&gt; &lt;input ref={ref}/&gt; {isFocused &amp;&amp; &lt;p&gt;focused&lt;/p&gt;} &lt;/div&gt;}</code></pre>

solution useFocus

CSS pseudo-class :focus-withincould be used to allow conditional rendering in parent element on the focus state of descendant elements. While it is co…