useRef helps you to avoid re-rendering of the component
Tags: react, beginners, webdev, tutorial
Published: 2023-11-05 20:14:50

`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 whereas`useRef` 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.

```js
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.

```js
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

```jsx
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

```jsx
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 😃