useRef Hook in react

#beginners #react #learning #coding

useRef :

The useRef Hook allows you to persist values between renders.

It can be used to store a mutable value that does not cause a re-render when updated.

It can be used to access a DOM element directly.

Syntax :

import { useRef } from 'react';

const myRef = useRef(initialValue);

Important Points :

When you call useRef, it returns a plain JavaScript object with a single property called current.

The most important useRef is that changing its value does not trigger a component re-render.

Example Code :

import React from 'react'

import { useState, useRef } from "react";

function UserRef() {

    let normalVar = 5;

    const myRef = useRef(5);

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

    return (
        <div>
            <p>Normal Variable: {normalVar}</p>
            <p>Ref Variable: {myRef.current}</p>
            <p>State Variable: {count}</p>

            {/* Increments value in memory, but UI does not change */}
            <button onClick={() => normalVar++}>
                Increment Normal
            </button>

            {/* Increments ref.current, but UI does not change */}
            <button onClick={() => myRef.current = myRef.current + 1}>
                Increment Ref
            </button>

            {/* Increments state and forces the component to re-render, displaying new values */}
            <button onClick={() => setCount(count + 1)}>
                Increment State
            </button>
        </div>
    );
}
export default UserRef;