DEV Community: Vishnu Satheesh

How to Deploy a Web Application Using Docker and NGINX on Your Own Server

Vishnu Satheesh — Sat, 31 May 2025 17:30:17 +0000

Deploying a web application doesn’t need to be a complicated process. With Docker, NGINX, and your own server, you can get your app live in no time.

In this blog, I’ll show you step by step how to serve your app with a domain, route traffic with NGINX, and run it all inside a Docker container. This guide is specifically tailored for a Linux-based server

Step 1 : Setup docker

First, let’s set up Docker. I’m using a simple React app as an example, but feel free to use any application or codebase of your choice. Create a Dockerfile in your project directory to define how your app should be containerized.

Docker file

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD [ "npm", "start" ]

Step 2 : Build and Run the Docker Container (on your server)

Once you’ve created your Dockerfile, the next step is to build your Docker image and run it to make sure everything is working as expected.

Open your terminal and navigate to your project directory, then run:

docker build -t my-react-app

This command builds the Docker image and tags it as my-react-app.

Now run the container:

docker run -d -p 3000:3000 my-react-app

This command runs the container in detached mode (-d) and maps port 3000 on your machine to port 3000 inside the container.

Once the container is running, visit http://your-server-ip:3000 in your browser. You should see your app running!

Step 3 : Setup NGINX

Next, let’s set up NGINX on the server to handle incoming requests and route them to our application.

Need help installing and configuring NGINX on your Ubuntu server?
👉 Check out my full guide: How to Set Up and Configure NGINX on Ubuntu

NGINX configuration files are typically located in the /etc/nginx directory.

• The main configuration file is nginx.conf.
• Site-specific configurations are usually stored in /etc/nginx/sites-available, and then enabled by creating symbolic links in /etc/nginx/sites-enabled.

This structure allows you to manage multiple site configurations cleanly and enable or disable them easily.

Step 1 : Create Configuration file

Create a new configuration file for your application:

sudo nano /etc/nginx/sites-available/myapp

Add the following configuration:

server {
    listen 80;
    server_name yourdomain.com;  

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Replace yourdomain.com with your actual domain name.

🔒 Using SSL? Here’s How to Enable HTTPS
update the configuration as shown below to enable HTTPS support.

server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;

    # Redirect all HTTP requests to HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name yourdomain.com www.yourdomain.com;

    ssl_certificate /etc/ssl/certs/your_cert.pem;
    ssl_certificate_key /etc/ssl/private/your_key.pem;

    location / {
        proxy_pass http://localhost:3000;  
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

🔐 Replace /etc/ssl/certs/your_cert.pem and /etc/ssl/private/your_key.pem with the actual paths to your SSL certificate and private key.

Step 2 : Enable the Configuration

Create a symbolic link in the sites-enabled directory to enable your NGINX site configuration:

sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/

Step 3 : Test & Restart NGINX

Before restarting NGINX, test the configuration for syntax errors:

sudo nginx -t

If the configuration test is successful, restart Nginx to apply the changes:

sudo systemctl restart nginx

Your application should now be accessible through Nginx at http://yourdomain

Conclusion

Deploying your web application using Docker and NGINX on your own server might sound intimidating at first, but once you break it down, it’s quite manageable.

By containerizing your app, setting up NGINX as a reverse proxy, and linking everything together on your VPS, you gain full control over your deployment process.

This setup not only helps you understand the internals of web hosting better but also gives you flexibility, performance, and cost savings in the long run.

If you found this guide helpful or have suggestions, feel free to drop a comment or reach out I’d love to hear from you! 😊

Happy coding and don’t forget to spread your smile everywhere you go! 😄

How to setup and configure NGINX on Ubuntu

Vishnu Satheesh — Sat, 24 May 2025 18:04:40 +0000

In this article, you will learn how to setup and configure NGINX on ubuntu, configuring the firewall, managing the NGINX service, and setting up server blocks to host multiple domains on a single server.

But seriously, what is NGINX, and why do we need it?

NGINX (pronounced "engine-x") is a powerful web server that helps deliver your website or app to users. When someone types your domain into a browser, NGINX takes that request and sends back your app or website.

But that’s not all, it can also act as a reverse proxy, meaning it takes incoming requests and passes them to another server (like your app running in Docker). It helps handle more traffic, load content faster, and even improves security.

Think of it like a smart traffic controller for your web application.

What You Need to Get Started

Before starting to setup, make sure you have a regular user with sudo privileges set up on your server. Additionally, having a registered domain name is optional, but it can be useful later.

So, let’s begin,

Step 1: Install NGINX

To get started, update your package list and install NGINX by running the following commands in your terminal:

sudo apt update
sudo apt install nginx

This will download and install NGINX on your server.

Once installed, NGINX should start running automatically. You can check its status using:

sudo systemctl status nginx

● nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/usr/lib/systemd/system/nginx.service; enabled; preset: enabled)
     Active: active (running) since Thu 2025-05-22 11:32:05 CEST; 2 days ago
       Docs: man:nginx(8)
    Process: 412781 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 412783 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 4007914 ExecReload=/usr/sbin/nginx -g daemon on; master_process on; -s reload (code=exited, status=0/SUCCESS)
   Main PID: 412784 (nginx)
      Tasks: 9 (limit: 76810)
     Memory: 27.7M (peak: 37.9M)
        CPU: 31.933s
     CGroup: /system.slice/nginx.service
             ├─ 412784 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
             ├─4007934 "nginx: worker process"
             ├─4007935 "nginx: worker process"
             ├─4007936 "nginx: worker process"
             ├─4007937 "nginx: worker process"
             ├─4007938 "nginx: worker process"
             ├─4007939 "nginx: worker process"
             ├─4007941 "nginx: worker process"
             └─4007942 "nginx: worker process"

May 22 11:32:04 vo systemd[1]: Starting nginx.service - A high performance web server and a reverse proxy server...
May 22 11:32:05 vo systemd[1]: Started nginx.service - A high performance web server and a reverse proxy server.
May 24 12:40:05 vo systemd[1]: Reloading nginx.service - A high performance web server and a reverse proxy server...
May 24 12:40:06 vo nginx[4007914]: 2025/05/24 12:40:05 [notice] 4007914#4007914: signal process started
May 24 12:40:06 vo systemd[1]: Reloaded nginx.service - A high performance web server and a reverse proxy server.

The output shows that NGINX is running successfully. But the easiest way to confirm it is by visiting your server’s IP address in a browser to see if the NGINX welcome page appears.

Step 2: Adjusting the Firewall (UFW)

If your server uses UFW (Uncomplicated Firewall), you'll need to allow NGINX traffic so that it can respond to incoming web requests.

UFW helps control which traffic is allowed or blocked from reaching your server. Think of it like a gatekeeper, it only lets through what you approve.

Step 1: Check Available NGINX App Profiles

Run this command to see what NGINX profiles are available:

sudo ufw app list

You’ll see a list of available application profiles:

Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS

Nginx HTTP: Allows only port 80 (non-secure HTTP)
Nginx HTTPS: Allows only port 443 (secure HTTPS)
Nginx Full: Allows both HTTP and HTTPS

Step 2: Allow NGINX Through the Firewall

To allow both HTTP and HTTPS traffic, run:

sudo ufw allow 'Nginx Full'

Step 3: Enable UFW (if it’s not already enabled)

sudo ufw enable

Step 4: Check the Status

sudo ufw status

You should see something like:

Status: active
To                         Action      From
--                         ------      ----
Nginx Full                 ALLOW       Anywhere

Step 3: Check NGINX in Browser

Open your browser and type your server’s IP address.

If you don’t know how to find the IP address of your server, run the following command:

hostname -I

Then, open your browser and type the IP address in the address bar.

If you see this page, it means NGINX is working properly and your server is set up correctly.

Step 3: Managing the NGINX process

Now that your web server is up and running, here are some basic commands to manage NGINX,

To stop the NGINX server, run:

sudo systemctl stop nginx

To start it again, use:

sudo systemctl start nginx

To restart the server (stop and start again in one command):

sudo systemctl restart nginx

To reload the configuration without stopping the server:

sudo systemctl reload nginx

To check if NGINX is running:

sudo systemctl status nginx

Step 4: Setting Up Server Blocks (Virtual Hosts)

Now that NGINX is up and running, let’s talk about how to host multiple websites on the same server using server blocks (also called virtual hosts).

Think of server blocks as a way for NGINX to know which website to show based on the domain name in the request. For example, you might want example.com to load one website and yourblog.com to load another, all from the same server and IP address.

Here’s a simple example to host a second site:

Step 1 : Create a directory for your website files

sudo mkdir -p /var/www/yourblog.com/html

Step 2 : Add an index.html file

echo "<h1>Welcome to Your blog</h1>" | sudo tee /var/www/yourblog.com/html/index.html

Step 3 : Create a new server block file

sudo nano /etc/nginx/sites-available/yourblog.com

Add the following content:

server {
    listen 80;
    server_name yourblog.com www.yourblog.com;

    root /var/www/yourblog.com/html;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Step 4 : Enable the configuration

sudo ln -s /etc/nginx/sites-available/yourblog.com /etc/nginx/sites-enabled/

Step 5 : Test NGINX and reload

sudo nginx -t
sudo systemctl reload nginx

Now, if you point yourblog.com to your server’s IP (via DNS or /etc/hosts), NGINX will show your custom website.

Conclusion

Setting up and configuring NGINX on Ubuntu is a crucial step in deploying modern web applications. Whether you're serving a simple static site or acting as a reverse proxy for complex backend services, NGINX offers performance, flexibility, and ease of management. In this guide, you learned how to install NGINX, configure the firewall, manage the service, and set up server blocks to host multiple websites on the same server.

With NGINX properly configured, your server is now equipped to efficiently handle web traffic, serve content securely, and scale with your application’s growth.

If you found this guide helpful or have suggestions, feel free to drop a comment or reach out I’d love to hear from you! 😊

Happy coding and don’t forget to spread your smile everywhere you go! 😄

If you’d like to connect or support my work:
📧 Feel free to reach out via email: getintouchwithvishnu@gmail.com

☕ If you found this helpful and want to support my content, you can donate : Buy me a Coffee

How to Set Up a CI/CD Pipeline with GitHub Actions for Automated Deployments

Vishnu Satheesh — Tue, 08 Apr 2025 12:43:48 +0000

In this article, you will learn how to implement continuous integration and continuous delivery in your repository using GitHub Actions to automate your development workflow.
To demonstrate this, I will use a simple Node.js app as our software product and deploy it to my personal VPS (Virtual Private Server) as the hosting environment.

But seriously, what is a CI/CD pipeline, and why do we need it?
Great question! Let’s break it down in simple terms.

What is a CI/CD pipeline?
CI/CD pipeline automates the process of building, testing, and deploying code whenever changes are made to a repository.

• Continuous Integration (CI) ensures that new code is automatically tested and merged.
• Continuous Delivery (CD) automates deployment, making sure the latest version of the software is always ready for release.

Why Do We Need It?
Without CI/CD, developers must manually test and deploy code, which is time-consuming, error-prone, and inefficient. A CI/CD pipeline speeds up the development cycle, reduces bugs, and ensures a smooth deployment process.

Imagine you have a project hosted on your VPS.

• With CI, every time you push code to GitHub, it automatically runs tests to check for errors.
• With CD, if all tests pass, your app automatically deploys to your VPS, keeping it up-to-date without manual intervention.

How Does It Work?
This is where GitHub Actions comes into play! As a popular CI/CD platform, GitHub Actions allows developers to automate the process of building, testing, and deploying applications directly within their GitHub repositories.

At the core of GitHub Actions are workflows, automated processes that execute one or more predefined tasks.

Workflows can be customized to fit specific needs, such as:
• Running tests for every pull request.
• Automatically deploying merged code to production.

These workflows are defined in a YAML file stored in your repository, ensuring that automation is seamlessly integrated into your development workflow.

Let’s Get Practical! 🚀
Now, let’s walk through the step-by-step process of setting up a CI/CD pipeline using GitHub Actions.

Step 1: Create Your Node js project
For this guide, I have already created a Node js app. You can create one yourself or use an existing project.

Step 2: Create a GitHub Repository
• Initialize a Git repository in your project.
• Push your project to GitHub (if you haven’t already).

Step 3: Set Up Secret Variables in GitHub

Follow these steps:

Go to your GitHub repository.
Click on the Settings tab.
In the left sidebar, navigate to Secrets and variables → Actions.
Click New repository secret.
Enter a secret name (e.g., DEPLOY_SSH_KEY, SERVER_IP, DOCKER_USERNAME).
Paste the secret value (e.g., SSH private key, API token) in the field.
Click Add secret.

These secrets can now be accessed in your GitHub Actions workflow using ${{ secrets.SECRET_NAME }}.

Step 4: Create the GitHub Actions Workflow
Create a new directory named .github/workflows in the root of your project if it doesn't exist already. Inside that, create a file named deploy.yml.

.github/workflows/

Now, define your CI/CD pipeline in that file:
deploy.yml

name: Deployment pipeline

on:
  push:
    branches:
      - main
    tags:
      - '*'

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20.8.1'

      - name: Install Dependencies
        run: npm install

      - name: Build Node Project
        run: npm run build

If you want to add a step to push the build to Docker Hub, you can create a separate job like the one below. This job handles building the Docker image and pushing it to your Docker Hub repository.

docker:
    name: Docker Build and Push
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      - name: Build Docker Image
        run: |
          docker build -t ${{ secrets.DOCKER_USERNAME }}/github-action-test:latest .

      - name: Push Docker Image
        run: |
          docker push ${{ secrets.DOCKER_USERNAME }}/github-action-test:latest

To set up Continuous Delivery (CD), you can use a GitHub Action plugin called appleboy/ssh-action. This plugin allows you to execute commands on your remote server using SSH credentials. By using this plugin, you can stop and remove the existing Docker container, pull the latest image from Docker Hub, and start the updated container, all automatically.

deploy:
    name: Deploy to Remote VPS
    runs-on: ubuntu-latest
    needs: docker

    steps:
     - name: Deploy to Remote Server
        uses: appleboy/ssh-action@v1.2.0
        with:
            host: ${{ secrets.REMOTE_HOST }}
            username: ${{ secrets.REMOTE_USER }}
            password: ${{ secrets.SSH_PRIVATE_KEY }}
            script: |
              echo "Navigating to the Docker Compose file directory"
              cd /path to your repo/ 
              echo "Stopping and removing any running containers"
              docker stop <container name>
              docker rm <container name>
              echo "Removing the old Docker image"
              docker rmi -f <latest image>|| true
              echo "Logging into Docker Hub on the remote server"
              echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
              echo "Pulling the latest image"
              docker compose up --build -d

Final example code look like this,

name: Build and Deploy to Staging

on:
  push:
    branches:
      - main
    tags:
      - '*'

jobs:
  build:
    name: Build node js project
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20.8.1'

      - name: Install Dependencies
        run: npm install

      - name: Build React App
        run: npm run build

  docker:
    name: Docker Build and Push
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Checkout Code
        uses: actions/checkout@v3

      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

      - name: Build Docker Image
        run: |
          docker build -t ${{ secrets.DOCKER_USERNAME }}/github-action-test:latest .

      - name: Push Docker Image
        run: |
          docker push ${{ secrets.DOCKER_USERNAME }}/github-action-test:latest

  deploy:
    name: Deploy to Remote VPS
    runs-on: ubuntu-latest
    needs: docker

    steps:
      - name: Deploy via SSH
        uses: appleboy/ssh-action@v1.2.0
        with:
          host: ${{ secrets.REMOTE_HOST }}
          username: ${{ secrets.REMOTE_USER }}
          password: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            echo "Navigating to the Docker Compose file directory"
            cd /path to your repo/ 
              echo "Stopping and removing any running containers"
              docker stop <container name>
              docker rm <container name>
              echo "Removing the old Docker image"
              docker rmi -f <latest image>|| true
              echo "Logging into Docker Hub on the remote server"
              echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
              echo "Pulling the latest image"
              docker compose up --build -d

Step 5: Set Up runners

When working with GitHub Actions, runners are the environments where your workflows are executed. There are 2 types of runners,

GitHub-Hosted Runners
Self-Hosted Runners

GitHub-Hosted Runners
GitHub-hosted runners are virtual machines provided and managed by GitHub. You don’t need to set up or maintain anything, GitHub automatically spins up a fresh, secure, and isolated environment for each job in your workflow. These are great for most CI/CD use cases and are available with minimal effort.

You can choose from environments like:
• ubuntu-latest
• windows-latest
• macos-latest

Since everything is managed for you, they’re perfect for quick setup and standard workflows. However, they offer limited customization and might be slower for resource-intensive builds. Also, there are usage limits, especially for private repositories.

Self-Hosted Runners
Self-hosted runners are machines that you manage like your personal VPS, local server, or a cloud VM and you register them with your GitHub repository or organization. Once configured, GitHub can offload workflow jobs to your own infrastructure.

This gives you full control over the environment, which means you can pre-install dependencies, allocate more memory, and fine-tune it to your exact needs. They're especially useful in private or restricted environments where public GitHub-hosted runners aren't suitable.

They also provide faster execution for repeated builds because the environment is persistent, unlike GitHub-hosted runners that spin up fresh VMs every time. But keep in mind, you’re also responsible for the runner’s security, maintenance, uptime, and scalability all of which require a bit more setup and ongoing management.

Now, we are going to see how to setup self-hosted runner,

Follow these steps:

Go to your GitHub repository.
Click on the Settings tab.
In the left sidebar choose Actions → Runners.
Click on the New self-hosted runner button

Choose the runner image
Copy and paste the setup commands provided by GitHub into your server terminal to register the runner with your repository or organization

Step 6: Test Your CI/CD Pipeline

Now that everything is set up:

Make a change in your Node.js project.
Push it to the main branch of your GitHub repository.
Navigate to the Actions tab in your GitHub repo and observe the workflow.
If everything is set up correctly, GitHub Actions will SSH into your VPS and deploy the latest code automatically.

And that’s it, you’ve just built a fully functional CI/CD pipeline using GitHub Actions! From writing and testing code to building Docker images and deploying them to your VPS, everything is now automated and streamlined.

By setting up this workflow, you’ve taken a major step toward modern DevOps practices. You’ll spend less time on manual deployments, reduce errors, and ship faster with confidence. Plus, with the flexibility of custom runners, your pipeline can grow alongside your project’s infrastructure needs.

CI/CD isn’t just for big companies anymore — thanks to tools like GitHub Actions, it’s accessible to everyone. So go ahead, experiment, and scale your automation to the next level.

Thanks for reading! If you have any feedback, questions, or suggestions to improve this article, feel free to leave a comment — I’d love to hear from you.

Happy coding and don’t forget to spread your smile everywhere you go! 😄

If you’d like to connect or support my work:
📧 Feel free to reach out via email: getintouchwithvishnu@gmail.com

☕ If you found this helpful and want to support my content, you can donate : Buy me a Coffee

Top 5 HTML Tricks Every Developer Should Know

Vishnu Satheesh — Sat, 08 Mar 2025 21:00:58 +0000

HTML is more powerful than many developers realize! Beyond structuring web pages, it offers some hidden tricks that can enhance user experience and add useful functionalities with minimal effort.
In this article, we'll explore five amazing HTML tricks that can refresh pages automatically, enable voice recognition, disable right-click, provide a color picker, and even access the user's camera. Let’s dive in!

Time Page Refreshes & Redirect

You can add a special <meta> tag inside your document's head to refresh the page at a set interval or to redirect users to different websites after a set delay.

<meta http-equiv="refresh" content="30">

<meta http-equiv="refresh" content="30;https://google.com">

Add Voice Recognition

Voice Recognition : This tricks is used to add voice search in the input field. Like Google search, it searches on by voice recognition.

Note : This will only work on mobile devices(Lolipop only Google Chrome).

<input type="text" x-webkit-speech />

Disable Right Clicking

Sometimes you might want to disable the context menu of the browser on your web page when the user right clicks ! This can easily be done using a simple trick !

Prevent right clicking the entire web page

<body oncontextmenu="return false">

Prevent right clicking a specific element

<section oncontextmenu="return false">Not Allowed</section>

Add Color Picker

This is a really cool HTML trick!

with HTML5, there are some really interactive customizations that visitors to your website will like.

This feature will be particularly user-friendly for those new to coding or without a lot of coding knowledge.

<b>Color picker in input field: </b>
<input type="color">

Capturing The User's Camera

For those who are on mobile devices, you can use the <input /> tag with a capture attribute to open the user's cameras and allow them to take a photo or video to upload to your website! On desktop, the default behavior of uploading files is kept!

Opens back facing camera to take a video

<input type="file" capture="environment" accept="video/*">

Opens front facing camera to take a photo

<input type="file" capture="user" accept="photo/*">

These simple yet powerful HTML tricks can help you create more interactive and user-friendly web pages without relying on complex JavaScript or third-party plugins.

Whether you're looking to enhance usability, improve accessibility, or add some fun features, these techniques are a great addition to your toolkit. Try them out and see how they can improve your web projects! 🚀

💡 Let’s Connect!
📩 Email me at: getintouchwithvishnu@gmail.com
☕ Support my work: Buy me a Coffee

React 19 Hooks Explained: Everything You Need to Know

Vishnu Satheesh — Sat, 01 Mar 2025 20:46:10 +0000

React 19 comes with some awesome new hooks that make handling common tasks in React development way easier. These hooks focus on things like state management, form handling, and working with async updates.
Here’s a quick look at the new hooks in this update:

Hook Name	Description
useFormState()	Manages form data and state efficiently.
useFormStatus()	Tracks the status of form submission.
useActionState()	Simplifies managing async actions.
useOptimistic()	Handles optimistic UI updates.
use()	Allows awaiting promises inside components.

In this guide, we’ll dive into how we used to handle these processes before these hooks came along, and we’ll see how these new hooks make everything smoother and more efficient. Let’s get into it!

useFormState()

Before React 19, to manage form data, you would typically use a useState for each form field or create one state object for all fields. This meant writing a custom onChange for each field to manually update the state, which could get complicated, especially with larger forms.

Now, with the new useFormState() hook in React 19, managing form data is much easier. It tracks all form inputs in one place and automatically updates the state when any field changes.

This means you don’t need separate state handlers for each input field anymore. Everything stays in sync and is much cleaner, especially for more complex forms.

For example: Older way of handling form field states

import { useState } from 'react';

function ProfileForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch('/api/profile', { method: 'POST',
    body: JSON.stringify({name, email}) }); 
  };

return (
  <form onSubmit={handleSubmit}>
    <input 
      name="name"
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Name"
     />
    <input 
      name="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      placeholder="Email"
     />
    <button type="submit">Submit</button>
 </form>
)

}

For example: With useFormState() hook

import { useFormState } from 'react';

function ProfileForm() { 
  const [formData, setFormData] = useFormState({
   name: '',
   email: ''
  });

 const handleChange = (e) => {
   setFormData({ ...formData, [e.target.name]: e.target.value });
 }

 const handleSubmit = () => {
   // Handle form submission with the entire formData object
 }

 return (
   <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleChange} />
       <input name="email" value={formData.email} onChange={handleChange} />
       <button type="submit">Submit</button>
    </form>
 );
}

useFormStatus()

Before React 19, developers had to use multiple state variables (like loading, error, success, submitting, etc.) to track and manage the status of a form. This made the code more complex, especially when trying to disable the submit button or show a loading indicator.

In React 19, the useFormStatus() hook simplifies this process. It helps you easily track the form's status (whether it's submitting, submitted, idle, or has an error). This makes it much easier to manage things like showing a loading spinner or disabling the submit button.

For example: Older way of handling form submission

import { useState } from 'react';

function ProfileForm() {
  const [name, setName] = useState('');
  const [pending, setPending] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setPending(true);
    await fetch('/api/profile', { method: 'POST',
    body: JSON.stringify({name, email}) }); 
    setPending(false);
    setName("");
  };

return (
  <form onSubmit={handleSubmit}>
    <input 
      type="text"
      name="name"
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="Enter Name"
     />
    <button type="submit">Submit</button>
    {pending && <p> Submitting {name} ... </p>}
 </form>
)

}

Example: Using the useFormStatus Hook

import { useFormStatus } from ' react ' ;

function LoginForm() {
   const { pending, data, method, action } = useFormStatus();

   const handleSubmit = async ( event ) => {
      event.preventDefault();
      // Simulate form submission with fetch  or other method
};

   return (
      <form method="POST" action="/login" onSubmit={ handleSubmit }>
         <h3>Login</h3>
         <label>
            Username:
            <input name="username" type="text" required/>
         </label>
         <label>
            Password:
            <input name="password" type="password" required/>
         </label>
         <button type="submit" disabled={pending}>
            { pending ? 'Logging in....'  : 'Login' }
         </button>

         { /* Display success message if data is available */ }
         {data && <p>Welcome back, {data.username}!</p>}

         { /* Display form metadata for debugging purposes */ }
         <p>Form Method: {method}</p>
         <p>Form Action: {action}</p>
      </form>
   );
}

The useFormStatus hook helps you manage a form's state in a user-friendly way. It provides useful properties like pending, data, method, and action, allowing you to improve the user experience with loading indicators, success messages, and error handling.

Here's what each property does:

pending: A boolean that is true while the form is submitting and false once it's done.
data: Stores any response data from the form submission.
method: Shows the HTTP method used (e.g., POST or GET).
action: The URL or endpoint where the form is submitted.

useActionState()

In earlier versions of React, handling asynchronous action states often required using multiple useState variables to track the status of each operation:

import { useState } from ' react ';

function SubmitButton() {
   const [ isSubmitting, setIsSubmitting ] = useState(false);
   const [ error, setError ] = useState(null);
   const [ success, setSuccess ] = useState(false);

   const handleSubmit = async() => {
   setIsSubmitting(true);
   setError(null);
   setSuccess(false);
   try {
      await fetch('/api/submit' , { method: 'POST' });
      setSuccess(true);
   } catch(err) {
      setError('Submission failed');
   }   
   }  finally {
      setIsSubmitting(false);
   }   
};

   return (
      <div>
         <button onClick= {handleSubmit} disabled= {isSubmitting }>
            { isSubmitting ? 'Submitting ... ' : 'Submit' }
         </button>
         { error && <p>{ error }</p> }
         { success && <p>Success!</p> }
      </div>
   );
}

The useActionState is a generalized hook designed to manage the lifecycle of these actions or tasks in a more streamlined way, by providing a standardized way to manage and respond to each stage of the operations.

It helps maintain a clear, controlled flow in UI updates, especially when actions need to track multiple statuses like "idle," "loading," "success," or
"error."

Using our example above, the useActionState hook will help simplify this pattern by encapsulating the various states of an action into a single hook, allowing you to handle the loading, success, and error states more concisely.

Example: Using the useActionState Hook

import { useActionState } from 'react'

function SubmitButton() {

   const [submitStatus, performSubmit] = useActionState(async () => {
    await fetch('/api/submit', { method: 'POST' });
});

   return (
    <div>
      <button onClick={performSubmit} disabled={submitStatus.isLoading}>
    {submitStatus.isLoading ? 'Submitting ...' : 'Submit'}
      </button>
    {submitStatus.error && <p>{submitStatus.error.message}</p>}
    {submitStatus.isSuccess && <p>Success!</p>}
   </div>
  );
}

With useActionState:

submitStatus is an object that contains properties like isLoading, isSuccess, and error, which you can use to conditionally render UI based on the action's current state.
performSubmit is the function to invoke the action, which automatically updates submitStatus.
There's no need for additional state variables or manual error handling in the UI logic, reducing code complexity and making it more readable.

useOptimistic()

Before React 19, to create optimistic UI updates, where changes appear instantly before server confirmation, we often used a mix of state variables and asynchronous functions.

For instance, we'd set a state variable to indicate an immediate UI update, then send the API request and update the state again based on the response.
This approach was functional but required a lot of boilerplate code and error handling to ensure consistency between UI and server state.

In React 19, the useOptimistic hook simplifies this by providing an easy way to handle optimistic updates.
This hook allows you to update the UI immediately, even as the actual server confirmation is pending.
If the server request fails, useOptimistic can be configured to revert the state, thus providing a smooth experience with minimal code.

For example: Older way of handling optimistic update

import { useState } from 'react'

function LikeButton({ postId }) {
  const [isLiked, setIsLiked] = useState(false);
  const [error, setError] = useState(null);

  const handleLike = async () => {
   // Update state immediately
    setIsLiked(!isLiked);

   try{
    // Make the API call
     await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
   } catch (err) {
   // Revert state if an error occurs
    setIsLiked(isLiked);
    setError('Failed to update like status');
   }
 };

 return (
  <div>
    <button onClick={handleLike}>
      {isLiked ? 'Unlike' : 'Like'}
    </button>
      {error && <p>{error}</p>}
  </div>
 );
}

With the useOptimistic hook, React 19 simplifies this pattern by automatically managing an optimistic state. It allows you to update the UI instantly without needing extra error-handling code, making your components cleaner and more efficient.

Use()

In earlier versions of React, handling asynchronous tasks like data fetching within components typically required useEffect and useState. This often resulted in complex, nested logic, especially when managing loading and error states.

With React 19, the new use hook simplifies this process by allowing you to directly await a promise inside components. This eliminates the need for extra useEffect and useState code, making data fetching feel more like synchronous code. The result? Cleaner, more readable, and maintainable components.

Example: asynchronous data fetching using useEffect and useState hooks.

import { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch('/api/user');
        const data = await response.json();
        setUser(data);
       } finally {
         setLoading(false);
       }
      };
       fetchUser();
     },[]);

 if (loading) return <p>Loading ... </p>;
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div> 
  );
}

Example: Using the new use() hook for asynchronous fetching

import { use } from 'react'

async function fetchUser() {
  const response = await fetch('/api/user');
  return response.json();
}

function UserProfile() {
  const user = use(fetchUser());

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

React 19 introduces a powerful set of hooks that make state management, form handling, and asynchronous operations easier than ever. With hooks like useFormState, useFormStatus, useActionState, useOptimistic, and use, React now provides more intuitive and efficient ways to handle complex UI interactions with less boilerplate code.

By leveraging these new hooks, you can write cleaner, more readable code while improving the user experience in your applications. Keep exploring these features to stay ahead in modern React development!

Happy coding! 🚀

💡 Let’s Connect!
📩 Email me at: getintouchwithvishnu@gmail.com
☕ Support my work: Buy me a Coffee

Top 7 React Hooks you must know

Vishnu Satheesh — Sat, 22 Feb 2025 19:43:29 +0000

React hooks have revolutionized the way we manage state and side effects in React functional components. With hooks, we can encapsulate reusable logic and share it across components, leading to cleaner and more modular code.
In this article, we'll explore the top 7 React hooks that every React developer should know about. Whether you're just getting started with React or looking to level up your skills, understanding these hooks will empower you to build more efficient and maintainable React applications. Let's dive in!

useState()

useState is a React Hook that lets you add a state variable to your component which returns an array with two values.

Current State
Set Function

You can pass on initial value as well like in the example:- 28 and 'Taylor'

import { useState } from 'react';

function myComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
}

useMemo()

useMemo is a React Hook that lets you cache the result of a calculation between re-renders which prevents the unnecessary renders in your React Application.

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
   () => filterTodos(todos, tab),
   [todos, tab]
  );
}

useId()

useId is a React Hook for generating unique IDs that can be passed to accessibility attributes,
Accessibility attributes let you specify that two tags are related to each other where you can use useId() generated id instead of hardcoding them.

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();

  return (
   <>
    <input type="password" aria-describedby={passwordHintId />
    <p id={passwordHintId}>
   </>
  )

useCallback()

useCallback is a React Hook that lets you cache a function definition between re-renders.
useCallback cache a function and useMemo cache a value/result of a calculation

import { useCallback } fom 'react';

export default function ProductPage({ productId, referrer, theme }) {
  const handleSubmit = useCallback((orderDetails) => {
   post('/product/' + productId + '/buy' {
    referrer,
    orderDetails,
    });
   }, [productId, referrer]);

useEffect()

useEffect is a React Hook that lets you perform side-effects in the component. Side effects basically is an action which connects the component to the outside world.

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => {
   connection.disconnect();
  };
 }, [serverUrl, roomId]);
}

useRef()

useRef is a React Hook that lets you reference a value that's not needed for rendering.
Basically its like useState but the only difference is useRef doesn't cause a re-render when the value changes.

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  const inputRef = useRef(null);
}

useContext()

useContext is a React Hook that lets you read and subscribe to context from your component just like a data store (Redux)
useContext hook mets you to read the data stored in a context which is a data store
This example is just to demonstrate useContext hook not creating a Context

import { useContext } from 'react';

function MyComponent() {
  const theme = useContext(ThemeContext);
}

React hooks are a game-changer for React developers, offering a straightforward way to manage state and side effects in functional components. By mastering the top 7 hooks discussed here, you'll be better equipped to build efficient and maintainable React applications. Keep exploring and leveraging the power of hooks to enhance your React development journey.
Happy coding!🚀

💡 Let’s Connect!
📩 Email me at: getintouchwithvishnu@gmail.com
☕ Support my work: Buy me a Coffee

Top 5 AI Tools in 2025

Vishnu Satheesh — Sat, 15 Feb 2025 19:43:42 +0000

AI is revolutionizing productivity, making complex tasks simpler and more efficient. In this post, I’ll share my top 5 AI tools that can help you with coding, content creation, project management, and business automation. Whether you're a developer, marketer, or entrepreneur, these tools will streamline your workflow and save you time.
Let's dive in:

Codium.ai

I've been using this tool for a while now, and it has completely changed the way I handle code quality. It not only analyzes my code but also generates meaningful test cases and helps me catch bugs before deployment. Creating test suites has never been easier, it works with any programming language and integrates seamlessly with my favorite IDEs like VSCode and IntelliJ. If you're serious about writing reliable code, this is a game-changer!

Copy.ai

Copy.ai is an AI-powered writing tool that helps businesses and marketers create high-quality content effortlessly. It generates engaging copy for emails, ads, blogs, social media, and more saving time and eliminating writer’s block.

Softr.io

Softr.io makes app development effortless, even for non-developers. With its no-code, AI-driven platform, you can turn Airtable, Google Sheets, or SmartSuite into fully functional client portals, internal tools, and web apps without any coding skills required. Whether you're a business owner, freelancer, or entrepreneur, Softr.io helps bring ideas to life quickly and efficiently.

Notion.so

Notion.so is an all-in-one workspace that helps individuals and teams organize, collaborate, and manage tasks efficiently. It combines note-taking, project management, databases, and team collaboration into a single platform.

Bizway.io

Bizway.io is an AI-powered platform designed to help businesses automate tasks, streamline workflows, and improve productivity without the need for coding. It offers a range of AI assistants that can handle various business functions, including marketing, financial management, content creation, and strategy planning. Users can build custom AI agents to manage repetitive tasks, generate business plans, and assist with customer engagement, making it a valuable tool for entrepreneurs, startups, and growing businesses

These AI tools offer a wide range of features to enhance productivity, streamline workflows, and automate tasks effortlessly. Whether you're a developer, marketer, or entrepreneur, there's an AI-powered solution on this list to help you work smarter and more efficiently.

Have you tried any of these tools? Do you have a favorite AI tool that’s not on the list? Share your thoughts and recommendations in the comments below!

Choosing the right AI tool can make a huge difference in your workflow and business success. Explore these options and find the one that best fits your needs.

Happy automating! 🚀

💡 Let’s Connect!
📩 Email me at: getintouchwithvishnu@gmail.com
☕ Support my work: Buy me a Coffee

How to Use Context Manager Pattern in JavaScript for Efficient Code Execution

Vishnu Satheesh — Thu, 10 Oct 2024 20:46:12 +0000

Today, while working on a project, I encountered a use case where I needed to perform an operation at both the start and end of a function. This scenario was recurring in many other functions as well. After some research, I came across the Context Manager pattern, which is commonly used in Python to handle setup and cleanup operations around code execution.
However, since I'm working in JavaScript, I explored ways to implement a similar pattern. In this post I will share some of those methods.

1. Using Functions with try/finally

You can create a function that accepts another function as a parameter, performs setup before it, and cleanup after it using try and finally.

function contextManager(doWork) {
  console.log('Setup: entering the context');

  try {
    doWork();
  } finally {
    console.log('Cleanup: leaving the context');
  }
}

// Using the context manager
contextManager(() => {
  console.log('Doing some work inside the context');
});

output

Setup: entering the context
Doing some work inside the context
Cleanup: leaving the context

2. Using a Class with a try/finally

If you prefer an OOP approach, you can also implement this pattern using a class.

class ContextManager {
  enter() {
    console.log('Setup: entering the context');
  }

  exit() {
    console.log('Cleanup: leaving the context');
  }

  run(fn) {
    this.enter();
    try {
      fn();
    } finally {
      this.exit();
    }
  }
}

// Usage
const manager = new ContextManager();
manager.run(() => {
  console.log('Doing some work inside the context');
});

3. Using contextlib library

This contextlib library in JavaScript provides a Python-like with statement for managing resource setup and cleanup using objects with enter and exit methods.

const { With } = require("contextlib");

class Manager {
    enter() {
        console.log("setting up...");
    }
    exit() {
        console.log("cleaning up...")
    }
}

// Usage
With(new Manager(), () => {
    console.log("inside context");
})

Output

setting up...
inside context
cleaning up...

In this post, we've explored how to implement the Context Manager pattern in JavaScript, inspired by its usage in Python. By using various approaches, including functions with try/finally, classes, and the contextlib library, you can effectively manage setup and cleanup operations around your code. This pattern not only enhances code readability but also ensures that resources are properly handled, making your applications more robust and error-resistant.

By applying these techniques, you can simplify your code and create a more organized structure for managing resource-intensive tasks. Whether you prefer a functional or an object-oriented approach, there's a method to suit your coding style.

I encourage you to experiment with these patterns in your own projects and see how they can improve your code management. If you have any opinions, questions, or additional methods to share, please leave a comment below. Happy coding!🚀

How to Build Reusable List Components in React with Custom Render Functions?

Vishnu Satheesh — Mon, 23 Sep 2024 19:26:33 +0000

When working in React, it's common to have a list component that accepts data and maps over each item to display it. However, different parts of your application may require different renderings for the same data. The best solution for this is to make your list component more flexible by using a render prop to pass a custom rendering function.

Why Is This Necessary?

Imagine you have a list of users in your application. In some areas, you want to display just the user names, and in others, you need to show more detailed information like email addresses or profile pictures. Creating multiple list components for each use case can lead to duplicated code and make the project harder to maintain.

What's the solution?

A simple and elegant solution is to have your list component accept a renderItem function. This function takes an individual item (in our case, a user) as an argument and returns a React node that can be rendered in any way you want.

import React from 'react';

const List = ({ data, renderItem }) => {
  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>
          {renderItem(item)}
        </li>
      ))}
    </ul>
  );
};

export default List;

How to use this component?

import List from './List';

const users = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
];

const UserList = () => {
  return (
    <List
      data={users}
      renderItem={(user) => <span>{user.name}</span>}
    />
  );
};

// or 

const DetailedUserList = () => {
  return (
    <List
      data={users}
      renderItem={(user) => (
        <div>
          <strong>{user.name}</strong>
          <p>{user.email}</p>
        </div>
      )}
    />
  );
};

Why this is a Great Pattern?

This pattern allows for maximum flexibility with minimal code duplication. Instead of creating a different list component for every use case, you have one list component that can handle any rendering requirement.

If you've worked with React Native, this pattern should feel familiar, as it’s used in their list components like FlatList. It’s a proven, reliable solution for rendering lists.

By allowing your list component to accept a renderItem prop, you can easily create reusable components that adapt to different parts of your application. This approach simplifies your codebase, makes it easier to maintain, and enhances the scalability of your application.

Now that you’ve learned this pattern, give it a try in your React projects, and you’ll see how powerful and flexible it is! Happy coding🚀

Master the Art of Focus: Proven Strategies for Programmers to Boost Productivity

Vishnu Satheesh — Mon, 16 Sep 2024 20:39:27 +0000

Want to boost your productivity as a programmer? Discover key strategies to enhance focus and efficiency in your workday. In this blog, we’ll cover how to create a distraction-free zone, stay focused on tasks, and avoid common pitfalls like social media distractions.
Whether you're looking to improve your workflow or find new ways to stay productive, these tips will help you work smarter and achieve more. Let’s get started!

Create a Distraction-free Zone

When you are working on a project, try to create a distraction-free zone for maintaining focus. Turn off your mobile or set it to silent. Disable the notifications, messages, and email alerts on your pc. Creating a distraction-free zone helps you stay immersed in your task.

If you're deeply focused on a task, consider wearing headphones with some background music. This can help create a distraction-free environment by minimizing interruptions from colleagues. We can refer to this as 'wired mode.' However, be mindful not to stay in wired mode for more than an hour at a time, as extended periods may impact your relationships with colleagues.
It's important to balance focus with occasional breaks to maintain good workplace interactions.
Additionally, close unnecessary browser tabs, email, and social networking sites like Instagram, Facebook, and Twitter that generate constant notifications. Implementing these strategies for just a day or two can lead to a noticeable boost in performance.

Stay in the zone

One of the most effective techniques that I have found is to stay in the zone. It means breaking down a task into smaller pieces and doing them one by one at a time. Once you have your task list ready, pick one task and complete it. Forget about the bugs and unfinished features in the rest of the codebase – they’re on the list and you’ll get to them later. Right now all that counts is this one task.
It sounds simple, but our brains are wired to multitask, whether we realize it or not. Training yourself to focus on just one thing at a time is a skill that takes practice. But once you master it, it’s a game changer. This technique has been a lifesaver for me, though I’ve seen a lot of developers struggle with it. So, let’s dive into a few everyday scenarios where isolation can make a big difference, and how you can start applying it to your workflow.

For Example, Vicky is deep into working on a critical task when a brilliant idea for a new feature suddenly pops into his head. It’s exciting, and he’s tempted to dive right in and start building it. But Vicky knows that shifting his focus can derail his progress. Instead of getting sidetracked, he quickly jots down the idea and stays committed to his current task.
He understands that the new feature can be explored later, but for now, he keeps his attention on completing his original goal. By staying focused, Vicky ensures he finishes his work efficiently and on time.

Avoid Social Media Distractions

Social media can be a major productivity killer. It's crucial to avoid checking social media during work hours. This isn’t to say you should remove social media from your life altogether, but rather to use it during your free time, not while working.

For example, imagine my friend Vicky is working on an important task and receives a message on Instagram. He feels a sudden urge to check the message, which leads him to open it and reply.
While doing so, he encounters suggestions for videos and statuses.
Curiosity gets the best of him, and he ends up spending around 15 minutes watching these videos instead of focusing on his work. That single reply to a message resulted in a significant loss of time. If Vicky had waited until he completed his task to check social media, he could have avoided this interruption. This illustrates how social media can disrupt your workflow and impact productivity.

Establish a Productive Routine

Establishing a productive routine is crucial for maintaining focus and high performance throughout the day. Structuring the day with specific routines can make a significant difference. For instance, starting the morning with deep work—coding, solving technical issues, and developing new algorithms—when mental energy is at its peak is highly effective.
These hours are reserved for tasks that require intense concentration. Later in the day, when energy levels dip, shifting to shallow work like responding to emails and attending team meetings helps balance the workload and prevent burnout. Incorporating short breaks and ending the day with a quick reflection to plan for the next day ensures continued productivity and focus. Adopting such a routine can significantly boost workday efficiency and help maintain high performance.

Commit the Tasks on Git Properly

Proper version control practices are essential for maintaining productivity and ensuring project integrity. When working on tasks, it’s important to commit changes to Git in a structured and organized manner. Start by making frequent, small commits that capture meaningful progress and address specific changes or issues. This approach not only helps in tracking the evolution of the project but also facilitates easier debugging and collaboration. Use clear and descriptive commit messages to provide context for each change, which is invaluable for both current and future work.
Avoid committing large batches of changes or including unrelated updates in a single commit, as this can make tracking and reverting changes more difficult. By committing tasks properly, developers can ensure that their work is well-documented, maintainable, and aligned with the overall project goals.

Mastering focus and productivity is essential for any programmer looking to enhance their performance and work efficiently. By creating a distraction-free zone, staying concentrated on one task at a time, avoiding social media distractions, establishing a productive routine, and committing tasks on Git effectively, you can significantly improve your workflow and achieve more in less time.

The strategies discussed in this blog are drawn from various books, blogs, advice from experienced professionals, and my own experiences. Each individual’s journey is unique, and there are multiple perspectives on how best to stay productive. I encourage you to try these tips and adapt them to your own work style.

I’d love to hear your thoughts and experiences on these strategies. Do you have any additional tips or personal methods that have worked well for you? Please share your views in the comments!

Top Free Chrome Extensions You Need to Download Today

Vishnu Satheesh — Mon, 15 Jul 2024 12:04:31 +0000

In today's digital age, having the right tools can make your online experience more productive and enjoyable. Whether you're a student, professional, or casual web user, Chrome extensions can help. With so many options, it can be hard to find the best ones. That's why we've made a list of must-have free Chrome extensions. These tools will boost your efficiency, improve security, and let you customize your browser.

Read on to find out which Chrome extensions you should download today!

Night Eye

Activate the dark mode option in any website that you can imagine.

BuiltWith

This Chrome Extension lets you find out what a website is built with by a simple click!

Color Picker

Pick colors from web pages with Eyedropper. Color picker, gradient generator, color palette.

Go Full Page

The simplest way to take a full page screenshot of your current browser window.

WhatFont

Identify any fonts on web pages, with one simple click.

CSS Pepper

No more digging in a code. Inspect styles in simple, well-organized & beautiful way.

Mobile Simulator

Smartphone and tablet simulator on computer with several models to test mobile responsive websites.

The right Chrome extensions can greatly enhance your online experience, making your browsing more efficient, secure, and enjoyable. The must-have free Chrome extensions we've highlighted are essential tools that cater to a wide range of needs, from productivity to customization.

By downloading and utilizing these extensions, you'll be well-equipped to navigate the digital world with ease and efficiency. So, don't wait—explore these extensions today and transform the way you use your browser!

React JS Fragments

Vishnu Satheesh — Wed, 17 Apr 2024 04:44:56 +0000

In the realm of React development, simplicity often translates to efficiency. Enter React Fragments - a lightweight yet powerful feature that streamlines the way we structure components.
In this article, we'll explore how React Fragments provide a straightforward solution for organizing elements without unnecessary wrapper divs, enhancing code readability and maintainability.
Let's embark on a journey to uncover the simplicity and versatility of React Fragments.

React Fragment is a feature that allows to group multiple elements without adding extra DOM wrappers. Useful to return multiple elements from a component's render method without extra containers.

With React 16.2 and above Fragments you can use a fragment to avoid adding the extra wrapper, Fragments are denoted by the special syntax:

<React.Fragment> or
<> and </> the shorthand

Without Fragments

Prior to React 16.2, you had to wrap them in a single parent element.
For example :

import React from "react";

const MyComponent = () => {
  return (
     <div>
       <h1>Hello</h1>
       <p>World!</p>
     </div>
  );
};

export default MyComponent;

With Fragments (Shorthand)

A Fragment is simply an empty element that acts as a container for other elements without rendering any additional DOM nodes.

import React from 'react';

const MyComponent = () => {
  return (
     <>
       <h1>Hello</h1>
       <p>World!</p>
     </>
  );
};

export default MyComponent;

With Fragments (Key Prop)

Fragments can also have a Key prop, just like any other React element. The key prop is useful when you're dynamically rendering lists of fragments with <React.Fragment>

import React from 'react';

const MyListComponent = ({ items }) => {
  return (
    <>
      {items.map((item) => (
        <React.Fragment key={item.id}>
           <span>{item.name}</span>
        </React.Fragment>
       ))}
    </>
  );
};

export default MyComponent;

If Not Using Fragments

Extra Dom nodes :
Using a regular container introduces additional DOM nodes in the rendered output, which can lead to increased memory usage and slightly slower rendering.
CSS conflicts :
If the wrapper elements has it's own CSS styles or classes, they might unintentionally affect the layout or styles of the child elements inside the component.
Semantic impact :
Sometimes, adding extra wrapper elements can change the sematic structure of the document, which might not be desirable from an accessibility standpoint.
Nesting depth :
Repeatedly nesting elements within multiple containers may make the component tree deeper, potentially affecting performance and readability.

React Fragments offer a straightforward and elegant solution for structuring components in React applications. By eliminating the need for extra wrapper elements, they contribute to cleaner code and a more efficient development process.

Stay tuned for more insights and practical tips🚀