Managing Focus With Refs and useEffect
Drive focus in a component-based world.
Managing Focus With Refs and useEffect is a free Web Accessibility Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Focus Needs Managing
When UI appears, disappears, or updates, the keyboard focus can land in the wrong place or vanish. In React you steer it deliberately with refs and effects.
A ref Points to a DOM Node
useRef gives you a stable handle to a real element. After render, ref.current is the actual DOM node you can call .focus() on.
const inputRef = useRef(null);
<input ref={inputRef} />useEffect Runs After Render
Focus must happen once the element exists in the DOM. useEffect runs after the browser paints, so it is the safe place to move focus.
useEffect(() => {
inputRef.current.focus();
}, []);Focus on Mount
An empty dependency array means the effect runs once when the component mounts. Use this to put focus on the first field of a form or step.
Focus When Something Opens
Add a dependency like isOpen so the effect re-runs when state flips. When a panel opens, you can move focus straight into it.
useEffect(() => {
if (isOpen) panelRef.current.focus();
}, [isOpen]);Guard Against Null
A ref can be null if the node is not rendered yet. Check ref.current exists before calling .focus() to avoid a crash on a missing element.
ref.current?.focus();Make Non-Inputs Focusable
Headings and divs are not focusable by default. Add tabindex of -1 so script can focus them without adding them to the natural tab order.
<div tabindex="-1" ref={regionRef}>...</div>Restore Focus on Cleanup
An effect can return a cleanup function. Use it to send focus back to the trigger when a layer unmounts, so users are not dropped at the page top.
useEffect(() => {
const prev = document.activeElement;
return () => prev.focus();
}, []);Beware Stale Closures
An effect captures values from its render. If you focus based on data, list it in the dependency array so the effect uses fresh values, not stale ones.
forwardRef for Child Elements
To focus an element inside a child component, wrap it in forwardRef. The parent then holds a ref to the inner node and can focus it.
const Field = forwardRef((props, ref) =>
<input ref={ref} {...props} />);Do Not Over-Focus
Move focus only when it truly helps the user, like opening a dialog or showing an error. Grabbing focus on every render frustrates everyone.
Quick Check
You want to move keyboard focus to an element right after React renders it. Where does that belong?
Recap: Refs Plus Effects
Pair a useRef with a useEffect to move focus after render. Guard against null, restore focus on cleanup, and only steer focus when it helps. 🎯
Frequently asked questions
Is the “Managing Focus With Refs and useEffect” lesson free?
Yes — the full text of “Managing Focus With Refs and useEffect” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “Managing Focus With Refs and useEffect”?
Drive focus in a component-based world. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Managing Focus With Refs and useEffect” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Route Changes Without Page Reloads
- Managing Focus With Refs and useEffect
- Fragments, Portals, and the DOM Order Trap
- jsx-a11y and Component-Level Guardrails