useRef Hook And Callback Ref In React JS

React useRef Hook

• In React JS, It can be used to access a DOM element directly.
• In React JS, we can use useRef Hook in function component for the REF purpose which we did in the class component.
• In React JS, we can add a ref attribute to an element to access it directly in the DOM.

useRef Hook In React JS

• In React JS, the useRef Hook is a function that returns a mutable ref object whose .current property is initialized with the passed argument (initialValue).
• The returned object will persist for the full lifetime of the component.

Source Code Of useRef Hook In React

HookuseRef.js File Code

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

function HookuseRef() {
    // const newRef = useRef();
    const firstRef = useRef();
    const lastRef = useRef();

    useEffect(() => {
        console.log(firstRef);
        console.log(lastRef);
        firstRef.current.focus();
        firstRef.current.style.color = 'red';
        firstRef.current.style.backgroundColor = 'yellow';
        // console.log(newRef.current.innerHTML);
    });

    //    const handleHeading = () => {
    //     newRef.current.style.color = 'red'; 
    //     newRef.current.style.fontFamily = 'cooper'; 
    //     newRef.current.hidden = true;
    //    }

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Full Name = ', firstRef.current.value, lastRef.current.value);

    }

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <label htmlFor="">Enter First Name: </label>
                <input type="text" ref={firstRef} placeholder='First Name' />
                <br /><br />
                <label htmlFor="">Enter Last Name: </label>
                <input type="text" ref={lastRef} placeholder='Last Name' />
                <br /><br />
                <input type="submit" value="Submit" />
            </form>
            {/* <h1 ref={newRef}>Learning Never Ends</h1>
      <button onClick={handleHeading}>Click</button> */}
        </div>
    )
}

export default HookuseRef

Source Code – HookuseRef2.js Component – useRef Mutable

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

function HookUseRef2() {
    const [inputValue, setInputValue] = useState("");
    // const [count, setCount] = useState(0);
    const count = useRef(0);
    useEffect(() => {
        count.current = count.current + 1;
        // console.log(count.current);
    });
    // useEffect(() => {
    //     setCount(count + 1)
    // }, []);

  return (
    <div>
      <label htmlFor="">Enter Name: </label>
      <input 
      type="text" 
      placeholder='Enter Name'
      value={inputValue}
      onChange={ (e) => setInputValue(e.target.value) } />
      <h2>Render Count: {count.current}</h2>
      <h3>Data: {inputValue}</h3>
    </div>
  )
}

export default HookUseRef2

Callback Refs In React JS

Callback Refs In React

What are callback refs in React?

In React JS, the function receives the React component instance or HTML DOM element as its argument, which can be stored and accessed elsewhere.

useRef Can Be Used by 2 ways

1. It can be used to access a DOM element directly.
2. It can be used to store a mutable value that does not cause a re-render when updated.
   1. The useRef Hook allows you to persist values between renders.
   2. The useRef Hook is a function that returns a mutable ref object whose .current property is initialized with the passed argument (initialValue).
   3. The returned object will persist for the full lifetime of the component.

Does Not Cause Re-renders

• If we tried 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.
• To avoid this, we can use the useRef Hook.

useRef Hook

• useRef() only returns one item. It returns an Object called current.
• When we initialize useRef we set the initial value: useRef(0).
• It’s like doing this: const count = {current: 0}. We can access the count by using count.current.

Source Code Of Callback Ref In React JS

import React, { Component } from 'react'

export default class form extends Component {
    constructor(props) {
        super(props)
        this.myRef = null;
        this.setMyRef = (element) => {
            this.myRef = element;
        }
    }

    componentDidMount() {
        console.log(this.myRef);
        this.myRef.focus();
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.myRef.style.color = 'Red';
        this.myRef.style.backgroundColor = 'yellow';
        console.log('Name = ', this.myRef.value);
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="">Enter Name: </label>
                    <input type="text" ref={this.setMyRef} placeholder='Enter Your Name' />
                    <br /><br />
                    <input type="submit" value="Submit" />
                </form>
            </div>
        )
    }
}

Download Notes Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/sz5yby7e4biteil/useRef+&+Callback+Ref+React+JS.rar/file

https://www.mediafire.com/file/rjgt38bzc9bz3yk/53+-+useRef+Mutable.pptx/file

Download Source Code Of This Blog, From The Link Given Below.

https://www.mediafire.com/file/oye42tr3i5z51qz/new-app.rar/file