# React Hooks Explained - useRef() Vs useState() !

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.

![Javascript Code to Update the Value of the A variable when button is clicked](https://cdn.hashnode.com/res/hashnode/image/upload/v1705828131383/2043a647-8cf4-4be5-b03c-7b776e8aaab8.png align="center")

%[https://codepen.io/Shivam-Abraham/pen/BabZRoM] 

> 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 <mark>useState() </mark> 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.
    

```javascript
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.
    

```javascript
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.

```javascript
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 <mark>UI(user interface)</mark> 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.](https://react.dev/reference/react/useRef)

### Syntax.

```javascript
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.
    

```javascript
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.

```javascript
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.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1705840609557/112b65ce-fe63-4401-98fa-42c54a2a3a0b.gif align="center")

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

# lets take a look at the differences between both hooks.

![Difference betweem useRef hook and useState Hook](https://cdn.hashnode.com/res/hashnode/image/upload/v1705853081966/9feb57ae-3f87-41a9-8262-be86743fda1a.png align="center")