Last updated: Apr 7, 2024
Reading timeยท5 min
ref
in Reactdocument.getElementById
ref
in ReactTo get an element by ID using a ref:
ref
prop on the element.current
property to access the element in the useEffect
hook.import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(null); useEffect(() => { const element = ref.current; console.log(element); console.log(element.id); }, []); return ( <div> <h2 ref={ref} id="box"> bobbyhadz.com </h2> </div> ); }
The equivalent of getting an element by ID in React is to use a ref
.
The useRef() hook can be passed an initial value as an argument.
const ref = useRef(null);
The hook returns a mutable ref object whose .current
property is initialized
to the passed argument.
We set the ref
prop on the element we need to access.
<h2 ref={ref} id="box"> bobbyhadz.com </h2>
current
property on the ref object to get access to the h2
element on which we set the ref
prop.useEffect(() => { const element = ref.current; console.log(element); console.log(element.id); }, []);
When we pass a ref prop to an element, e.g. <div ref={myRef} />
, React sets
the .current
property of the ref object to the corresponding DOM node.
We passed an empty dependencies array to the useEffect hook, so it's only going to run when the component mounts.
useEffect(() => { const element = ref.current; console.log(element); console.log(element.id); }, []);
We used the useEffect
hook because we want to make sure the ref
has been set
on the element and the element has been rendered to the DOM.
The useRef
hook is the React.js equivalent of the document.getElementById
method in JavaScript.
However, you are still able to use the method in React.js as well.
If you don't have access to the element you are trying to select in your
component and can't simply set the ref
prop on it, use the
document.getElementById()
method.
I've also written a tutorial on how to get the ID of an element on click.
document.getElementById
This is a two-step process:
useEffect
hook to invoke a function once the component mounts.document.getElementById()
method in the useEffect
hook.import {useEffect} from 'react'; export default function App() { useEffect(() => { const element = document.getElementById('box'); console.log(element); console.log(element.id); }, []); return ( <div> <h2 id="box">bobbyhadz.com</h2> </div> ); }
The document.getElementById() method takes an ID as a parameter and returns the element with the given ID.
You have to call the document.getElementById()
method in the useEffect
hook
or when an event occurs.
A commonly used convention in React is to only use the document.getElementById
method when you don't have access to the DOM element and can't set a ref
on
it.
Here is an example that gets an element by ID when an event occurs.
import {useRef} from 'react'; export default function App() { const ref = useRef(null); const handleClick = () => { // ๐๏ธ use document.getElementById() const element = document.getElementById('box'); console.log(element); // ๐๏ธ (better) use a ref const element2 = ref.current; console.log(element2); }; return ( <div> <h2 ref={ref} id="box"> bobbyhadz.com </h2> <button onClick={handleClick}>Click</button> </div> ); }
Selecting an element by ID or using a ref
is also possible in an event handler
function.
ref
directly in the render
method of your function component, the element you are trying to access might not have been rendered yet.The useEffect
hook runs after the DOM elements in the component have been
rendered to the DOM, so if an element with the provided id
exists, it will be
selected.
You can also use the document.querySelector method in React.
The document.getElementById()
method returns null
in React when we call
the method before the element with the provided ID has been rendered to the DOM
or if an element with the ID doesn't exist.
To get around this, call the getElementById()
method in the useEffect
hook.
import {useEffect} from 'react'; export default function App() { useEffect(() => { // ๐๏ธ call method in useEffect hook const el = document.getElementById('container'); console.log(el); }, []); return ( <div> <div id="container"> <h2>bobbyhadz.com</h2> </div> </div> ); }
The 2 most common reasons for the
document.getElementById()
method to return null
in React are:
document.getElementById
in the useEffect
hookYou can use the document.getElementById
method in the
useEffect hook because the hook
runs after the component has been mounted.
useEffect(() => { // ๐๏ธ call method in useEffect hook const el = document.getElementById('container'); console.log(el); }, []);
We passed an empty dependencies array to the useEffect
hook, so it's only
going to run on the initial render.
useEffect
hook because we need to wait for the div
element to get rendered before calling document.getElementById()
.You can also call the document.getElementById()
method in an event handler
function, e.g. in an onClick
handler because the element will be present in
the DOM when the event is triggered.
ref
instead of document.getElementById()
Note that if you have access to the DOM element in your component, you can use a
ref
.
import {useRef, useEffect} from 'react'; export default function App() { const ref = useRef(null); useEffect(() => { const el = ref.current; console.log(el); }, []); return ( <div> <div ref={ref}> <h2>bobbyhadz.com</h2> </div> </div> ); }
The useRef() hook can be passed an
initial value as an argument. The hook returns a mutable ref object whose
.current
property is initialized to the passed argument.
current
property on the ref object to get access to the div
element on which we set the ref
prop.useEffect(() => { const el = ref.current; console.log(el); }, []);
When we pass a ref prop to an element, e.g. <div ref={myRef} />
, React sets
the .current
property of the ref object to the corresponding DOM node.
We used the useEffect
hook because we want to make sure the ref
has been set
on the element and the element has been rendered to the DOM.
Using refs should be your preferred approach when you have access to the element
in your component, otherwise, you can use the document.getElementById
method.