<pre class="shiki github-dark shaku"><code>import React, { Ref, useRef, useState, useEffect } from 'react'export function useFocus&lt;T extends HTMLElement&gt;(): [Ref&lt;T&gt;, boolean] { const ref = useRef&lt;T&gt;(); //defining the ref const [focussed, setFocussed] = useState&lt;boolean&gt;(false) useEffect(() =&gt; { if (!ref.current) return //return if ref does not exist const currentElement = ref.current //storing the current ref const onFocus = () =&gt; setFocussed(true) //fn for focus const onBlur = () =&gt; setFocussed(false) //fn for remove focus currentElement.addEventListener('focus', onFocus) //when element is focussed currentElement.addEventListener('blur', onBlur) //when focus is removed return () =&gt; { //removing the event listeners currentElement.removeEventListener('focus', onFocus) currentElement.removeEventListener('blur', onBlur) } }) //no dependency array means useEffect will rerun on every render return [ref, focussed] /returning an iterable with the reference and the boolean value of isFocussed}// 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; &lt;p&gt;{isFocused ? 'focused' : 'not focused'}&lt;/p&gt; &lt;/div&gt;}</code></pre>

Using useEffect with no dependency array

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…