Let's first have a look at what exactly useState and useRef hooks in React are and then move to the example of taking input using both the hooks and understand how can we make their proper use according to the need.

useState Hook

useState returns two values, one is the current state of the variable and the second is a function that updates the variable. For beginners, it's always a challenge to display a value that can be seen on the console but when tried displaying on UI we get the old initial value. If we want the value to be updated and displayed we need to use the useState hook.

Syntax

const[variableName, functionName] = useState("");

functionName(variableName's new value); - used to update the value

useRef Hook

useRef takes one argument which we set as its initial value and returns an object with a current property holding the actual value. We use useRef when there is a need for a storage container and we don't want to render React components. It helps to access components or DOM elements directly.

Syntax

var variableName = useRef("");

variablename .current.value // access the input field value

Here is an example of taking input using useState and useRef hooks.

Using useState Hook

import React, { useRef} from 'react';

export default function App() {
  const [amount, setAmount] = useState(""); 

  function print(){
    console.info(amount);
  }

return (
<div>
  <input type = "text" 
  placeholder = "Enter Bill Amount" 
  onChange = {(e) => setAmount(e.target.value)}/>
  <button onClick={print}>Print</button>
  <p>{amount}</p>  <!--able to see amount once you start typing in input field-->
</div>
)}

In the above code, we can see the last line prints the amount. As the user starts typing the amount is updated and displayed because the component re-renders every time with every keystroke which is the default behavior of useState hook. But this is not the case with useRef. Let's use useRef to get a better understanding.

Using useRef Hook

import React, { useRef} from 'react';

export default function App() {
  var billRef = useRef("");
  const [amount, setAmount] = useState(""); 

  function print(){
    console.info(billRef.current.value);
    setAmount(billRef.current.value); //sets the amount received from billRef
  }

  return (
  <div>
    <input type = "text" 
    placeholder = "Enter Bill Amount"  
    ref = {billRef}/>
   <button onClick = {print}>Print</button>
  <p>{amount}</p> <!--able to see amount after calling print()-->
  </div>
  )}

As we know useRef avoids rendering and so the page renders second time on a button click instead of every keystroke and gets the input value once the user hits Print. If we want to show the amount on UI then we need to make use of useState with useRef.

So in this article, we just focused on one application of useState and useRef Hook. If we want to just take the input and perform some other functionality use useRef. Feature like a search bar will need an update of value on keystroke then go for useState. We should use useState Hook if we want to update data within React component and cause a UI update. And useRef Hook when we need some container to store the value without causing rendering on change of value.