# useState vs useRef: Tussle of Titans
# What are Hooks? š
Hooks let developers use state and other React features without writing a class. Hooks were introduced in React 16.8 to facilitate programmers in the reusability of React code.
They are the functions that "hook into" React state and lifecycle features from function components. It does not work inside classes.
# **When would I use a Hook?**
If writing a function component and realizing the need to add some state to it, previously we had to convert it to a class. Now we can use a Hook inside the existing function component.
## Rules of Hooks:
- Hooks should only be called from the top level of your React function
- Hooks must not be called from nested code (e.g., loops, conditions).
- Hooks may also be called at the top level from custom Hooks.
## **Now letās look at the two hooks which are most confused between** š¬
# useState Hook: š
## Definition:
useState hook is the primary building block that enables functional components to hold state between re-renders. It enables the development of the component state for functional components.
## Usage: š
```jsx
import React, { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
return (
Hello CodeSandbox
);
}
```
Above is the code for functional implementation of React `useState` and below is the equivalent CodeSandbox Output .
[https://codesandbox.io/embed/priceless-fast-hijeoo?fontsize=14&hidenavigation=1&theme=dark](https://codesandbox.io/embed/priceless-fast-hijeoo?fontsize=14&hidenavigation=1&theme=dark)
Letās see the same code using class components-based method.
```jsx
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
You clicked {this.state.count} times
);
}
}
```
We see how much the code is reduced significantly and using functional components and hook also makes code much clearer by not using this keyword and eliminating a wrapper constructor within `class` component.
## What does useState do? š¤
First of all, it declares āstate variablesā. It is used to preserve value between the function calls. Normally, common Javascript variables like ( `let`, `var`, `const`) disappear after the function call. However, state variables preserve the values.
## Explaining the Syntax:
```jsx
[count,setCount]=useState(0)
```
- `count` is the state variable that will be used to represent the value assigned using the hook.
- `setCount` is a functional variable whose sole purpose is updating `count` state variable.
- Within brackets, after `useState` initial argument is passed which is used for the initial value of the count after initial rendering.
- Square Brackets mean that when we declare a state variable with `useState` it returns an array with two items. The first one is the current value and the second is a function that updates it.
> React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the currentĀ `count`, we can callĀ `setCount`
When the App component re-renders, its children would re-render.
>
## Gotcha! š³
```jsx
const [localState, setLocalState] = useState(props.theme);
```
# useRef Hook: š
## Definition:
The useRef HookĀ **allows persisting values between renders**. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.
It does everything that useState does but without re-rendering the components.
`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.
## The major question that arises is why use useRef if we have useState? š¤
- Easier to work with as updates are synchronous.
- Do not trigger re-render. Performance optimization.
- Prevents render thrashing
- Can be used if we want the state to presist value throughout the component lifecycle.
- If we want to access the DOM element directly `useRef` should be used.
## Usage: š
```jsx
import { useState, useRef } from "react";
import "./styles.css";
export default function AppDemo11() {
const [value, setValue] = useState("");
const valueRef = useRef();
console.log("render");
const handleClick = () => {
console.log(valueRef);
setValue(valueRef.current.value);
};
return (
Value: {value}
);
}
```
We see the code used for `useRef` and equivalent output in CodeSandbox.
[https://codesandbox.io/embed/cranky-ellis-1s6jrt?fontsize=14&hidenavigation=1&theme=dark](https://codesandbox.io/embed/cranky-ellis-1s6jrt?fontsize=14&hidenavigation=1&theme=dark)
We see that component only renders after button click function rather than rendering on each keystroke.
When we āsubmitā the input with a button to update the state variableĀ `value`.With theĀ `ref`property, React provides direct access to React components or HTML elements.
```jsx
```
---
If this had been done using `useState` and `onChange` which each keystroke input the component would have re-rendered. With each keystroke, component is re-rendered.
We see that in effect in the below code and itās output in CodeSandBox.
```jsx
import { useState, useRef, useEffect } from "react";
import "./styles.css";
export default function AppDemo11() {
const [value, setValue] = useState("");
const rendercount = useRef(0);
useEffect(() => {
rendercount.current = rendercount.current + 1;
console.log(rendercount.current);
});
const handleChange = (e) => {
setValue(e.target.value);
};
return (
Renders:{rendercount.current}
);
}
```
%[https://codesandbox.io/embed/competent-cerf-6e3vp0?fontsize=14&hidenavigation=1&theme=dark]
(https://codesandbox.io/embed/competent-cerf-6e3vp0?fontsize=14&hidenavigation=1&theme=dark)
However, using `useRef` makes sure that the component is rendered only once after the button is clicked.
## Explaining the Syntax:
```jsx
const valueRef = useRef(null);
const onButtonClick = () => {
console.log(valueRef.current.value);
};
```
- `valueRef` is the variable that stores the value to be persisted.
- Within the brackets, after the `useRef` statement, it is provided the initial value which should be assigned to useRef on the first render.
- We see that within the Button click function we access value within `valueRef` using .`current` keyword. This is because `useRef` is like a box that holds its mutable value in its `.current` property.
> Keep in mind thatĀ `useRef`*doesnāt*notify when its content changes. Mutating theĀ `.current`property doesnāt cause a re-render.
>
## Gotcha! š³
# Examples of different use cases for useState vs useRef: š¤
We have already seen two major use cases for useRef over useState
1. Accessing DOM input using ref directly.
2. Persisting values of mutable variables and not causing re-renders on updation.
### Letās see some more use cases of these points.
- **In the first example, we simply try counting the no of renders using `useRef` and `useState`.**
**useState code:**
```jsx
import { useState, useRef, useEffect } from "react";
import "./styles.css";
export default function AppDemo11() {
const [value, setValue] = useState("");
const [rendercount,setrenderCount] = useState(0);
useEffect(() => {
setrenderCount(rendercount+ 1);
});
const handleChange = (e) => {
setValue(e.target.value);
};
return (
Renders:{renderco}
);
}
```
This above code will cause infinite renders as every time `rendercount` value is updated the entire component is re-rendered.
**useRef code:**
Equivalent use case can be achieved using `useRef` whererin within `useEffect` hook ( important to use within `useEffect` to avoid side effects) `rendercount.current` value is updated which doesnāt trigger any re rendering.
```jsx
import { useState, useRef, useEffect } from "react";
import "./styles.css";
export default function AppDemo11() {
const [value, setValue] = useState("");
const rendercount = useRef(0);
useEffect(() => {
rendercount.current = rendercount.current + 1;
console.log(rendercount.current);
});
const handleChange = (e) => {
setValue(e.target.value);
};
return (
Renders:{rendercount.current}
);
}
```
- **In the second example Letās take a second use case of creating a timer using `useState` and `useRef` .**
The code is for printing āA second has passedā in console for each passing second
**useState code:**
We see in this code that it goes into an infinite loop and keeps on re-rendering.
As with each update of state variable `intervalUse` component is re-rendered. Code goes into infinite loop hell.
```jsx
import "./styles.css";
import React, { useRef, useEffect, useState } from "react";
export default function App() {
const [intervalUse,setintevalUse]= useState()
useEffect(() => {
const id = setInterval(() => {
console.log("A second has passed");
}, 1000);
setintevalUse(id)
});
return (
);
}
```
**useRef code:**
So to prevent inifinte loop hell we use `useRef`.
With each passing second āA second has passedā is printed on the console and state variable `val` is updated which is rendered on the screen.
```jsx
import "./styles.css";
import React, { useRef, useEffect, useState } from "react";
export default function App() {
const[val,setVal]=useState(0)
const intervalRef = useRef();
useEffect(() => {
const id = setInterval(() => {
setVal(val+1)
console.log("A second has passed");
}, 1000);
intervalRef.current = id;
return () => clearInterval(intervalRef.current);
});
const handleCancel = () => clearInterval(intervalRef.current);
return (