In this post we'll cover useRef Hook. You will get a clear idea on how to fetch data from input form before and after introducing useRef Hook.

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

Syntax

const variable = useRef(initialValue)

One can access value of the variable by accessing variable.current.value. Lets see an example how useRef make our life simple by a simple program.

Before Introducing useRef()

For a simple form we need to track event.target to get updated value on every event as shown in below code for this we use useState Hook & onChange Event handler which is a pre defined in Js.

import React, { useState } from 'react';

const AddUser = (props) => {
  const [enteredUsername, setEnteredUsername] = useState('');
  const [enteredAge, setEnteredAge] = useState('');

  const addUserHandler = (event) => {
    event.preventDefault();
    setEnteredUsername('');
    setEnteredAge('');
  };

  const usernameChangeHandler = (event) => {
    setEnteredUsername(event.target.value);
  };

  const ageChangeHandler = (event) => {
    setEnteredAge(event.target.value);
  };

  return (
    <div>
      <Card className={classes.input}>
        <form onSubmit={addUserHandler}>
          <label htmlFor="username">Username</label>
          <input
            id="username"
            type="text"
            value={enteredUsername}
            onChange={usernameChangeHandler}
          />
          <label htmlFor="age">Age (Years)</label>
          <input
            id="age"
            type="number"
            value={enteredAge}
            onChange={ageChangeHandler}
          />
          <Button type="submit">Add User</Button>
        </form>
      </Card>
    </div>
  );
};

export default AddUser;

useRef() Hook

When we use useRef Hook we don't need to collect updated data from event.target every time when user entered data in fields all these will be taken care react DOM.

import { useRef} from "react";

const InputForm = () =>{  
    const nameRef = useRef();
    const ageRef = useRef();

    const onSubmitHandler = (event) =>{
        event.preventDefault();
        const enteredName = nameRef.current.value;
        const enteredAge = ageRef.current.value;
        nameRef.current.value=' ';
        ageRef.current.value='';

    } 
    return (
    <form onSubmit={onSubmitHandler}>
        <div> 
            <label htmlFor='name'> Name </label>
            <input type='text' id='name' ref={nameRef}/>
        </div>
        <div>
            <label htmlFor='age'> Age </label>
            <input type='text' id='age' ref={ageRef}/>
      </div>   
        <button type="submit"> Submit </button>
    </form>)
};

export default InputForm;

Summing up

The useRef Hook lets us create mutable variables inside functional components.A ref created with useRef will be created only when the component has been mounted and preserved for the full lifecycle.