useRef can store any mutable data that you want to persist between renders. It helps you to avoid re-rendering of the component when you don't want to.

useRef vs useState

useRef is similar to useState but there are some differences,

• both useState and useRef can maintain the value between renders.
• useState is used to store the state of a component whereasuseRef is used to store any mutable value.
• useState will cause the component to re-render when the state is updated whereas useRef will not cause the component to re-render when the value is updated.

const [text, setText] = useState('')
const handleTextChange = (e) => {
  setText(e.target.value)
}

// re-renders the component on every text change
return (
  <div>
    <input type="text" value={text} onChange={handleTextChange} />
  </div>
)

Using useRef to store the value of the input element will not cause the component to re-render when the value is updated.

const textRef = useRef('')
const handleTextChange = (e) => {
  textRef.current = e.target.value
}

// no re-renders when the text changes
return (
  <div>
    <input type="text" value={textRef.current} onChange={handleTextChange} />
  </div>
)

useRef is mostly used for,

• storing the previous value of a state or props of a component across rendering of a component
• accessing DOM nodes in React

useRef to store the previous value of a state or props of a component

import React, { useState, useRef } from 'react'

const Slide = ({ selectedSlideIndex }) => {
  const [slide, setSlide] = useState(selectedSlideIndex)
  const prevSlideRef = useRef()

  // update the previous slide value when the slide value changes
  useEffect(() => {
    prevSlideRef.current = slide
  }, [slide])

  const prevSlide = prevSlideRef.current

  return (
    <div>
      <p>Current slide: {slide}</p>
      <p>Previous slide: {prevSlide}</p>
      <button onClick={() => setSlide(slide + 1)}>Next</button>
    </div>
  )
}

In the above example, useRef helps to maintain the previous value of the slide state variable.

Some of the use cases are,

• undo/redo functionality
• maintaining the previous value of a state variable to compare with the current value and perform some action
  • saving a draft if value of a textarea is changed
  • showing a confirmation dialog if the value of a textarea is changed and the user tries to navigate away from the page

useRef to access DOM nodes

import React, { useRef, useEffect } from 'react'

const Input = () => {
  const inputRef = useRef(null)

  // focus the input element when the component is mounted
  useEffect(() => {
    inputRef.current.focus()
  }, [])

  return (
    <div>
      <input ref={inputRef} type="text" />
    </div>
  )
}

In the above example, useRef helps to access the input element and focus it when the component is mounted.

Some of the use cases are,

• focusing or blurring an element
• accessing the DOM node to get the size of an element
• accessing the DOM node to get the scroll position of an element

Hope this helps to learn the magic of useRef hook. Happy referencing 😃