React useRef

What is the useRef hook in React?

The useRef hook is a React hook that provides a way to persist values across renders without causing a re-render when the value changes. It is often used to directly access and interact with DOM elements, store mutable values, or keep track of variables that do not affect the component's rendering.

How does the useRef hook work?

useRef returns a mutable ref object with a .current property that you can assign to a DOM element or any mutable value. Unlike state, changes to the .current property do not trigger a re-render of the component.

Example of using useRef to access a DOM element:

import React, { useRef } from 'react';

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

    const focusInput = () => {
        inputRef.current.focus(); // Access the DOM input element directly
    };

    return (
        <div>
            <input ref={inputRef} type="text" />
            <button onClick={focusInput}>Focus the input</button>
        </div>
    );
}

In this example, useRef is used to store a reference to an input field, and the focusInput function uses that reference to programmatically focus the input.

What are some common use cases for useRef?

useRef is commonly used for the following purposes:

• Accessing DOM elements: You can use useRef to store references to DOM elements and manipulate them directly without triggering a re-render.
• Storing mutable values: You can store values (such as timers, intervals, or counters) that need to persist across renders but do not affect the component's rendering.
• Keeping track of previous values: You can use useRef to store the previous value of a prop or state for comparison in future renders.

How does useRef differ from useState?

useRef and useState both allow you to persist values across renders, but they differ in how they affect rendering:

• useRef: Stores a mutable value that persists across renders without causing the component to re-render when the value changes.
• useState: Stores a value that triggers a re-render of the component when the state is updated.

Use useRef when you need to persist a value that doesn't require a re-render (e.g., DOM manipulation), and use useState when the value should trigger a re-render when it changes.

How can you use useRef to access a DOM element?

You can use useRef to create a reference to a DOM element and then access or manipulate that element directly using the .current property of the ref object. To do this, assign the ref to the ref attribute of the element.

Example of accessing a DOM element:

function ScrollBox() {
    const boxRef = useRef(null);

    const scrollToBottom = () => {
        boxRef.current.scrollTop = boxRef.current.scrollHeight; // Scroll to the bottom of the box
    };

    return (
        <div>
            <div ref={boxRef} style={{ height: '100px', overflowY: 'scroll' }}>
                <p>Content...</p>
                <p>More content...</p>
                <p>Even more content...</p>
            </div>
            <button onClick={scrollToBottom}>Scroll to Bottom</button>
        </div>
    );
}

In this example, useRef is used to store a reference to a scrollable div, and the scrollToBottom function scrolls the div to its bottom when the button is clicked.

Can useRef be used to store mutable values?

Yes, useRef can be used to store mutable values that need to persist across renders but do not need to trigger a re-render. Since useRef doesn't cause re-renders, it is an ideal solution for storing values such as timers, intervals, or any other value that should not affect rendering.

Example of using useRef to store a timer:

function Timer() {
    const timerRef = useRef(null);
    const [seconds, setSeconds] = useState(0);

    const startTimer = () => {
        timerRef.current = setInterval(() => {
            setSeconds((prev) => prev + 1);
        }, 1000);
    };

    const stopTimer = () => {
        clearInterval(timerRef.current); // Use the timer reference to stop the timer
    };

    return (
        <div>
            <p>Elapsed time: {seconds} seconds</p>
            <button onClick={startTimer}>Start</button>
            <button onClick={stopTimer}>Stop</button>
        </div>
    );
}

In this example, useRef is used to store a reference to the timer, and the timer can be started and stopped without causing the component to re-render.

How can useRef be used to keep track of previous values?

useRef can be used to store the previous value of a state or prop across renders. By assigning the current value to ref.current after rendering, you can store and compare the previous and current values without causing a re-render.

Example of tracking the previous state with useRef:

function PreviousValue() {
    const [count, setCount] = useState(0);
    const prevCountRef = useRef();

    useEffect(() => {
        prevCountRef.current = count; // Store the current count in the ref
    }, [count]); // Update the ref whenever count changes

    const prevCount = prevCountRef.current;

    return (
        <div>
            <p>Current count: {count}</p>
            <p>Previous count: {prevCount}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

In this example, useRef is used to store the previous value of count and display it alongside the current value.

Does updating a useRef value cause a re-render?

No, updating the .current property of a useRef object does not cause a re-render. This is one of the key differences between useRef and useState. You can freely update the .current property without affecting the rendering of the component.

How can useRef be used with useEffect?

useRef is often used together with useEffect to access DOM elements after the component has rendered or to persist values across renders without causing a re-render. For example, you can use useRef inside useEffect to handle component lifecycle events or DOM manipulation.

Example of using useRef with useEffect:

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

    useEffect(() => {
        inputRef.current.focus(); // Focus the input field after the component renders
    }, []);

    return <input ref={inputRef} type="text" />;
}

In this example, useRef is used with useEffect to automatically focus the input field when the component mounts.