INTRO ๐
Hello World! ๐
Today we are discussing another custom hook๐ช is useRefs
๐ฅ. It is an extension of useRef
๐ฅ. Now we will see the code and how to use it.
USAGE ๐
As a React
developer๐ง๐ปโ๐ป , we all know what useRef๐ฅ hook is. useRef
๐ฅ helps to access the DOM elements. One useRef
๐ฅ will help to access one element but sometimes we need to access more than one element ๐ค. That time we need to create multiple uesRef
๐ฅ hooks. To avoid this problem we are creating a useRefs
๐ฅ custom hook.
Note๐ :- As discussed earlier hook useLocal๐. This is not a hook, it is the helper. But for our convenience, we are calling it a hook๐ช.
CODE ๐
export const useRefs = () => {
const refs = [];
return [refs, (el) => el && refs.push(el)];
};
USE CASE ๐
TRADITIONAL MULTIPLE useRef
HOOKS ๐ฏ๏ธ
import React, { useEffect, useRef } from "react";
function App() {
const headerRef = useRef(null);
const inputRef = useRef(null);
const btnRef = useRef(null);
useEffect(() => {
console.log("header", headerRef.current.innerText);
console.log("input", inputRef.current.defaultValue);
console.log("button", btnRef.current.offsetWidth);
}, []);
return (
<>
<main>
<div id="header" ref={headerRef}>Header</div>
<input type="text" defaultValue={'hello world'} ref={inputRef}/>
<button id="click" ref={btnRef}>Click Here</button>
</main>
</>
);
}
export default App;
USING useRefs
HOOK ๐ก
import React, { useEffect } from "react";
import { useRefs } from "./useRefs";
function App() {
const [refs, handleRef] = useRefs();
useEffect(() => {
console.log("header", refs[0].innerText);
console.log("input", refs[1].defaultValue);
console.log("button", refs[2].offsetWidth);
}, []);
return (
<>
<main>
<div id="header" ref={handleRef}>Header</div>
<input type="text" defaultValue={"hello world"} ref={handleRef} />
<button id="click" ref={handleRef}>Click Here</button>
</main>
</>
);
}
export default App;
It also gives the same output as using multiple useRef
hooks.
Please practice in your Code Editor, you will get full clarity on this hook.
CONCLUSION ๐
I hope this hook is helpful. We will meet with another hook in another post.
Peace ๐
Top comments (0)