Accessing DOM Nodes, Measuring & Focusing
Use refs to access DOM nodes, focus inputs after render, and measure element size in a simple, beginner-friendly way.
Accessing DOM Nodes, Measuring & Focusing is a free React Academy lesson on CoddyKit — lesson 2 of 3. 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 React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why access the DOM?
Goal: Use useRef to reach DOM nodes safely after render.
- Attach ref to a JSX element
- Read ref.current inside effects
- Focus or measure elements
Post-render actions
DOM is available after render. Use useEffect for actions like focus() or measuring size. Keep render pure.
Demo: auto-focus input
Attach a ref to the input and call focus() inside useEffect([]) so it runs after the first paint.
<div id="root"></div>
Measure after render
To measure an element, read getBoundingClientRect() from ref.current in an effect. Update on resize to keep values fresh.
Demo: measure width
We store a box ref and read its width on mount and when the window resizes. Cleanup removes the listener.
<div id="root"></div>
Tips & pitfalls
Tips:
- Attach refs to real DOM nodes (e.g., input, div).
- Read/act in useEffect (after paint).
- Always cleanup listeners you add.
Focus after render check
Recap
Recap: Attach a ref to a DOM node, then use it after render to call focus() or read sizes via getBoundingClientRect(). Clean up any listeners you add.
Frequently asked questions
Is the “Accessing DOM Nodes, Measuring & Focusing” lesson free?
Yes — the full text of “Accessing DOM Nodes, Measuring & Focusing” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Accessing DOM Nodes, Measuring & Focusing”?
Use refs to access DOM nodes, focus inputs after render, and measure element size in a simple, beginner-friendly way. You practise React 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 React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Accessing DOM Nodes, Measuring & Focusing” 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 React Academy lesson?
Yes. Every React 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
- Persisting Values Without Re-render
- Accessing DOM Nodes, Measuring & Focusing
- Mutable Refs for Timers & IDs