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

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.

Nate Sodja