React Hooks like am 5-ish... (useRef with a pinch of useState)
Published: 2022-02-06 14:28:03

---
title: React Hooks like am 5-ish... (useRef with a pinch of useState)
published: true
description: useState and useRef, the difference and purposes.
tags: 
//cover_image: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svuexxciuprtgc42am0k.png)
 
---
 

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 ```document.querySelector()``` 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
<form action="">
  <input type="text" class="someValue" value="abc">
</form>

// 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 (
    <>
      <form className='form' onSubmit={handleSubmit}>
        <div>
          <input type='text' ref={refContainer} value="abc"/>
          <button type='submit'>submit</button>
        </div>
      </form>
    </>
  )
};
```
 
# 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 <div>Some content rendered.</div>;
};


```

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.