In the modern web, Focus Management is the invisible backbone of User Experience (UX) and Accessibility (a11y). Whether it’s auto-focusing a search bar when a modal opens, or highlighting a field during a validation error, controlling focus is a requirement for any professional React application.
This guide will deconstruct the useFocus hook, explain its internal mechanics, and provide real-world production scenarios that will help you ace your next Senior React Developer interview.
1. The "Why": Beyond Native Focus
You might wonder: “Why do I need a custom hook? Can’t I just use the :focus pseudo-class in CSS?”
While CSS handles styling well, JavaScript logic often needs to "know" the focus state to:
Trigger Side Effects: Like fetching data when a user enters a field.
Coordinate UI: For example, showing a complex dropdown menu only when an input is active.
Programmatic Control: Moving the user's cursor automatically after an action (like clicking "Edit").
2. The Implementation: A 5/5 Rubric Approach
To score a 5/5 in an interview, your code must be performant, leak-proof, and ergonomic.
The Complete Code
JavaScript
3. Deep Dive: Interview "Must-Knows"
A. The Reference Stability Trap
In the code above, setFocus is wrapped in useCallback. In an interview, explain that if setFocus were a plain function, it would be "re-created" on every render. If you passed that function as a prop to a component wrapped in React.memo, that component would re-render needlessly.
B. The Cleanup Closure
Why do we do const node = elementRef.current inside the useEffect? React refs are mutable. By the time the cleanup function (the return block) runs, elementRef.current might have already been set to null. By capturing it in a local variable node when the effect starts, we ensure we always have the correct reference to remove the listener from.
C. Performance vs. State
Every time setIsFocused is called, the component using the hook re-renders. In high-performance applications (like a spreadsheet with 1,000 inputs), you might discuss using ref only for focus state to avoid re-renders, though useState is the standard for general UI reactivity.
4. Real-World Production Scenarios
To impress an interviewer, you must connect the code to business value. Here is how companies like Airbnb, Netflix, and Stripe use focus management.
Scenario A: The "Command+K" Global Search (SaaS Strategy)
In platforms like Slack or Discord, users navigate via keyboard.
The Problem: The user presses a shortcut, but the search input is in a different part of the DOM tree.
The Solution: The
useFocushook provides thesetFocusmethod. When the global keydown event for "Cmd+K" is detected, the app callssetFocus().Production Detail: Use the
isFocusedboolean to trigger an "active" class on the parent container, creating a "Glow" effect that CSS:focuscan't easily reach if the input is nested deeply.
Scenario B: Multi-Factor Authentication (MFA) Inputs
When you receive a 6-digit code on your phone, banking apps like Revolut provide 6 individual boxes.
The Logic: As soon as the user types a digit in Box 1, the app validates the input and immediately calls
setFocus()on Box 2.The UI: The
isFocusedstate is used to change the border color of the current active box, providing clear visual feedback.
Scenario C: Form Validation and Accessibility (WCAG)
Accessibility is a legal requirement for many companies.
The Use Case: If a user submits a long registration form and the "Email" field is invalid, the page shouldn't just show a red label. It should move the user's focus back to that field.
The Implementation: Using
useFocus, you can programmatically snap the user back to the error, allowing screen readers to immediately announce the problematic field.
5. Advanced Interview Question: "What about Ref Forwarding?"
A common follow-up question is: "How do you use this hook if the input is a custom component, not a plain <input />?"
You must mention React.forwardRef. This allows your custom component to receive the ref from the hook and "forward" it down to the underlying HTML element.
JavaScript