An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
February 20, 2022 08:33 pm GMT
Original Link: https://dev.to/fig781/react-hooks-useref-40m6
React Hooks: useRef()
What are React hooks?
They are functions in React that allow you to add react functionality to function based components.
What is the useRef hook
This hook is used to track values between renders and access DOM elements. The main difference between a ref and state is that updating a ref will not cause a re-render. This is especially useful if you want to track the number of renders of a component or when you want to track the previous state of a component. The syntax follows a common pattern:
const refContainer = useRef(0);//refContainer: {current: 0}
- In this case,
0
is the initial value of refContainer. - refContainer will always be formatted as
{current: someValue}
Example using useRef to access a DOM node:
import { useRef } from "react";const App = () => { let element = useRef(); const focusButtonClick = () => { element.current.focus() }; return ( <> <input ref={element} type="text" /> <button onClick={focusButtonClick}>Focus</button> </> );};export default App;
- All React elements have a
ref
attribute that useRef can access. - Element is set as
{current: <input type="text" />}
- When the button is clicked, the input is focused.
Example using useRef to track previous state:
import { useRef, useState, useEffect } from "react";const App = () => { const [input, setInput] = useState(""); const previousState = useRef(""); useEffect(() => { //previousState.current will always update to the previous state previousState.current = input; }, [input]); return ( <> <input type="text" value={input} onChange={(e) => setInput(e.target.value)} /> <p>Current State: {input}</p> <p>Previous State: {previousState.current}</p> </> );};export default App;
More information about useRef can be found in the React docs: https://reactjs.org/docs/hooks-reference.html#useref
Leave comment if you have any questions or feedback.
Original Link: https://dev.to/fig781/react-hooks-useref-40m6
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To