В React нет состояния, которое говорит, активно ли сейчас поле ввода.
document.activeElement показывает ответ, но не перерендеривает компонент при смене фокуса, а autoFocus стреляет один раз и не даёт вернуть фокус программно. Приходится вешать onFocus и onBlur вручную.Хук
useFocus из @reactuses/core сворачивает это в [isFocused, setFocused]: первая часть отражает реальное состояние элемента, вторая вызывает focus() или blur() по вашей логике. Например, при программном фокусе на поиске.Для подсветки рамки хватит CSS
:focus, но как только фокус начинает управлять JSX через подсказки, плавающие лейблы или паузу тикера, хук убирает шаблонный код.Я бы сохранил его для форм и модалок, где фокус важен для UX, а не только для стилей. Разобрали в статье.