useRef

What is useRef?

The useRef hook in React is used to access and interact with DOM elements directly or to keep a mutable value that does not cause re-renders when changed. It provides a way to persist values across renders without triggering a component update.

How useRef Works

useRef returns a mutable object called a "ref object" with a .current property. This property can hold a value that persists across re-renders.

Basic Syntax

const myRef = useRef(initialValue);

• 
  initialValue: The initial value for the ref object. This is optional.

Example 1: Accessing DOM Elements

In this example, we'll use useRef to access a DOM element directly.

1. 
   Create the Component
   

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



   const FocusInput = () => {

     // Create a ref with useRef

     const inputRef = useRef(null);



     useEffect(() => {

       // Focus the input field when the component mounts

       inputRef.current.focus();

     }, []);



     return (

       <div>

         <input ref={inputRef} type="text" placeholder="Focus me on mount" />

       </div>

     );

   };



   export default FocusInput;

Explanation:

• 
  useRef(null) creates a ref object.


• 
  inputRef.current gives access to the input element.


• 
  useEffect is used to focus the input field when the component mounts.

Example 2: Keeping Mutable Values

In this example, we'll use useRef to keep a mutable value that does not cause re-renders when updated.

1. 
   Create the Component
   

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



   const Timer = () => {

     const [count, setCount] = useState(0);

     const timerRef = useRef(null);



     const startTimer = () => {

       if (timerRef.current) {

         clearInterval(timerRef.current);

       }

       timerRef.current = setInterval(() => {

         setCount(prevCount => prevCount + 1);

       }, 1000);

     };



     const stopTimer = () => {

       if (timerRef.current) {

         clearInterval(timerRef.current);

       }

     };



     return (

       <div>

         <h1>Time: {count}s</h1>

         <button onClick={startTimer}>Start Timer</button>

         <button onClick={stopTimer}>Stop Timer</button>

       </div>

     );

   };



   export default Timer;

Explanation:

• 
  timerRef.current is used to store the timer ID.


• 
  startTimer and stopTimer functions use timerRef.current to manage the timer.


• Updating timerRef.current does not cause a re-render of the component.

Summary

• 
  useRef creates a mutable ref object with a .current property.


• Use useRef to access DOM elements directly.


• Use useRef to keep mutable values that do not cause re-renders.

That’s it! useRef is a powerful and versatile hook that’s useful in many scenarios.