ReactJS | useRef Hook with Example

Hello ReactJS friends,

I have already explained about useEffect, useState, and useContext Hook in ReactJS. Today we will learn about useRef Hook in detail.

React UseRef Hook

useRef hook can be used to directly access the DOM element. It allows you to persist values between renders. It can be used to store a mutable value across renders and does not cause a re-render when updated.

When trying to count how many times our application renders using the useState Hook, we would be caught in an infinite loop since this Hook itself causes a re-render. Here comes the use of the useRef hook in ReactJS.

Syntax of useRef Hook in ReactJS:

const refContainer = useRef(initialValue);

Example of useRef Hook in ReactJS:

import React, { Component, createRef } from "react";

Const CustomTextInput = () => {
      textInput = createRef();
      focusTextInput = () => this.textInput.current.focus();
      return (
             <>
                 <input type="text" ref={this.textInput} />
                 <button onClick={this.focusTextInput}>Focus
                 the text input</button>
             </>
      );
}

Conclusion:

This way, you can use useRef Hook in ReactJS. If you have any queries, share them with me through the comments and I will promptly reply to you. Share the tutorial with your friends and stay in touch with us to learn more about ReactJS.