We all know the "explain it like I am 5" test which seeks to determine that the taker of the challenge can truly express the topic to its very basics such that a five-year-old can make sense of it. This helps to ascertain whether or not that a line of thought is truly understood. That's what I seek to do in this series, by breaking down react hooks that I use quite often, this will help me in the process to truly understand what these hooks are about and most importantly use-cases to use them, further improving my React knowledge and perhaps yours too as you read.
The useRef hook:
The useRef hook in the simplest of terms is a lot like the
DOM method (assuming said 5-year-old already knows the document model and its related methods), whereas if the DOM is a tree, useRef allows you to choose a branch of your choice or a leaf and do whatever you want with it, eg. take its value and add some text to it, measure the height etc.
Using
```querySelector()```
vs
```useRef()```
same scenario
With querySelector in Vanilla JS
// HTML
// JS
const textValue = document.querySelector('.someValue').value
console.log(textValue) // returns value "abc"
With useRef in React
const UseRefBasics = () => {
const refContainer = useRef(null)
const handleSubmit = (e) => {
e.preventDefault()
console.log(refContainer.current.value) // value "abc" will be returned
}
return (
<>
submit
</>
)
};
# What about useState ?
The useState hook in my opinion is like declaring a variable in react, although you can still declare variables in react, said variables cannot trigger a state change, which is what react is all about. Therefore, by declaring useState, you are telling react to hold a value and watch it for changes, also the useState hook returns the value you initialized when you called useState and a function to change that value.
// React.useState Hook Example
const someComponent = () => {
// 0 is the initial value in the count, a value that
// will cause a rerender when updated by calling
// setState, in this case: setCount.
const [count, setCount] = React.useState(0);
return
Some content rendered.;};
Refer to the useRef example earlier to compare
## The difference:
useRef does not trigger a rerender of the react elements, however, it can hold literally any value, even a DOM element or its parent, using useRef together with useEffect can result in a rerender but upon further research, callback ref is more appropriate to the task, here's a source for reference: [using useRef inside useEffect](https://medium.com/@teh_builder/ref-objects-inside-useeffect-hooks-eb7c15198780)
# What can you do with useRef ?
Since useRef() is the equivalent of the DOM querySelector (IMO), you can use it to get a parent div element, measure its height or width, or any properties available.
You can also use it to grab a textInput element, and autofocus on it as soon onLoad (with useEffect()).
# Understood? perhaps a bit... or more?
Anyways I heavily doubt there's a five-year-old prodigy that is writing React, who knows, there might be, I don't know how well this explanation has worked out for you, but in the course of this write up I have had to refer to the DOCS and googled several articles to make this easy on myself. In effect, I have better understood a hook I barely use and might use more often. For further understanding, please visit the docs, which might be jargon-heavy, but more accurate in terminology and detail.
Top comments (1)
Many early birds have already started using this custom hooks library
in their ReactJs/NextJs project.
Have you started using it?
scriptkavi/hooks
PS: Don't be a late bloomer :P