React.useRef () explained

React.useRef () explained

The best explanation possible to understand useRef in react

๐Ÿค” What is useRef?

It is just like useState, used to store the data. But unlike useState which triggers an update(re-renders) whenever the state change, useRef doesn't trigger an update.

  1. A data store just like useState
  2. Doesnโ€™t cause re-renders unlike useState
  3. Easily exposes DOM elements (access them directly)
  4. Has single property called current
  5. Used to store the previous state
  6. Used to pass the data through the re-renders

useState ๐Ÿ†š useRef

Trying to count the number of time the app renders on changing the value in the input box

โŒ Counting renders using useState

import React, { useEffect, useState } from "react";

import "./styles.css";
export default function App() {
const [name, setName] = useState("");
const [countRender, setCountRender] = useState(0);
useEffect(() => {
setCountRender((prevRender) => prevRender + 1);
}, [countRender]);
return (
<div className="App">
<input value={name} onChange={(e) => setName(e.target.value)} />
<h2>{name}</h2>
<h3>{countRender}</h3>
</div>
);
}

This is not the right way, because when the app re-renders the countRender changes which again causes the app to re-render thus forming an infinite loop.

react useref reactjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Why ReactJS?

React JS is the most popular JS library for building UI (User Interfaces), which is created by Facebook. We can build fast Single Page, modern Applications, or websites with React. So, the question here arises is why React is so important. Let's put some light on the features of react.

Share Code Between React Native and React JS

React provides support for the server-side and frontend. Today, React development services are in demand as more and more organizations are considering software solutions that are crafted from the framework.

Top ReactJS Development Company in USA - Hire React JS Developers

Hire ReactJS developers from a Top ReactJS Development Company in USA to developing User Interfaces on ReactJS framework.

Implementing useRef in React

An introduction to useRef. While working on a personal project, I implemented useRef. It is a hook provided by React and is the equivalent of createRef which is used with class components. The useRef hook served two primary uses in my project: accessing DOM nodes/elements and storing mutable information. Letโ€™s explore how useRef can be implemented in your React application.