<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Shubham_Baghel</title>
    <description>The latest articles on DEV Community by Shubham_Baghel (@shubhamb).</description>
    <link>https://dev.to/shubhamb</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F304901%2F818ed5b9-2e78-4d9b-852a-eb14da4f47f0.jpeg</url>
      <title>DEV Community: Shubham_Baghel</title>
      <link>https://dev.to/shubhamb</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/shubhamb"/>
    <language>en</language>
    <item>
      <title>[Boost]</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Tue, 28 Oct 2025 11:15:12 +0000</pubDate>
      <link>https://dev.to/shubhamb/-1lc0</link>
      <guid>https://dev.to/shubhamb/-1lc0</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/shubhamb" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F304901%2F818ed5b9-2e78-4d9b-852a-eb14da4f47f0.jpeg" alt="shubhamb"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/shubhamb/-20bc" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;𝐒𝐨𝐥𝐯𝐢𝐧𝐠 𝐂𝐨𝐥𝐝 𝐒𝐭𝐚𝐫𝐭𝐬 𝐢𝐧 𝐀𝐖𝐒 𝐒𝐞𝐫𝐯𝐞𝐫𝐥𝐞𝐬𝐬 (𝐋𝐚𝐦𝐛𝐝𝐚)&lt;/h2&gt;
      &lt;h3&gt;Shubham_Baghel ・ Oct 28&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#webdev&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#programming&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#aws&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#devops&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>webdev</category>
      <category>programming</category>
      <category>aws</category>
      <category>devops</category>
    </item>
    <item>
      <title>𝐒𝐨𝐥𝐯𝐢𝐧𝐠 𝐂𝐨𝐥𝐝 𝐒𝐭𝐚𝐫𝐭𝐬 𝐢𝐧 𝐀𝐖𝐒 𝐒𝐞𝐫𝐯𝐞𝐫𝐥𝐞𝐬𝐬 (𝐋𝐚𝐦𝐛𝐝𝐚)</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Tue, 28 Oct 2025 09:25:21 +0000</pubDate>
      <link>https://dev.to/shubhamb/-20bc</link>
      <guid>https://dev.to/shubhamb/-20bc</guid>
      <description>&lt;p&gt;One of the most common performance challenge in serverless app is the Lambda cold start that small delay when AWS spins up a fresh execution environment after inactivity.&lt;/p&gt;

&lt;p&gt;Some easy tricks to make Lambda functions start faster in production:&lt;/p&gt;

&lt;h3&gt;
  
  
  1.𝐔𝐬𝐞 𝐏𝐫𝐨𝐯𝐢𝐬𝐢𝐨𝐧𝐞𝐝 𝐂𝐨𝐧𝐜𝐮𝐫𝐫𝐞𝐧𝐜𝐲
&lt;/h3&gt;

&lt;p&gt;Keeps a set number of Lambda instances always warm.&lt;/p&gt;

&lt;p&gt;AWS pre-initialise execution environments for you so no first-call delay.&lt;/p&gt;

&lt;p&gt;Configure via Console, CLI, or CDK:&lt;br&gt;
AWS Docs: &lt;a href="https://docs.aws.amazon.com/lambda/latest/dg/provisioned-concurrency.html" rel="noopener noreferrer"&gt;AWS provisioned concurrency&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Tip: Perfect for APIs or real-time workloads (e.g., login or payment endpoints).&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  2.𝐊𝐞𝐞𝐩 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬 𝐖𝐚𝐫𝐦 𝐰𝐢𝐭𝐡 𝐚 𝐒𝐜𝐡𝐞𝐝𝐮𝐥𝐞𝐫
&lt;/h3&gt;

&lt;p&gt;Trigger your function periodically (every 5–10 mins) to prevent it from going cold.&lt;/p&gt;

&lt;p&gt;Use Amazon EventBridge or CloudWatch Schedule for simple pinging.&lt;/p&gt;

&lt;p&gt;EventBridge Docs:&lt;a href="https://docs.aws.amazon.com/eventbridge/latest/userguide/eb-what-is.html" rel="noopener noreferrer"&gt;EventBridge&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Tip: Combine this with a lightweight health-check lambda endpoint (like /ping). This is useful in microservices setups for example, after a new deployment, you can quickly test and verify that all functions are warm and responding correctly.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  3.𝐎𝐩𝐭𝐢𝐦𝐢𝐳𝐞 𝐃𝐞𝐩𝐥𝐨𝐲𝐦𝐞𝐧𝐭 𝐏𝐚𝐜𝐤𝐚𝐠𝐞 𝐒𝐢𝐳𝐞
&lt;/h3&gt;

&lt;p&gt;The bigger your Lambda zip, the longer AWS takes to initialize it.&lt;/p&gt;

&lt;p&gt;Bundle only what’s needed (exclude dev dependencies).&lt;/p&gt;

&lt;p&gt;Use tools like esbuild, webpack, or AWS SAM build.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Tip: For Node.js avoid installing large libraries like aws-sdk (it’s pre-included) and remove unused packages with library called depcheck.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  4.𝐂𝐡𝐨𝐨𝐬𝐞 𝐭𝐡𝐞 𝐑𝐢𝐠𝐡𝐭 𝐑𝐮𝐧𝐭𝐢𝐦𝐞
&lt;/h3&gt;

&lt;p&gt;Cold start time depends heavily on the runtime.&lt;/p&gt;

&lt;p&gt;Node.js and Python start up faster than Java or .NET.&lt;/p&gt;

&lt;p&gt;AWS SnapStart Doc:&lt;a href="https://docs.aws.amazon.com/lambda/latest/dg/snapstart.html" rel="noopener noreferrer"&gt;AWS SnapStart&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Tip: If you need Java, enable AWS Lambda SnapStart&lt;br&gt;
 to pre-initialise the function state.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  5.𝐁𝐞 𝐂𝐚𝐫𝐞𝐟𝐮𝐥 𝐰𝐢𝐭𝐡 𝐕𝐏𝐂 𝐂𝐨𝐧𝐟𝐢𝐠𝐮𝐫𝐚𝐭𝐢𝐨𝐧
&lt;/h3&gt;

&lt;p&gt;Putting Lambdas inside a VPC adds ENI (Elastic Network Interface) setup time.&lt;/p&gt;

&lt;p&gt;Avoid VPC unless you truly need private resources (like RDS).&lt;/p&gt;

&lt;p&gt;If required, use VPC endpoints or NAT optimization.&lt;br&gt;
Best Practices for VPC Lambda Networking: &lt;a href="https://docs.aws.amazon.com/lambda/latest/dg/configuration-vpc.html" rel="noopener noreferrer"&gt;VPC configuration&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Tip: For DynamoDB, S3, or SNS we can go without a VPC entirely.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  6.𝐒𝐩𝐥𝐢𝐭 𝐋𝐚𝐫𝐠𝐞 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧𝐬
&lt;/h3&gt;

&lt;p&gt;Monolithic Lambdas = longer cold starts.&lt;/p&gt;

&lt;p&gt;Break down your logic into multiple smaller Lambdas (micro-Lambdas).&lt;/p&gt;

&lt;p&gt;Tip: This also improves deploy speed and observability.&lt;/p&gt;

&lt;p&gt;In one project, our first API call took ~2.4s (cold Lambda in VPC).&lt;br&gt;
After making a few changes like&lt;br&gt;
 • Removed VPC dependency&lt;br&gt;
 • Enabled provisioned concurrency (2 instances)&lt;br&gt;
 • Added an EventBridge warm-up every 10 mins&lt;/p&gt;

&lt;p&gt;Cold start dropped to ~150ms consistently.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>aws</category>
      <category>devops</category>
    </item>
    <item>
      <title>Best way to deploy Nodejs app</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Thu, 27 Mar 2025 15:56:49 +0000</pubDate>
      <link>https://dev.to/shubhamb/best-way-to-deploy-nodejs-app-35fk</link>
      <guid>https://dev.to/shubhamb/best-way-to-deploy-nodejs-app-35fk</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/shubhamb" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F304901%2F818ed5b9-2e78-4d9b-852a-eb14da4f47f0.jpeg" alt="shubhamb"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/shubhamb/deploying-a-nodejs-application-using-docker-on-aws-ec2-kubernetes-eks-1fa3" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Deploying a NodeJS Application using Docker on AWS EC2 &amp;amp; Kubernetes (EKS)&lt;/h2&gt;
      &lt;h3&gt;Shubham_Baghel ・ Mar 27&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#webdev&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#aws&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#docker&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>aws</category>
      <category>docker</category>
    </item>
    <item>
      <title>Deploying a NodeJS Application using Docker on AWS EC2 &amp; Kubernetes (EKS)</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Thu, 27 Mar 2025 15:44:45 +0000</pubDate>
      <link>https://dev.to/shubhamb/deploying-a-nodejs-application-using-docker-on-aws-ec2-kubernetes-eks-1fa3</link>
      <guid>https://dev.to/shubhamb/deploying-a-nodejs-application-using-docker-on-aws-ec2-kubernetes-eks-1fa3</guid>
      <description>&lt;p&gt;Deploying a Node.js application using Docker, Kubernetes, and AWS is a multi-step process that requires building the Docker image, configuring Kubernetes for deployment, and setting up AWS services. Below is an process and commands involved&lt;/p&gt;

&lt;p&gt;I'll walk through the steps of deploying a simple Node.js application using Docker, Kubernetes, and AWS.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxi5qje9bgchd7tvyo27b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxi5qje9bgchd7tvyo27b.png" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Step 1: Set Up Node.js Application&lt;br&gt;
First, create a simple Node.js application. For this example, we'll use a basic Express server.&lt;/p&gt;

&lt;p&gt;Create a server.js file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// server.js
const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) =&amp;gt; {
  res.send('First Service from Node.js!');
});

app.listen(port, () =&amp;gt; {
  console.log(`Server is running on port ${port}`);
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Step 2: Dockerize the Node.js Application&lt;br&gt;
Create a Dockerfile:&lt;/p&gt;

&lt;p&gt;The Dockerfile defines the environment to run your application.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;# Step 1: Use the official Node.js image
FROM node:14

# Step 2: Set the working directory inside the container
WORKDIR /usr/src/app

# Step 3: Copy the application code into the container
COPY . .

# Step 4: Install dependencies
RUN npm install

# Step 5: Expose the application port
EXPOSE 3000

# Step 6: Run the application
CMD ["npm", "start"]

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Build the Docker image using below command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;docker build -t node-docker-app .&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;docker run -p 3000:3000 node-docker-app&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
Now we can check &lt;br&gt;
our application should now be accessible at &lt;a href="http://localhost:3000" rel="noopener noreferrer"&gt;http://localhost:3000&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Step 3: Push Docker Image to AWS ECR (Elastic Container Registry)&lt;br&gt;
First, create a repository in ECR on AWS Console:&lt;/p&gt;

&lt;p&gt;Go to the ECR section of AWS.&lt;/p&gt;

&lt;p&gt;Create a new repository, e.g., node-docker-app.&lt;/p&gt;

&lt;p&gt;Then, authenticate Docker with AWS ECR:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;aws ecr get-login-password --region us-west-2 | docker login --username AWS --password-stdin &amp;lt;aws_account_id&amp;gt;.dkr.ecr.us-west-2.amazonaws.com&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
Reference Link: link:&lt;a href="https://docs.aws.amazon.com/AmazonECR/latest/userguide/docker-push-ecr-image.html" rel="noopener noreferrer"&gt;https://docs.aws.amazon.com/AmazonECR/latest/userguide/docker-push-ecr-image.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Tag the Docker image:&lt;br&gt;
&lt;code&gt;docker tag node-docker-app:latest &amp;lt;aws_account_id&amp;gt;.dkr.ecr.us-west-2.amazonaws.com/node-docker-app:latest&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Push the Docker image to ECR:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;docker push &amp;lt;aws_account_id&amp;gt;.dkr.ecr.us-west-2.amazonaws.com/node-docker-app:latest&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Step 4: Create Kubernetes Deployment Configuration&lt;br&gt;
Create a Kubernetes deployment YAML file to manage your Dockerized app.&lt;/p&gt;

&lt;p&gt;Create a deployment.yaml file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;apiVersion: apps/v1
kind: Deployment
metadata:
  name: node-docker-app-deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: node-docker-app
  template:
    metadata:
      labels:
        app: node-docker-app
    spec:
      containers:
      - name: node-docker-app
        image: &amp;lt;aws_account_id&amp;gt;.dkr.ecr.us-west-2.amazonaws.com/node-docker-app:latest
        ports:
        - containerPort: 3000
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create a Kubernetes service YAML file:&lt;/p&gt;

&lt;p&gt;This exposes your application to the outside world.&lt;/p&gt;

&lt;p&gt;Create a service.yaml file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;apiVersion: v1
kind: Service
metadata:
  name: node-docker-app-service
spec:
  selector:
    app: node-docker-app
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
  type: LoadBalancer
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Step 5: Set Up Kubernetes on AWS (EKS)&lt;br&gt;
Install kubectl and Install eksctl (for creating an EKS cluster)&lt;/p&gt;

&lt;p&gt;&lt;code&gt;brew install kubectl&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;code&gt;brew install eksctl&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Create an EKS cluster:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;eksctl create cluster --name nodejs-cluster --region us-west-2 --nodegroup-name nodegroup --node-type t2.micro --nodes 2&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Configure kubectl to use your EKS cluster:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;aws eks --region us-west-2 update-kubeconfig --name nodejs-cluster&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Step 6: Deploy the Application to Kubernetes&lt;br&gt;
Apply the deployment and service files:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;kubectl apply -f deployment.yaml&lt;br&gt;
kubectl apply -f service.yaml&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Check the status of the deployment:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;kubectl get deployments&lt;br&gt;
kubectl get pods&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Get the LoadBalancer IP:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;kubectl get svc node-docker-app-service&lt;br&gt;
&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The external IP address will be listed under the EXTERNAL-IP column. You can now access the application via the LoadBalancer's IP.&lt;/p&gt;

&lt;p&gt;Step 7: Clean Up&lt;br&gt;
When you're done, you can delete the Kubernetes cluster on AWS to avoid any ongoing charges:&lt;/p&gt;

&lt;p&gt;`eksctl delete cluster --name nodejs-cluster --region us-west-2&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>aws</category>
      <category>docker</category>
    </item>
    <item>
      <title>How Lambda will enhance your app scalability</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Sun, 07 May 2023 15:06:22 +0000</pubDate>
      <link>https://dev.to/shubhamb/how-lambda-will-enhance-your-app-scalability-m40</link>
      <guid>https://dev.to/shubhamb/how-lambda-will-enhance-your-app-scalability-m40</guid>
      <description>&lt;p&gt;Suppose you have an e-commerce site and you need to tune the consumer's behavior for the duration of their visit. You want to recognize how a lot time the purchaser spends on each web page and which pages they go to in what order. This information can help you examine the consumer's hobbies and possibilities and enhance their universal revel in on the website.&lt;/p&gt;

&lt;p&gt;One way to reap that is by means of developing a Lambda feature that is caused every time a user visits a web page on your internet site. The function can record the user's consultation facts in a database or file. Here's a pattern code for the Lambda characteristic:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3p9qohg2lyq02911hx7c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3p9qohg2lyq02911hx7c.png" alt="AWS lambda" width="800" height="911"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this case, the Lambda characteristic receives an occasion object that consists of the pageId and sessionId. The pageId is the identifier for the web page that the person is presently visiting, and the sessionId is a unique identifier for the consumer's consultation.&lt;/p&gt;

&lt;p&gt;The feature then generates a timestamp and creates an item that includes the sessionId, pageId, and timestamp. It makes use of the AWS SDK to put in writing this object to a DynamoDB table named web page-visit-tracking. Finally, it logs a message indicating that the page visit has been recorded.&lt;/p&gt;

&lt;p&gt;This Lambda function can be incorporated together with your internet site's frontend code to ship an occasion item to the Lambda function each time a consumer visits a web page. By doing so, you may music the person's conduct and benefit precious insights into their pursuits and preferences.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>aws</category>
    </item>
    <item>
      <title>Redis with Nodejs</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Mon, 27 Mar 2023 09:38:36 +0000</pubDate>
      <link>https://dev.to/shubhamb/redis-with-nodejs-dg6</link>
      <guid>https://dev.to/shubhamb/redis-with-nodejs-dg6</guid>
      <description>&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;Redis is an in-memory data store that can be used as a database, cache and message broker. The main benefits of using Redis is its speed. Because it's an in-memory database, it can read and write data very quickly with feature like pipeline and transactions, making it a great choice for applications that need to process large volumes of data in real-time. Redis also supports a variety of data structures, including strings, hashes, lists, sets, and sorted sets. This makes it very versatile and useful for a wide range of applications.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk0fr013h9zcn0xx5h23d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk0fr013h9zcn0xx5h23d.png" alt="Redis" width="389" height="130"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To use Redis with node.js,you will need to install "redis" package,We can installed it using below command:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install redis&lt;/code&gt; &lt;/p&gt;

&lt;p&gt;After this lets create Redis client using &lt;code&gt;redis.createclient&lt;/code&gt;.This will create a new client that connects to default redis server on &lt;code&gt;localhost:6379&lt;/code&gt;.Also we can pass configuration objectin createclient method:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
const client = redis.createClient({
    socket: {
        host: '&amp;lt;hostname&amp;gt;',
        port: '&amp;lt;port&amp;gt;'
    },
    password: '&amp;lt;password&amp;gt;'
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Installation on windows:&lt;br&gt;
&lt;a href="https://redis.io/docs/getting-started/installation/install-redis-on-windows/" rel="noopener noreferrer"&gt;Redis installation step for windows&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://redis.io/docs/getting-started/installation/install-redis-on-mac-os/" rel="noopener noreferrer"&gt;Redis installation step for macOs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now lets see how we can use &lt;code&gt;client.set()&lt;/code&gt; to set a key-value pair in redis,The first argument is key which will be any filed that we need to store and will be consider as KEY and second argument here is actual value and third is callback function that gets executed or called once the execution is complete.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
// Set a key-value pair in Redis
client.set('name', 'devtoUser', (error, result) =&amp;gt; {
  if (error) {
    console.error(error);
  } else {
    console.log(result); // this will return OK
  }
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finally, we use client.get() to get the value of the namekey from Redis.The first argument is the key, and the second argument is a callback function that gets called once the operation is complete. In this example, we log the result to the console if there are no errors.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Get a value from Redis
client.get('name', (error, result) =&amp;gt; {
  if (error) {
    console.error(error);
  } else {
    console.log(result); //this will return devtoUser
  }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Redis benefits
&lt;/h2&gt;

&lt;p&gt;Redis also has a number of advanced features that make it a powerful tool for developers. Some of these features include:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Pub/Sub messaging: Redis can be used as a message broker, allowing applications to publish and subscribe to messages. This makes it useful for building real-time applications, such as chat apps or real-time analytics systems.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Lua scripting: Redis has a built-in Lua interpreter, which allows developers to write custom scripts that can be executed on the server. This can be useful for complex data operations that can't be easily performed using built-in Redis commands.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Transactions: Redis supports transactions, allowing developers to group multiple commands together into a single atomic operation. This can help ensure data consistency and prevent race conditions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Persistence: Redis can be configured to periodically save its data to disk, ensuring that data is not lost if the server crashes or is restarted.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Github Repo:&lt;br&gt;
&lt;a href="https://github.com/shubhambaghel34/Redis-Examples" rel="noopener noreferrer"&gt;Redis repo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Additional Radis commands :&lt;br&gt;
&lt;a href="https://redis.io/commands/" rel="noopener noreferrer"&gt;Redis commands list&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>useCallback vs useMemo</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Mon, 06 Mar 2023 14:33:12 +0000</pubDate>
      <link>https://dev.to/shubhamb/usecallback-vs-usememo-47h8</link>
      <guid>https://dev.to/shubhamb/usecallback-vs-usememo-47h8</guid>
      <description>&lt;p&gt;&lt;strong&gt;useCallback&lt;/strong&gt; and &lt;strong&gt;useMemo&lt;/strong&gt; are both React hooks that can be used to optimize the performance of your React application by remembering calculated values ​​in components but there is a slight difference in terms of Return Value, Dependency array. Below is good comparison of both.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Use case&lt;/strong&gt;: The main use case of useCallback is to remember a function, while the main use case of useMemo is to remember a value.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Return value&lt;/strong&gt;: useCallback returns a memorized function, while useMemo returns a memorized value.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Dependencies Array&lt;/strong&gt;: &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;useCallback takes a dependency array as the second argument, which specifies the values ​​on which the stored function depends. The function will only be recalculated if any value in the dependencies array changes. On the other hand, &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;useMemo also takes an array of dependencies as the second argument, but it specifies the values ​​on which the remembered value depends. The value will only be recalculated if any value in the dependencies array changes.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Performance Considerations&lt;/strong&gt;: If you have a computationally expensive function that you need to pass as a prop to a child component, you should use useCallback to remember that function. This will prevent the child component from rendering unnecessarily. If you have a computationally expensive value that you need to use in a component, you should use useMemo to remember that value. This will prevent the value from being unnecessarily recalculated on every new render.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhecgus433x4fp1z88n8j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhecgus433x4fp1z88n8j.png" alt="useCallback vs useMemo" width="706" height="616"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this example, we use both useMemo and useCallback to remember a value and a function respectively. Expensive value is remembered by useMemo and expensive function is remembered by useCallback. Both hooks depend on the value of the count state and will only recalculate if the count value changes. This can help optimize component performance.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
      <category>react</category>
    </item>
    <item>
      <title>Why to useMemo hook?</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Sun, 05 Mar 2023 12:09:16 +0000</pubDate>
      <link>https://dev.to/shubhamb/why-to-usememo-hook-415c</link>
      <guid>https://dev.to/shubhamb/why-to-usememo-hook-415c</guid>
      <description>&lt;p&gt;Suppose you have a module that displays a listing of products, each one with its own label and cost. Moreover, you have a separate function that determines the collective price for all the items. This is an illustration of how to employ the useMemo hook to store the result of the total price calculation:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
import React, { useMemo } from 'react';

function ItemList({ items }) {
  const totalPrice = useMemo(() =&amp;gt; {
    console.log('Calculating total price...');
    return items.reduce((acc, item) =&amp;gt; acc + item.price, 0);
  }, [items]);

  return (
    &amp;lt;div&amp;gt;
      &amp;lt;ul&amp;gt;
        {items.map((item) =&amp;gt; (
          &amp;lt;li key={item.name}&amp;gt;
            {item.name}: {item.price}
          &amp;lt;/li&amp;gt;
        ))}
      &amp;lt;/ul&amp;gt;
      &amp;lt;p&amp;gt;Total price: {totalPrice}&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
  );
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The useMemo hook lets us set up a variable, entitled totalPrice, in this instance. The first piece of the hook is a function that works out the cost of all the items; the second part is an array of dependencies, meaning that React will recalculate the price any time the dependencies alter. In this instance, the only thing that the calculation is reliant on is the items prop.&lt;/p&gt;

&lt;p&gt;The useMemo hook memorizes the result of the function, so if the items prop hasn't changed since the last render, React will take the previous result instead of running the function again. This can be helpful for complicated calculations that don't need to be re-run every time the render is executed. For example, if there is a large list of items, figuring out the total cost on every render could be time-consuming; memorizing the result can increase performance.&lt;/p&gt;

&lt;p&gt;It is worth noting that useMemo is not a substitute for useEffect. useMemo should be used to store the outcome of a function, while useEffect should be used for completing side effects like obtaining data from an API.&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How to Write React Hooks More Effectively</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Sun, 05 Mar 2023 10:30:39 +0000</pubDate>
      <link>https://dev.to/shubhamb/how-to-write-react-hooks-more-effectively-2ale</link>
      <guid>https://dev.to/shubhamb/how-to-write-react-hooks-more-effectively-2ale</guid>
      <description>&lt;p&gt;1.Only call hooks at the top level: Hooks should only be called at the top level of your component or custom hook. Do not call hooks inside loops, conditions, or nested functions&lt;/p&gt;

&lt;p&gt;Example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function MyComponent() {
  const [state, setState] = useState(0);

  function handleClick() {
    setState(state + 1); // This is correct
  }

  return (
    &amp;lt;button onClick={handleClick}&amp;gt;Click me&amp;lt;/button&amp;gt;
  );
}

function MyOtherComponent() {
  const [state, setState] = useState(0);

  function handleClick() {
    if (state &amp;gt; 0) {
      setState(state - 1); // This is correct
    }
  }

  return (
    &amp;lt;button onClick={handleClick}&amp;gt;Click me&amp;lt;/button&amp;gt;
  );
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2.Use the state hook for local state: The state hook is the most commonly used hook and should be used for any local state that your component needs.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function MyComponent() {
  const [name, setName] = useState("");

  return (
    &amp;lt;&amp;gt;
      &amp;lt;input value={name} onChange={e =&amp;gt; setName(e.target.value)} /&amp;gt;
      &amp;lt;p&amp;gt;Hello, {name}&amp;lt;/p&amp;gt;
    &amp;lt;/&amp;gt;
  );
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;3.Use the effect hook for side effects: The effect hook allows you to synchronize a component with an external system, such as a web API or a browser API.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() =&amp;gt; {
    fetch("https://my-api.com/data")
      .then(response =&amp;gt; response.json())
      .then(data =&amp;gt; setData(data));
  }, []);

  return (
    &amp;lt;ul&amp;gt;
      {data.map(item =&amp;gt; (
        &amp;lt;li key={item.id}&amp;gt;{item.name}&amp;lt;/li&amp;gt;
      ))}
    &amp;lt;/ul&amp;gt;
  );
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;4.Avoid unnecessary re-renders: Hooks like useMemo and useCallback can help you avoid unnecessary re-renders by memoizing values and functions.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function MyComponent({ items }) {
  const sortedItems = useMemo(() =&amp;gt; items.sort(), [items]);

  return (
    &amp;lt;ul&amp;gt;
      {sortedItems.map(item =&amp;gt; (
        &amp;lt;li key={item.id}&amp;gt;{item.name}&amp;lt;/li&amp;gt;
      ))}
    &amp;lt;/ul&amp;gt;
  );
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;5.Keep hooks simple: Each hook should only handle one piece of logic, such as setting up a subscription or measuring the size of an element&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function useData(url) {
  const [data, setData] = useState([]);

  useEffect(() =&amp;gt; {
    fetch(url)
      .then(response =&amp;gt; response.json())
      .then(data =&amp;gt; setData(data));
  }, [url]);

  return data;
}

function MyComponent() {
  const data = useData("https://my-api.com/data");

  return (
    &amp;lt;ul&amp;gt;
      {data.map(item =&amp;gt; (
        &amp;lt;li key={item.id}&amp;gt;{item.name}&amp;lt;/li&amp;gt;
      ))}
    &amp;lt;/ul&amp;gt;
  );
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;6.Use the context hook to share state: The context hook allows you to share state between components without having to pass props down the component tree.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const MyContext = React.createContext();

function MyProvider({ children }) {
  const [name, setName] = useState("");

  return (
    &amp;lt;MyContext.Provider value={{ name, setName }}&amp;gt;
      {children}
    &amp;lt;/MyContext.Provider&amp;gt;
  );
}

function MyComponent() {
  const { name, setName } = useContext(MyContext);

  return (
    &amp;lt;&amp;gt;
      &amp;lt;input value={name} onChange={e =&amp;gt; setName(e.target.value)} /&amp;gt;
      &amp;lt;p&amp;gt;Hello, {name}&amp;lt;/p&amp;gt;
    &amp;lt;/&amp;gt;
  );
}

function App() {
  return (
    &amp;lt;MyProvider&amp;gt;
      &amp;lt;MyComponent /&amp;gt;
    &amp;lt;/MyProvider&amp;gt;
  );
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the MyProvider component creates a context and provides the name and setName state to its children via the value prop. The MyComponent component then uses the useContext hook to access the name and setName state from the context.&lt;/p&gt;

&lt;p&gt;This way, the name state can be accessed and modified by any component that is a child of the MyProvider component, without having to pass props down the component tree.&lt;/p&gt;

&lt;p&gt;7.The handleClick function uses the callback form of the setCount updater, which receives the previous state and returns the new state. This way, the function can update the state based on the previous value, without needing to use a useEffect or useRef to store the previous value.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function MyComponent() {
  const [count, setCount] = useState(0);

  const handleIncrement = useCallback(() =&amp;gt; {
    setCount(prevCount =&amp;gt; prevCount + 1);
  }, [setCount]);

  const handleDecrement = useCallback(() =&amp;gt; {
    setCount(prevCount =&amp;gt; prevCount - 1);
  }, [setCount]);

  return (
    &amp;lt;&amp;gt;
      &amp;lt;button onClick={handleIncrement}&amp;gt;Increment&amp;lt;/button&amp;gt;
      &amp;lt;button onClick={handleDecrement}&amp;gt;Decrement&amp;lt;/button&amp;gt;
      &amp;lt;p&amp;gt;Count: {count}&amp;lt;/p&amp;gt;
    &amp;lt;/&amp;gt;
  );
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This approach is useful in situations where the component updates frequently, and you want to prevent unnecessary re-renders caused by changing function references. It also allows to memoize the function, which means it will not recreate the function if the dependencies haven't changed.&lt;/p&gt;

&lt;p&gt;8.Use the useEffect hook with a cleanup function: A cleanup function is a function that is executed when a component is unmounted or a hook is re-run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { useEffect, useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() =&amp;gt; {
    const intervalId = setInterval(() =&amp;gt; {
      setCount(count =&amp;gt; count + 1);
    }, 1000);
    // Cleanup function
    return () =&amp;gt; clearInterval(intervalId);
  }, [setCount]);

  return &amp;lt;p&amp;gt;Count: {count}&amp;lt;/p&amp;gt;;
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the useEffect hook is used to set up an interval that increments the count state every second. The setInterval function returns an interval ID, which is stored in a variable called intervalId.&lt;/p&gt;

&lt;p&gt;The useEffect hook also takes a function as a second argument that is used as a cleanup function. It is executed when the component is unmounted or the hook is re-run. In this case, the cleanup function is used to clear the interval by passing in the intervalId variable to the clearInterval function.&lt;/p&gt;

&lt;p&gt;This way, we can ensure that the interval is properly cleared when the component is no longer in use, and avoid memory leaks.&lt;/p&gt;

&lt;p&gt;Cleanup functions are a powerful feature of the useEffect hook, they allow you to perform a cleanup operation when a component is unmounted or when a hook is re-run. This makes sure that you don't leave any unnecessary event listeners, timeouts, intervals or other resources that are no longer needed.&lt;/p&gt;

&lt;p&gt;9.Always pass the dependencies array to useEffect: This array should include all values that the effect depends on.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { useEffect, useState } from 'react';

function MyComponent({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() =&amp;gt; {
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then(response =&amp;gt; response.json())
      .then(data =&amp;gt; setUserData(data));
  }, [userId, setUserData]);

  return userData ? (
    &amp;lt;&amp;gt;
      &amp;lt;h2&amp;gt;{userData.name}&amp;lt;/h2&amp;gt;
      &amp;lt;p&amp;gt;{userData.email}&amp;lt;/p&amp;gt;
    &amp;lt;/&amp;gt;
  ) : (
    &amp;lt;p&amp;gt;Loading...&amp;lt;/p&amp;gt;
  );
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, the useEffect hook is used to fetch data from an API based on the userId prop passed to the component. The fetch function is used to make a request to the API, and the then method is used to handle the response and update the userData state.&lt;/p&gt;

&lt;p&gt;The second argument passed to the useEffect hook is an array of dependencies, which includes userId and setUserData. These are the values that the effect depends on, so they should be included in the dependencies array.&lt;/p&gt;

&lt;p&gt;This way, the effect will only re-run when the userId prop or setUserData state change, and it will not re-run when other props or state values change. This can help to optimize the performance of your component and avoid unnecessary re-renders.&lt;/p&gt;

&lt;p&gt;Always passing the dependencies array to the useEffect hook is important because it tells React when the effect should be run again. If you don't specify the dependencies array, React will assume that the effect depends on all the state and props, and will run the effect on every render. This can lead to unexpected behavior and performance issues.&lt;/p&gt;

&lt;p&gt;10.Be careful when using hooks in loops: If you want to use a hook in a loop, make sure that each rendered element has its own state&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { useState, useEffect } from "react";

function MyComponent({ items }) {
  return (
    &amp;lt;ul&amp;gt;
      {items.map((item, index) =&amp;gt; {
        const [isSelected, setIsSelected] = useState(false);
        return (
          &amp;lt;li key={item.id} onClick={() =&amp;gt; setIsSelected(!isSelected)}&amp;gt;
            {item.name} {isSelected ? "Selected" : ""}
          &amp;lt;/li&amp;gt;
        );
      })}
    &amp;lt;/ul&amp;gt;
  );
}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, My component takes an items prop and maps over it to render a list of items. Each item is rendered as a list item (li) element. Inside the map function, I am using the useState hook to create a isSelected state variable for each item.&lt;/p&gt;

&lt;p&gt;By providing a unique key for each item, React can tell which elements are being added, removed, or re-arranged. This way, React can manage the state of each element separately, and you don't have to worry about the hook state being shared across elements.&lt;/p&gt;

&lt;p&gt;It is important to be careful when using hooks inside loops, because if you don't provide a unique key for each element, React will not be able to tell which elements are being added, removed or re-arranged, and it will reuse the state of the hook across elements, which can lead to unexpected behavior and bugs.&lt;/p&gt;

&lt;p&gt;It's also important to mention that we could use useState inside a callback or inside useEffect instead of directly in the JSX, this way we don't have to worry about different components using the same state.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>react</category>
    </item>
    <item>
      <title>Promise to Innovate: The Cutting-edge of Asynchronous JavaScript</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Sun, 22 Jan 2023 14:27:14 +0000</pubDate>
      <link>https://dev.to/shubhamb/promise-to-innovate-the-cutting-edge-of-asynchronous-javascript-7in</link>
      <guid>https://dev.to/shubhamb/promise-to-innovate-the-cutting-edge-of-asynchronous-javascript-7in</guid>
      <description>&lt;p&gt;Promises in JavaScript are a powerful tool for managing asynchronous code. They allow you to write code that runs asynchronously, while still maintaining a clear and easy-to-understand structure.&lt;/p&gt;

&lt;p&gt;A promise is an object that represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. A promise is in one of three states:&lt;/p&gt;

&lt;p&gt;A promise in JavaScript goes through three states:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Pending: The initial state, neither fulfilled nor rejected. This is the state when the promise is created and before any action is taken on it.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Fulfilled: This state is reached when the promise is resolved, meaning that the asynchronous operation it represents has completed successfully. The promise's then() callback is called with the resolved value.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Rejected: This state is reached when the promise is rejected, meaning that the asynchronous operation it represents has failed. The promise's catch() callback is called with the rejected value.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Promises are a way to handle asynchronous operations in a more synchronous way. Instead of using callbacks, you can use the .then() and .catch() methods on a promise to handle the results of the asynchronous operation.&lt;/p&gt;

&lt;p&gt;You can use the .then() method to handle the successful completion of a promise and the .catch() method to handle any errors.Promise syntax is simple and easy to understand,&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd7cenybaop464dsn369o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd7cenybaop464dsn369o.png" alt="Promise" width="580" height="485"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;1.&lt;strong&gt;Promise.all()&lt;/strong&gt; method&lt;br&gt;
Are you tired of managing asynchronous code one promise at a time? Well, have I got the solution for you: Promise.all()! This handy method lets you party with multiple promises at once, without any of the awkward "waiting for one to finish before moving on to the next" nonsense.&lt;/p&gt;

&lt;p&gt;Let's say you're hosting a dinner party, and you want to make sure all your dishes are ready before serving. You could do it the old-fashioned way, by waiting for each dish to finish cooking before starting the next one. But that's so boring and time-consuming! Instead, you could use Promise.all() to cook all the dishes simultaneously, and serve them up as soon as they're all ready.&lt;/p&gt;

&lt;p&gt;Here's an example of how you might use Promise.all() in your dinner party scenario:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3lbctskqhxztlk6xrk9s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3lbctskqhxztlk6xrk9s.png" alt="Promise.all()" width="597" height="504"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, we use Promise.all() to wait for all the dishes to be cooked before serving them. And if one of them doesn't turn out quite right (maybe the steak was overcooked, or the potatoes were undercooked), then the whole party is a bust and we catch the error.&lt;/p&gt;

&lt;p&gt;So don't be a party pooper, start using Promise.all() today and turn that asynchronous code into a raging success!&lt;/p&gt;

&lt;p&gt;2.&lt;strong&gt;Promise.race()&lt;/strong&gt; method&lt;/p&gt;

&lt;p&gt;Let's say you're an online shopper and you've ordered multiple items from different vendors. You want to receive your purchases as soon as possible, without having to wait for all the packages to arrive. Instead, you could use Promise.race() to find out which package will be delivered first.&lt;/p&gt;

&lt;p&gt;Here's an example of how you might use Promise.race() in an online shopping scenario:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffwlxlx8sv6jiih23pw5b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffwlxlx8sv6jiih23pw5b.png" alt="Promise.race()" width="664" height="541"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, we use Promise.race() to find out which package will be delivered first, without having to wait for the others.&lt;/p&gt;

&lt;p&gt;Don't wait for the slowpokes, start using Promise.race() today and receive your purchases in record time!&lt;/p&gt;

&lt;p&gt;This example uses a deliver function that simulates the delivery time of a package, and an array of package objects with a name and delivery time. And we are using Promise.race() method to find out which package will be delivered first by resolving the promise when the first package is delivered.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>LeetCode Palindrome Number Solution in JavaScript</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Mon, 16 Jan 2023 15:26:52 +0000</pubDate>
      <link>https://dev.to/shubhamb/leetcode-palindrome-number-solution-in-javascript-3o0e</link>
      <guid>https://dev.to/shubhamb/leetcode-palindrome-number-solution-in-javascript-3o0e</guid>
      <description>&lt;p&gt;LeetCode:&lt;br&gt;
&lt;a href="https://leetcode.com/problems/palindrome-number/description/" rel="noopener noreferrer"&gt;Palindrome Number&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Problem statement:&lt;br&gt;
Given an integer x, return true if x is a &lt;br&gt;
palindrome, and false otherwise.&lt;/p&gt;

&lt;p&gt;Explanation:&lt;br&gt;
Two pointer approach is best here as we can traverse string from one pointer and decrease it from end of string and check if its same or not&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; /**
 * @param {number} x
 * @return {boolean}
 */
var isPalindrome = function(x) {
//convert integer to string
    const convertedString=x.toString();
//create left pointer and right pointer
    let left=0;
    let right=convertedString.length-1;
//iterate till condition meets
    while(left&amp;lt;=right){
//check left string is similar to right or not
        if(convertedString[left]!=convertedString[right]){
           return false;
        }
//increase left pointer and decrease right pointer
         left++;
         right--;
    }
    return true;
};
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>discuss</category>
    </item>
    <item>
      <title>LeetCode Two Sum problem Solution in JavaScript</title>
      <dc:creator>Shubham_Baghel</dc:creator>
      <pubDate>Sun, 15 Jan 2023 06:48:34 +0000</pubDate>
      <link>https://dev.to/shubhamb/leetcode-two-sum-problem-solution-in-javascript-4cpe</link>
      <guid>https://dev.to/shubhamb/leetcode-two-sum-problem-solution-in-javascript-4cpe</guid>
      <description>&lt;p&gt;&lt;strong&gt;Two Sum&lt;/strong&gt;&lt;br&gt;
LeetCode Link:[&lt;a href="https://leetcode.com/problems/two-sum/" rel="noopener noreferrer"&gt;https://leetcode.com/problems/two-sum/&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;Problem Statement:&lt;br&gt;
Given an array of integers Nums and an integer target, return indices of the two numbers such that they add up to target.&lt;br&gt;
You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order.&lt;/p&gt;

&lt;p&gt;Solution:&lt;br&gt;
&lt;em&gt;1.Brute Force:&lt;/em&gt;&lt;br&gt;
In this approach we are iterating  array with two loops where we are checking sum of first and next element with target if it matches then we are returning index of element. But in this case Time complexity will be O(N²)&lt;/p&gt;

&lt;p&gt;Code:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb6lg3urao7hzq9ihsfpt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb6lg3urao7hzq9ihsfpt.png" alt="Brute Force Approach" width="529" height="374"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;2.Map based Approach&lt;/em&gt;&lt;br&gt;
This solution is more optimize as we are using map and just checking finding out the required element which will be subtracted from current num of array. Here we are checking that element is present in map or not using Map.has() method.(Read more about Map.has() method of Map &lt;a href="https://dev.tourl"&gt;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/has&lt;/a&gt;)&lt;br&gt;
In Nutshell, We can utilize a HashTable to search for the required elements with pair.&lt;/p&gt;

&lt;p&gt;Code:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl1q3ro6rvfxjtclhit6m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl1q3ro6rvfxjtclhit6m.png" alt="Optimize Approach" width="605" height="430"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webcomponents</category>
      <category>webdev</category>
      <category>opensource</category>
      <category>discuss</category>
    </item>
  </channel>
</rss>
