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;

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 🙂

Blog

React Custom Hooks (useRefs)

sundarbadagala

USAGE 🔔

CODE 🔔

USE CASE 🔔

CONCLUSION 🔔

Join Our Newsletter. No Spam, Only the good stuff.

Related