Question Bank
React Auto-Focus With Refs: Two Approaches Quiz
Difficulty: Medium
Two approaches to auto-focusing an input in React (`useRef` + `useEffect` vs the native `autoFocus` prop), plus companions on focusing after async state and on focusing inside a portal.
React Auto-Focus With Refs: Two Approaches Quiz
Two approaches to auto-focusing an input in React (`useRef` + `useEffect` vs the native `autoFocus` prop), plus companions on focusing after async state and on focusing inside a portal.
1,029 views
28
Auto-focus a text input on mount using useRef and useEffect. Implement the focus call so the input receives focus exactly once, immediately after the first render.
Examples
Example 1:
Input: mount the component
Output (Rendered DOM + Effect): the text input gains focus right after the first paint; subsequent re-renders do not steal focus.
Explanation: useEffect with [] runs once after mount; calling .focus() on the ref's current node moves focus there.Auto-focus a text input on mount using the native autoFocus prop alone (no refs, no effects). Explain when this fallback is sufficient and when it is not.
Examples
Example 1:
Input: mount the component with <input autoFocus />
Output: the browser focuses the input automatically during initial page load (same semantics as the HTML autofocus attribute).
Explanation: React forwards autoFocus to the DOM, which applies the browser's built-in autofocus behavior on the very first render.Focus an input after asynchronous data arrives: fetch a user record, then focus the name input once the record is loaded. Use a ref + effect that depends on the loaded data.
Examples
Example 1:
Input: a user-edit form that mounts in a "loading..." state and then fetches /api/users/42
Output (Effect): the name input gains focus only after the fetch resolves and the form is rendered with the loaded values.
Explanation: gate the focus effect on the loaded user; while user is null, the input is not rendered, so .focus() would crash.Focus the first input of a dialog rendered through a portal as soon as the dialog opens. Use a callback ref so the focus call runs exactly when the node is attached, and explain why a plain useRef + useEffect can race here.
Examples
Example 1:
Input: open a portal-based dialog; the dialog contains an <input> as its first focusable child.
Output (Effect): the input receives focus as soon as it is inserted into the DOM, before any user-visible flicker.
Explanation: a callback ref runs synchronously the moment the node is attached, so focus moves on the same commit; a plain ref + useEffect can lag a frame and is harder to coordinate with the dialog's open state.