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 🔔
const refs = [];
return [refs, (el) => el && refs.push(el)];
};
USE CASE 🔔
TRADITIONAL MULTIPLE useRef HOOKS 🕯️
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 { 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 🙂
