useRef

In React, useRef is a powerful hook that allows you to reference and persist values without causing re-renders. It’s often used to access DOM elements directly or store mutable values across renders.

Why useRef is Useful

Unlike useState, changing a useRef value does not cause the component to re-render. This makes it perfect for tasks like:

• Accessing DOM elements (like focusing an input field)
• Keeping track of previous values
• Storing timers, counters, or mutable data that shouldn’t trigger UI updates

Syntax of useRef

import { useRef } from 'react';

const myRef = useRef(initialValue);

• initialValue: This is the value that myRef.current will start with.
• myRef.current: The actual object you interact with. It can hold any value (DOM node, number, object, etc.)

1. Accessing DOM Elements with useRef

Let’s say you want to focus an input field when a button is clicked:

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Type something..." />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

Here, inputRef.current directly gives access to the DOM input element.

2. Storing Mutable Values

You can use useRef to store values that don’t need to cause re-rendering.

import React, { useRef } from 'react';

function TimerExample() {
  const count = useRef(0);

  const handleClick = () => {
    count.current += 1;
    console.log('Clicked:', count.current);
  };

  return <button onClick={handleClick}>Click Me</button>;
}

Even though count.current updates, the component does not re-render.

3. Keeping Track of Previous Props or State

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

function PreviousValue() {
  const [number, setNumber] = useState(0);
  const prevNumber = useRef();

  useEffect(() => {
    prevNumber.current = number;
  }, [number]);

  return (
    <div>
      <p>Current: {number}</p>
      <p>Previous: {prevNumber.current}</p>
      <button onClick={() => setNumber(number + 1)}>Increment</button>
    </div>
  );
}

This is how you can track a value across renders without triggering updates.

Key Points to Remember

useRef returns a mutable object with a .current property
Updating .current does not cause re-renders
Ideal for DOM access, storing mutable values, and tracking previous data
Not meant for triggering UI updates – for that, use useState

useRef vs useState

Real-World useRef Use Cases

• Focus or blur an input field
• Scroll to a certain element
• Pause/Resume a video
• Store setTimeout or setInterval IDs
• Track component mount/unmount status

Conclusion

useRef is a simple yet powerful hook that can improve performance and control in your React applications. It’s perfect for situations where you need to store values or access elements without re-rendering the component. Start using useRef to write more efficient and cleaner React code!