What's happening in this code snippet above is that we've got a text input and right below that a button. We know that the text input will get focused when clicked but that is not the concern here. The challenge is to focus the text input when the button (another element) is clicked. How?
There are just 3 easy steps you need to follow. First, call useRef and get the value, in this case "theInput". Then we need to connect that value to any element, in this case the input element by writing (ref={theInput}). At this point, "theInput" and element in connected, or in other words, "theInput" now refers the input element. Finally, we can change the state of the input element to be focused, because we've got a reference to it using theInput.current.focus().
Thank you very much for the clarification! So in other words useRef is like querrySelector function in the pure JS way. Please correct me if I am wrong.
yes, the difference is querySelector is imperative, useRef declarative, also querySelector does a search for the string you pass to it, so you have to know that is unique and won't change.
useRef on the other hand, ties itself to that jsx element and nothing else.
I'm sorry but that's bollocks. useRef has nothing to do with the DOM. It's stated clearly on the offical docs:
useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
Please don't spread false information.
useRef is useful whenever you want to reference the same value on every render, but not trigger a re-render when its value changes.
@mrtnbroder apparently you're right, my bad. I just need to remove the "DOM" part in that comment, will edit it now. That's how I always understood the useRef hook. Thanks dude.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Short answer: useRef refers to an object and the .current property allows you to access its instance. It is what you do with useRef that matters.
The core usage of useRef hook is to store reference of element.
What's happening in this code snippet above is that we've got a text input and right below that a button. We know that the text input will get focused when clicked but that is not the concern here. The challenge is to focus the text input when the button (another element) is clicked. How?
There are just 3 easy steps you need to follow. First, call useRef and get the value, in this case "theInput". Then we need to connect that value to any element, in this case the input element by writing (ref={theInput}). At this point, "theInput" and element in connected, or in other words, "theInput" now refers the input element. Finally, we can change the state of the input element to be focused, because we've got a reference to it using theInput.current.focus().
Thank you very much for the clarification! So in other words useRef is like querrySelector function in the pure JS way. Please correct me if I am wrong.
You're right. Not to worry, usually you don't need it.
yes, the difference is querySelector is imperative, useRef declarative, also querySelector does a search for the string you pass to it, so you have to know that is unique and won't change.
useRef on the other hand, ties itself to that jsx element and nothing else.
Cool!
I'm sorry but that's bollocks.
useRef
has nothing to do with the DOM. It's stated clearly on the offical docs:Please don't spread false information.
useRef
is useful whenever you want to reference the same value on every render, but not trigger a re-render when its value changes.That's it. Thank you 👍
@mrtnbroder apparently you're right, my bad. I just need to remove the "DOM" part in that comment, will edit it now. That's how I always understood the useRef hook. Thanks dude.