Mastering the useFocus Hook: From React Fundamentals to Production-Grade Architecture

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:

1. Trigger Side Effects: Like fetching data when a user enters a field.

2. Coordinate UI: For example, showing a complex dropdown menu only when an input is active.

3. 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 useFocus hook provides the setFocus method. When the global keydown event for "Cmd+K" is detected, the app calls setFocus().

• Production Detail: Use the isFocused boolean to trigger an "active" class on the parent container, creating a "Glow" effect that CSS :focus can'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 isFocused state 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