DEV Community: SHIVANSH PATEL

UseRef hook beyond focus, Explained all the use cases of useRef hook

SHIVANSH PATEL — Sat, 25 Jan 2025 06:38:09 +0000

In this article, we will dive deep into the use cases of the useRef hook. I have seen in most of the articles and YouTube videos they only mention the focus method but in reality, we can achieve a lot more by using useRef.

In React, useRef is a hook that provides a way to create a persistent variable that doesn't cause re-renders.

Here are the use cases of useRef

Persisting values across renders:
- Unlike state variables, values stored in useRef are not tracked by React.
- This means changes to ref.current will not trigger re-renders to the component.
Accessing DOM elements:
- useRef provides a way to access and manipulate DOM elements directly.
- This is useful for tasks like:
  - Focusing on input elements.
  - Adding event listeners.
  - Measuring dimensions.
  - Controlling animations.
Imperative handles:
- You can use useRef to store imperative("imperative handles" refer to a way to directly control or interact with external components or libraries that don't necessarily fit neatly within React's declarative paradigm) handles to functions or other objects.

Beyond Focus: DOM Operations with useRef in React

While focusing on input elements is a common use case, useRef offers a versatile toolkit for interacting with the DOM. Here are some other DOM operations you can perform using useRef:

Now we will create one input component and we will name it RefInput. Here we are taking an input component you can also try this with any other native or custom component.

import { RefObject } from "react";

export const RefInput = ({
  reference,
}: {
  reference: RefObject<HTMLInputElement>;
}) => {
  return (
    <input
      type="text"
      ref={reference}
    />
  );
};

Here, as you can see, we are passing only one prop, which is reference. In this case, having fewer props available makes it quite challenging to manipulate that component according to your needs.

But With the assistance of useRef, we can address all of our needs.

1. setting Attributes:-
let's take an example where the user won't be able to pass any input if a few APIs are in a loading state. so for this use case, we have to disable a component so that it won't be able to take any input

import { useEffect, useRef} from "react";
import { RefInput } from "./component";

function App() {
  const inputRef = useRef<HTMLInputElement>(null);

 // Apis are loading
  const isLoading = true;

  useEffect(() => {
    if (inputRef?.current) {
      if (isLoading) {
        inputRef.current.setAttribute("disabled", "true");
      }
    }
  }, []);

  return (
    <>
      <RefInput reference={inputRef} />
    </>
  );
}

export default App;

here we have used the disable attribute but you can use any other as well according to your requirements

2. Reading Values or setting placeholder

you can read value as well from the input component

      const inputValue = inputRef.current.value; 
      console.log(inputValue);

inputRef.current.placeholder = "Enter here.....";

3. Styling the component

We can also apply appropriate styles or CSS properties to the component. This is the primary challenge whenever we utilize components from third-party sources.

  useEffect(() => {
    const currentInputRef = inputRef.current;
    if (currentInputRef) {
      currentInputRef.style.width = "80%";
      currentInputRef.style.height = "45px";
      currentInputRef.style.borderRadius = "16px";
      currentInputRef.style.padding = "10px";
      currentInputRef.style.fontFamily = "monospace";
    }
  }, []);

4. Adding Event listeners

we can add event listeners as well to track the changes in this input box

const [value, setValue] = useState("");

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  useEffect(() => {
    const currentInputRef = inputRef.current;
    if (currentInputRef) {
// adding onChange event listener to the input element 
      currentInputRef.addEventListener(
        "change",
        handleChange as unknown as EventListener
      );
    }
// removing the event listener
    return () => {
      if (currentInputRef) {
        currentInputRef.removeEventListener(
          "change",
          handleChange as unknown as EventListener
        );
      }
    };
  }, []);
  console.log("state===>", value);

5. Measuring Dimensions:

Getting Width and Height

    useEffect(() => {
      if (inputRef.current) {
        const width = inputRef.current.offsetWidth; 
        const height = inputRef.current.offsetHeight; 
        console.log('Width:', width, 'Height:', height);
      }
    }, []);

6. Scrolling:

Scrolling to an Element

const handleClick = () => {
  if (inputRef.current) {
    inputRef.current.scrollIntoView({ behavior: 'smooth' }); 
  }
};

7. Animations:

Triggering CSS Animations

const handleAnimationStart = () => {
  // ...
};

useEffect(() => {
  if (inputRef.current) {
    inputRef.current.addEventListener('animationstart', handleAnimationStart); 
  }

  return () => {
    if (inputRef.current) {
      inputRef.current.removeEventListener('animationstart', handleAnimationStart); 
    }
  };
}, []);

conclusion
Remember, while useRef provides direct access to the DOM, it's crucial to use it judiciously. For most state-related interactions, React's built-in state management mechanisms (like useState) are often more suitable.

I hope this expanded explanation clarifies the versatility of useRef for DOM manipulation in React!

Thank you For Reading This Article ❤️

A quick guide for Setting up typescript express application

SHIVANSH PATEL — Mon, 22 Jul 2024 17:19:26 +0000

I am writing this article for anyone who wants to quickly set up their EXPRESS application with typescript, at this time when too many frameworks are available it's not easy to remember each and everything. So follow this article and set up your project.

Folder Structure

-- Dist
  -- index.js
-- src
   -- index.ts
-- .env
-- package.json

After setting up your folder structure install the required packages.

npm i express

install dev dependencies

npm i -D @types/express ts-node typescript nodemon

now let's setup tsconfig file

npx tsc --init

this will generate a default tsconfig.js file.so lets update the file

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "ES2023" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,

    /* Modules */
    "module": "commonjs" /* Specify what module code is generated. */,

    "rootDir": "./src" /* Specify the root folder within your source files. */,

    "outDir": "./Dist" /* Specify an output folder for all emitted files. */,

    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,

    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,

    /* Type Checking */
    "strict": true /* Enable all strict type-checking options. */,

    /* Completeness */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
}

as you can see here we are specifying rootDir and outDir which specify the root folder from where we have to look for the compilation and output folder where we have to keep the compiled code.

Now let's setup our package.json file so that we can configure it to run in dev mode and create a build and run in production mode

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
    "start": "node ./Dist/index.js",
    "dev": "nodemon --exec ts-node ./src/index.ts"
  }

Thank you for reading this article ❤️🚀

Important Git Commands which every developer needs in his day to day life

SHIVANSH PATEL — Sun, 04 Dec 2022 18:40:28 +0000

Hi everyone this are the git commands which I use frequently as a developer in my day to day life.so I thought to share this with all of you.please do comment your frequently use git commands in comment section

stash

The git stash command is a utility that allows a developer to temporarily save modified files. However, it is a utility that should only be used occasionally because it only involves local repository history. Code stored in a local stash is not visible to other developers, nor is it replicated to other git repositories like GitHub or GitLab when a push occurs.

git stash push

Creates a new stash and rolls back the state of all modified files

git stash apply

Takes the files in a stash and places them back into the development workspace, but does not delete the stash from history

git stash pop

Takes the files in a stash, places them back into the development workspace and deletes the stash from history

Creating a new branch from existing branch

git checkout -b new-branch-name

Renaming a branch

1.For renaming a branch you have to checkout to that branch you have to rename

git branch -m new-branch-name

2.Delete the old branch name by running

git push origin --delete old-branch-name

3.Reset the upstream branch to the name of your new local branch by running

git push origin -u new-branch-name.

Deleting a branch

For deleting a branch you have to checkout to another branch because git will not let you delete the branch you are currently working on

deleting branch locally

git branch -d <branch-name>

deleting a branch Remotely

git push origin --delete <branch-name>

Undo Local Staged Changes in Git

git restore --staged filename

Removing the Last Commit

To remove the last commit from git, you can simply run

 git reset --hard HEAD^

If you are removing multiple commits from the top, you can run

git reset --hard HEAD~2

to remove the last two commits. You can increase the number to remove even more commits.

Removing a specific commit

To undo that specific commit, you have to use the commit hash of that specific commit

git revert cc3bbf7 --no-edit

The command above will undo the changes by creating a new commit and reverting that file to its previous state, as if it never changed.

Lastly, use git push to push the change to the remote branch.

Renaming a commit

To change the message of the most recent commit that has not been pushed to the remote repository, commit it again using the --amend flag.

git commit --amend -m"new commit messsage"

versioning in Git

To create a version in Git, you typically use tags to mark specific points in your repository's history. Here are the main approaches:
Creating a Tag (Most Common)
Lightweight tag:

git tag v1.0.0

Annotated tag (recommended for releases):

git tag -a v1.0.0 -m "Release version 1.0.0"

Tag a specific commit:

git tag -a v1.0.0 <commit-hash> -m "Release version 1.0.0"

Push Tags to Remote
Tags aren't automatically pushed, so you need to:

Push a specific tag

git push origin v1.0.0

Push all tags

git push origin --tags

Squash and Merge

The git squash command is used to combine multiple commits into a single commit. This is particularly useful for cleaning up your commit history before merging branches.

git merge --squash feature/branch-name

Thank you for reading this article

Simplest way to implement MQTT in NestJs

SHIVANSH PATEL — Sun, 13 Mar 2022 19:16:18 +0000

MQTT is a lightweight IoT messaging protocol based on the publish/subscribe model. It can provide real-time and reliable messaging services for networked devices with very little code and bandwidth. It is widely used in the industries such as the IoT, mobile Internet, smart hardware, Internet of Vehicles and power energy.

In this article we are going to focus on how to set up mqtt module and use its nest service anywhere in the nest js program for publishing payload to any topic.

1. Generate mqtt module using cli

nest g module mqtt

2. Generate service for mqtt using cli

nest g service mqtt

3. Install mqtt and ps-logger npm package

MQTT.js is a client library for the MQTT protocol, written in JavaScript for node.js and the browser.

ps-logger is a production grade logger which we will use in our project for logging any type of specific data in our console

4. Implement onModuleInit interface to mqttService

Now what we have to do is to implement onModuleInit interface to our mqttService, onModuleInit interface provides us a lifecycle hook onModuleInit() which helps us to execute any program after initialization of all modules.

import { Injectable, OnModuleInit } from "@nestjs/common";

@Injectable()
export class MqttService implements OnModuleInit {

  onModuleInit() 
{

}

5. Now establish a connection with mqtt

So here what we want is to connect with mqtt whenever our project gets initialized.To achieve this we have to establish our mqtt connection inside onModuleInit() method.

import { Injectable, OnModuleInit } from "@nestjs/common";
import {ConfigService} from "@nestjs/config";
import { connect } from "mqtt";
import { debug, error, info } from "ps-logger";

@Injectable()
export class MqttService implements OnModuleInit {
  private mqttClient;

  onModuleInit() {
    const host = this.configService.get<string>('host')
    const port = this.configService.get<string>('port')
    const clientId = `mqtt_${Math.random().toString(16).slice(3)}`;

    const connectUrl = `mqtt://${host}:${port}`;
    const topic = "/nodejs/mqtt/sp";

    this.mqttClient = connect(connectUrl, {
      clientId,
      clean: true,
      connectTimeout: 4000,
      username: this.configService.get<string>('username'),
      password: this.configService.get<string>('password'),
      reconnectPeriod: 1000,
    });

    this.mqttClient.on("connect", function () {
      info("Connected to CloudMQTT");
    });

    this.mqttClient.on("error", function () {
      error("Error in connecting to CloudMQTT");
    });
}

}

Here we are getting all our secrets using configService and we are using the on function of the returned mqttClient instance to monitor the connection status.

6. Publish to topic

Now lets publish our message or payload to any topic dynamically, for this you have to create a publish(topic:string,payload:string) method outside of onModuleInit()

  publish(topic: string, payload: string): string {
    info(`Publishing to ${topic}`);
    this.mqttClient.publish(topic, payload);
    return `Publishing to ${topic}`;
  }

Now you can inject this mqttService to any module and use its publish method to publish your payload to any topic.

Now our code looks like this ->

import { Injectable, OnModuleInit } from "@nestjs/common";
import {ConfigService} from "@nestjs/config";
import { connect } from "mqtt";
import { debug, error, info } from "ps-logger";

@Injectable()
export class MqttService implements OnModuleInit {
  private mqttClient;

  onModuleInit() {
    const host = this.configService.get<string>('host')
    const port = this.configService.get<string>('port')
    const clientId = `mqtt_${Math.random().toString(16).slice(3)}`;

    const connectUrl = `mqtt://${host}:${port}`;
    const topic = "/nodejs/mqtt/sp";

    this.mqttClient = connect(connectUrl, {
      clientId,
      clean: true,
      connectTimeout: 4000,
      username: this.configService.get<string>('username'),
      password: this.configService.get<string>('password'),
      reconnectPeriod: 1000,
    });

    this.mqttClient.on("connect", function () {
      info("Connected to CloudMQTT");
    });

    this.mqttClient.on("error", function () {
      error("Error in connecting to CloudMQTT");
    });
}

  publish(topic: string, payload: string): string {
    info(`Publishing to ${topic}`);
    this.mqttClient.publish(topic, payload);
    return `Publishing to ${topic}`;
  }
}

Thanks for reading this article

Good Bye console.log,no console.log in 2022

SHIVANSH PATEL — Fri, 31 Dec 2021 06:30:06 +0000

yes you heard it right.

we frequently use console.log() to check our outputs in console, it's ok in Development mode but it is highly disgraced in production.

so then what's the solution for it.so in production we basically use production grade loggers.This article is going to teach you how to use ps-logger.

Q.Why ps-logger ?
=>yes you have few other options but the problem is that you have to do lots of manual configurations in it.That's why beginners don't even touch production grade loggers.

ps-logger is a plug and play logger.There is no manual configurations.you have to just install and use it.

npm i ps-logger

Example:-

const logger=require('ps-logger');

logger.info("This is info")
logger.warn("This is warning");
logger.error("This is error");
logger.debug("This is debug");
logger.prompt("This is prompt");
logger.verbose("This is verbose");
logger.silly("This is silly");

if you want to disable its colors

logger.setColor(false);

in future updates it will provide more features to you guys