useRef Demo

useRef_demo.js

import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [username, setUsername] = useState("");
  const usernameRef = useRef();

  const handleOnSubmit = event => {
    event.preventDefault();
    setUsername(usernameRef.current.value);
    usernameRef.current.value = "";
  };

  return (
    <div>
      <form onSubmit={handleOnSubmit}>
        <input
          type="text"
          name="username"
          placeholder="Enter your name"
          autoComplete="off"
          ref={usernameRef}
        />
        <button>Submit</button>
      </form>
      <p>{username}</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));