UseRef Hook

In our previous article, we learned about four important Hooks: useState, useEffect, useContext ,and useReducer hooks. 😊

Introduction 📝

React is a popular tool for making websites. It has a special feature called the useRef hook. This hook helps control things on your website without making big changes. It's not as famous as some other tools in React, but it's still very helpful when you want to make small changes to your website. In this article, we'll delve into the useRef hook, its practical applications, and how it can enhance your React projects.

What is the useRef Hook? 🤔

Sometimes, when we work with React, we want to remember something in our component, like a part of the website. We can use the useRef hook for this.

The useRef hook makes a little note about something on our webpage. It's like a sticky note to help us remember it for later.

Normally, we use something called "state" to make changes or do things in React. But sometimes, we don't need "state," and that's when the useRef hook can be handy.

So, the useRef hook is a tool in React (introduced with other tools in React 16.8) that helps us remember or access things on our webpage. And guess what? It can even remember things that can change when our webpage refreshes! 🤫

How It Works🤔

The useRef hook is like a special tool that gives us something to remember. It's like getting a note with a .current part that has something important inside, like a part of our webpage or a special value we want to use later.

Here's the cool part: using useRef doesn't make our webpage refresh or change. It's like having a secret note that doesn't disturb anything else on our webpage.

Just like any other tool in React, we need to bring in this useRef tool first (at the very beginning), following the rules, before we can use it in our projects.

import { useRef } from "react"; 
const reference = useRef("initial value");

Let's explore how to accomplish tasks both without using useRef and with the help of useRef. 🤔

Example: Counting Button Clicks (using useRef):

Imagine you have a button on your website, and you want to keep track of how many times people click it. You can use the useRef hook to do this without causing your webpage to change too much.

import { useRef } from "react";

export default function CountButtonClicks() {
  const clickCount = useRef(0);

  const handleButtonClick = () => {
    clickCount.current++;
    console.log(`Button clicked ${clickCount.current} times`);
  };

  console.log("Kushal This Side!");

  return <button onClick={handleButtonClick}>Click me</button>;
}

📤 Output:

In this example, we use useRef to make a special counter (clickCount) and start it at 0. When someone clicks the button, the handleButtonClick function adds 1 to the counter and tells you how many times the button was clicked.

The cool part is, even though the counter changes, your webpage doesn't keep refreshing. It only shows "Kushal This Side!" once at the beginning and doesn't change every time you click the button.

Example: Counting Button Clicks (using useState):

Suppose you have a button on your website, and you want to keep track of how many times people click it. You can use the useState hook to achieve this:

import React, { useState } from "react";

export default function CountButtonClicks() {
  const [clickCount, setClickCount] = useState(0);

  const handleButtonClick = () => {
    setClickCount(clickCount + 1);
    console.log(`Button clicked ${clickCount + 1} times`);
  };

  console.log("Kushal This Side!");
return (
    <div>
      <button onClick={handleButtonClick}>Click me</button>
    </div>
  );
}

In this example, we use the useState hook to create a state variable called clickCount and initialize it with 0. When someone clicks the button, the handleButtonClick function increases the clickCount by 1 using setClickCount. It then logs the updated count to the console.

Unlike the previous useRef example, this time, the webpage does re-render every time you click the button. So, "Kushal This Side!" is logged to the console each time the button is clicked, showing that the component refreshes. This is the main difference when using useState for state management as compared to useRef.

📚 Exploring Differences Between References and State:

Here, we'll highlight the distinctions between references(useRef) and state(useState) in React. 🧐

1. Effect on Re-rendering:

   • Updating a reference doesn't cause the component to re-render.

   • Updating the state does lead to a re-render of the component.

2. Timing of Updates:

   • Reference updates happen right away (synchronously).

   • State updates occur after the component re-renders (asynchronously).

Conclusion 💥🙌

In summary, we've learned that the useRef hook in React is like a handy tool for remembering things or making small changes on a webpage without causing it to refresh. It's different from using state because it doesn't make the webpage change too much when you use it. So, useRef is great for specific tasks where you want to keep things simple and efficient in your React projects. 😊

Thanks for reading all the way to the end! 💖

If you have any questions, please use the comments section 💬

Let's connect! Find me on the web 🔗

If you have any Queries or Suggestions, feel free to reach out to me.

Happy Coding :)❤️