React Tutorials
React Introduction
React Get Started
React Render HTML
React JSX
React Components
React Class
React Props
React Events
React Conditionals
React Lists
React Forms
React Router
React Memo
React CSS Styling
React Sass Styling
React ES6
React ES6
ES6 Classes
ES6 Arrow Functions
ES6 Variables
ES6 Array Methods
ES6 Destructing
ES6 Spread Operator
ES6 Modules
ES6 Ternary Operator
React Hooks
What is Hook?
useState
useContext
useRef
useReducer
useCallback
useMemo
Custom Hooks
Previous
React useRef Hook
useRef Hook lets you press prices between offers.
It can be used to store a variable amount that does not result in a redistribution when updated.
It can be used to access the DOM feature directly.
Does Not Cause Re-renders
If we attempt to calculate how often our app is running useState Hook, we may be caught in an endless loop as this Hook itself creates a redesign.
To avoid this, we can useRef Hook.
Example
Use useRef to track application renders.
import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
function App() {
const [inputValue, setInputValue] = useState("");
const count = useRef(0);
useEffect(() => {
count.current = count.current + 1;
});
return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<h1>Render Count: {count.current}</h1>
</>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
useRef() returns only one item. Returns the so-called current.
When we initialize useRef we set the first value: useRef(0).
It's like doing this: const count = {current: 0}. We can access the calculation using count.current.
Launch this on your computer and try typing input to see the app provide an increase in the number.
Accessing DOM Elements
Generally, we want to allow React to handle all DOM fraud.
But there are cases where useRef can be used without causing problems.
In React, we can add a ref attribute to an item to access it directly in the DOM.
Example
Use useRef to focus the input:
import { useRef } from "react";
import ReactDOM from "react-dom";
function App() {
const inputElement = useRef();
const focusInput = () => {
inputElement.current.focus();
};
return (
<>
<input type="text" ref={inputElement} />
<button onClick={focusInput}>Focus Input</button>
</>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
Tracking State Changes
useRef Hook can also be used to keep track of pricing of the previous status.
This is because we are able to insist on useRef values between offers.
Example
Use useRef to keep track of previous state values:
import { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
function App() {
const [inputValue, setInputValue] = useState("");
const previousInputValue = useRef("");
useEffect(() => {
previousInputValue.current = inputValue;
}, [inputValue]);
return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<h2>Current Value: {inputValue}</h2>
<h2>Previous Value: {previousInputValue.current}</h2>
</>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
In this case we use a combination of useState, useEffect, and useRef to track the previous status.
In useEffect, we update the current value of useRef every time inputValue is updated by entering text in the input field.