In this article you will get to know about React Hooks : useRef and useState.

Let's Understand Javascript method first to compare.

Remember in JavaScript we could declare a variable and we could initialised his value through a function or certain conditions and set that variable equal to any elements value. Confused !! . Don't Worry Lets see an example below.

Note - You can't do the same in react since we work in component and if you want your component to remember the data and print on User Interface then you have to use useState() hook.

useState Hook

This hook is used to remember the data and change the data through a function.

1. First you need to import the useState Hook from react.

import {useState} from 'react';

1. This hook is provided with one Variable to remember the values and one Updater Function that will update the variable values.

2. If you will look at the JavaScript code again then you will find that increaseValue was the function who was updating the initialValue variable.

const [count, setCount] =  useState(0)
Note -  You can give any name to your variable like i have given count.

Above count is the variable that will contain the values and setCount is an updater function that will update the count variable.

import {useState} from 'react';
function Button(){
const  [count, setCount] = useState(0)
function changeCount(){
setCount(count+1);
}
return (
<div> 
<h1> {count} </h1>
<button onClick={changeCount}> Click </button>
</div>
)
}

Above we have setup a function that will run when button will be clicked and that function will invoke the setCount function to add the next number in count variable. This is how we are updating the count value using the hook and we are rendering value directly in h1 without even selecting, like we were doing in JavaScript.

Note - Whenever state will change then UI(user interface) will re-render.

Not every time you want you re-render your components UI but sometimes you just want the value to remember. Then and there useRef hook comes in picture.

Let's Understand useRef()

This react hook is used to remember some of the values without re-rendering the component.

useRef is a React Hook that lets you reference a value that’s not needed for rendering.

Syntax.

const referrence =  useRef(0);

Above we have declared a variable with a reference and this useRef hooks returns an Object with a single property only.

• current : Initially the returned property is set to 0 since we have passed 0 above but if you want you change the value then follow the below syntax.

import {useRef} from 'react';

function App(){
const reference = useRef(1);
function changeValue(){
reference.current = 10;
// we have set the reference variable value to 10 through the current
// property which is returned by useRef hook
}
return <button onClick={changeValue}>Click </button>;
}

Above we have change the reference value through a function changeValue but component will not re-render .

lets take a good example to deep understanding how its working.

import { useRef, useState } from "react";
function App() {
  const [count, setCount] = useState(0);
  const NumberofClicks = useRef(0);
  function changeValue() {
    setCount(count + 2);
    NumberofClicks.current += 1;
  }
  function changeReference() {
    NumberofClicks.current = 100;
  }
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={changeValue}>Change State</button>
      <br /> <br />
      <button onClick={changeReference}>Change Reference Vaue</button>
      <h2>{NumberofClicks.current}</h2>
    </div>
  );
}
export default App;

• First Button will run a function that will update the state and and increase the NumberofClicks value by 1. Since the State is updating so Rendering will be done and you will be able to see the changes.

• Second Butto will run a function that will set the NumberofClicks value to 100 but this is a reference thus it will not re-render the UI but the Value Of NumberofClicks is set to 100.

• Once again you will click on first button to update the value then this will change the state and NumberofClicks values and you will get 101 as result.

Above video shows that when we are clicking first button then state is changing and components are re-rendering but when we are clicking the second button then the value is changing but components are not re-rendering which shows that useRef() hook does not re-render but keep the record of values.

lets take a look at the differences between both hooks.