Posted on May 1, 2024

React Custom Hooks (useRefs)

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;