React Hooks like am 5-ish... (useRef with a pinch of useState)

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.