DEV Community: Sagnik Ghosh

Building a Secure Bastion Host Architecture in AWS: A Complete Step-by-Step Guide

Sagnik Ghosh — Sun, 28 Dec 2025 20:18:52 +0000

What is a Bastion Host?

A Bastion Host (also called a Jump Server or Jump Box) is a special-purpose server that acts as a secure gateway between an external network (like the internet) and a private network. Think of it as a heavily guarded front door to your castle—everyone who wants to enter must pass through this single, monitored entry point.

Why Use a Bastion Host?

Imagine you have critical application servers, databases, and backend services running in AWS. You don't want these directly exposed to the internet because:

Reduced Attack Surface: Only one server (the bastion) is exposed to the internet, not your entire infrastructure.
Centralized Access Control: All SSH access flows through a single point, making it easier to monitor and audit.
Enhanced Security: Private instances have no public IP addresses, making them invisible to the outside world.
Compliance: Many security standards (PCI-DSS, HIPAA, SOC2) require this level of network segregation.

The Architecture We'll Build

┌─────────────────────────────────────────────────────────────────┐
│                            AWS CLOUD                            │
│  ┌───────────────────────────────────────────────────────────┐  │
│  │                      VPC (10.0.0.0/16)                    │  │
│  │                                                           │  │
│  │   ┌─────────────────┐       ┌─────────────────────────┐   │  │
│  │   │  Public Subnet  │       │    Private Subnet       │   │  │
│  │   │  (10.0.1.0/24)  │       │    (10.0.3.0/24)        │   │  │
│  │   │                 │       │                         │   │  │
│  │   │  ┌───────────┐  │       │    ┌───────────────┐    │   │  │
│  │   │  │  Bastion  │  │  SSH  │    │    Private    │    │   │  │
│  │   │  │   Host    │──────────────▶│   Instance    │    │   │  │
│  │   │  │ (Public IP)│ │       │    │  (No Public IP)│   │   │  │
│  │   │  └───────────┘  │       │    └───────────────┘    │   │  │
│  │   │        ▲        │       │                         │   │  │
│  │   └────────│────────┘       └─────────────────────────┘   │  │
│  │            │                                              │  │
│  │   ┌────────┴────────┐                                     │  │
│  │   │ Internet Gateway│                                     │  │
│  │   └────────┬────────┘                                     │  │
│  └────────────│──────────────────────────────────────────────┘  │
│               │                                                 │
└───────────────│─────────────────────────────────────────────────┘
                │
         ┌──────┴──────┐
         │  INTERNET   │
         │   (You)     │
         └─────────────┘

Prerequisites

Before we begin, make sure you have:

An AWS account with appropriate permissions.
Basic understanding of networking concepts (IP addresses, subnets, routing).
SSH client installed on your local machine (If you have MacBook then not needed since it Comes with inbuilt SSH Client).
AWS Console access.

Step 1: Create a Virtual Private Cloud (VPC)

A VPC (Virtual Private Cloud) is your own isolated section of the AWS cloud where you can launch resources in a virtual network that you define.

Navigate to VPC Dashboard

Log into the AWS Management Console
Search for "VPC" in the search bar
Click on VPC Dashboard

Create the VPC

Click Create VPC
Select VPC only (we'll create subnets manually for learning purposes)
Configure the following:

Setting	Value
Name tag	`my-bastion-vpc`
IPv4 CIDR block	`10.0.0.0/16`
IPv6 CIDR block	No IPv6 CIDR block
Tenancy	Default

Click Create VPC

Understanding the CIDR Block

The CIDR block 10.0.0.0/16 means:

10.0.0.0 is the base IP address
/16 means the first 16 bits are fixed (total 32 bits), giving us total of (32-16) = 16 bits or 2 octets (1 octet = 8 bits). So, total 2^16 = 65,536 available IP addresses (10.0.0.0 to 10.0.255.255)

This large range allows us to create multiple subnets within our VPC.

Step 2: Create and Attach an Internet Gateway

An Internet Gateway (IGW) is a horizontally scaled, redundant, and highly available VPC component that allows communication between your VPC and the internet.

Create the Internet Gateway

In the VPC Dashboard, click Internet Gateways in the left sidebar
Click Create internet gateway
Configure:

Setting	Value
Name tag	`my-bastion-igw`

Click Create internet gateway

Attach to VPC

After creation, the IGW is in a "Detached" state. We need to attach it to our VPC:

Select the newly created internet gateway
Click Actions → Attach to VPC
Select my-bastion-vpc
Click Attach internet gateway

The status should now show "Attached".

💡 Key Concept: Without an Internet Gateway, nothing in your VPC can communicate with the internet, regardless of other configurations.

Step 3: Create Public and Private Subnets

Subnets are segments of your VPC's IP address range where you can place groups of isolated resources. We'll create two subnets:

Public Subnet: For resources that need direct internet access (our bastion host)
Private Subnet: For resources that should NOT be directly accessible from the internet

Create the Public Subnet

In the VPC Dashboard, click Subnets in the left sidebar
Click Create subnet
Configure:

Setting	Value
VPC ID	`my-bastion-vpc`
Subnet name	`public-subnet`
Availability Zone	Choose any (e.g., `us-east-1a`)
IPv4 CIDR block	`10.0.1.0/24`

Click Create subnet

Create the Private Subnet

Click Create subnet again
Configure:

Setting	Value
VPC ID	`my-bastion-vpc`
Subnet name	`private-subnet`
Availability Zone	Same as public subnet (e.g., `us-east-1a`)
IPv4 CIDR block	`10.0.3.0/24`

Click Create subnet

Understanding the Subnet CIDR Blocks

10.0.1.0/24: Provides 256 IP addresses (10.0.1.0 to 10.0.1.255)
10.0.3.0/24: Provides 256 IP addresses (10.0.3.0 to 10.0.3.255)

Both are subsets of our VPC's 10.0.0.0/16 range.

💡 Pro Tip: Keep public and private subnets in the same Availability Zone to minimize latency and data transfer costs between your bastion host and private instances.

Step 4: Configure Route Tables

A Route Table contains a set of rules (routes) that determine where network traffic is directed. This is where we define what makes a subnet "public" or "private".

Create the Public Route Table

In the VPC Dashboard, click Route Tables in the left sidebar
Click Create route table
Configure:

Setting	Value
Name	`public-route-table`
VPC	`my-bastion-vpc`

Click Create route table

Add Internet Route to Public Route Table

Select public-route-table
Click the Routes tab
Click Edit routes
Click Add route
Configure:

Destination	Target
`0.0.0.0/0`	Select "Internet Gateway" → `my-bastion-igw`

Click Save changes

The route 0.0.0.0/0 means "all traffic not destined for the local VPC should go to the Internet Gateway".

Associate Public Subnet with Public Route Table

With public-route-table still selected, click the Subnet associations tab
Click Edit subnet associations
Check the box next to public-subnet (Select the Subnet that you created which is supposed to be accessible to the internet)
Click Save associations

Create the Private Route Table

Click Create route table
Configure:

Setting	Value
Name	`private-route-table`
VPC	`my-bastion-vpc`

Click Create route table

Associate Private Subnet with Private Route Table

Select private-route-table
Click the Subnet associations tab
Click Edit subnet associations
Check the box next to private-subnet
Click Save associations

🔒 Security Note: Notice we did NOT add an internet gateway route to the private route table. This is intentional—the private subnet has no direct path to the internet.

Step 5: Create Security Groups

Security Groups act as virtual firewalls for your EC2 instances, controlling inbound and outbound traffic at the instance level.

Create Security Group for Bastion Host

In the VPC Dashboard, click Security Groups in the left sidebar
Click Create security group
Configure:

Setting	Value
Security group name	`bastion-sg`
Description	`Security group for bastion host`
VPC	`my-bastion-vpc`

Add Inbound Rule:

Type	Protocol	Port Range	Source	Description
SSH	TCP	22	`0.0.0.0/0` (or your IP for better security)	SSH access

Keep the default outbound rule (Allow all traffic)
Click Create security group

Create Security Group for Private Instance

Click Create security group
Configure:

Setting	Value
Security group name	`private-instance-sg`
Description	`Security group for private instances`
VPC	`my-bastion-vpc`

Add Inbound Rule:

Type	Protocol	Port Range	Source	Description
SSH	TCP	22	`bastion-sg` (select the security group)	SSH from bastion only

Click Create security group

🔒 Security Best Practice: By specifying the bastion's security group as the source (instead of an IP range), we ensure only the bastion host can SSH into private instances. If the bastion's IP changes, the rule still works.

Step 6: Launch the Bastion Host (Public EC2 Instance)

Now we'll launch our bastion host in the public subnet.

Create a Key Pair (if you don't have one)

Navigate to EC2 Dashboard → Key Pairs
Click Create key pair
Configure:

Setting	Value
Name	`bastion-key`
Key pair type	RSA
Private key file format	`.pem` (for Linux/Mac) or `.ppk` (for Windows/PuTTY)

Click Create key pair
The private key file will automatically download—keep this safe!

Launch the Bastion EC2 Instance

Navigate to EC2 Dashboard → Instances
Click Launch instances
Configure:

Name and Tags:
| Setting | Value |
|---------|-------|
| Name | bastion-host |

Application and OS Images:
| Setting | Value |
|---------|-------|
| AMI | Ubuntu Server 22.04 LTS (or Amazon Linux 2023) |

Instance Type:
| Setting | Value |
|---------|-------|
| Instance type | t2.micro (Free tier eligible) |

Key Pair:
| Setting | Value |
|---------|-------|
| Key pair name | bastion-key |

Network Settings: Click Edit

Setting	Value
VPC	`my-bastion-vpc`
Subnet	`public-subnet`
Auto-assign public IP	Enable
Security group	Select existing → `bastion-sg`

Click Launch instance

💡 Important: We enabled "Auto-assign public IP" because this instance needs to be accessible from the internet.

Step 7: Launch the Private EC2 Instance

Create Another Key Pair for Private Instance

For better security, use a separate key pair for the private instance:

Create a new key pair named private-instance-key
Download and save the .pem file

Launch the Private EC2 Instance

Click Launch instances
Configure:

Name and Tags:
| Setting | Value |
|---------|-------|
| Name | private-instance |

Application and OS Images:
| Setting | Value |
|---------|-------|
| AMI | Ubuntu Server 22.04 LTS (same as bastion) |

Instance Type:
| Setting | Value |
|---------|-------|
| Instance type | t2.micro |

Key Pair:
| Setting | Value |
|---------|-------|
| Key pair name | private-instance-key |

Network Settings: Click Edit

Setting	Value
VPC	`my-bastion-vpc`
Subnet	`private-subnet`
Auto-assign public IP	Disable
Security group	Select existing → `private-instance-sg`

Click Launch instance

🔒 Security Note: We disabled "Auto-assign public IP" because this instance should NOT be directly accessible from the internet.

Step 8: Connect to Your Infrastructure

Now comes the exciting part—actually connecting to your private instance through the bastion host!

Step 8.1: SSH into the Bastion Host

First, let's connect to our bastion host from your local machine.

Get the public IP of your bastion host from the EC2 console
Open your terminal
Set correct permissions on your key file:

chmod 400 bastion-key.pem

SSH into the bastion:

ssh -i "bastion-key.pem" ubuntu@<BASTION_PUBLIC_IP>

Replace <BASTION_PUBLIC_IP> with your bastion's actual public IP address.

You should see the Ubuntu welcome message—you're now on the bastion host!

Step 8.2: Transfer the Private Key to Bastion Host

To SSH from the bastion to the private instance, we need the private instance's key on the bastion. There are several ways to do this:

Method 1: SCP (Secure Copy)

From your local machine (not the bastion), run:

scp -i "bastion-key.pem" private-instance-key.pem ubuntu@<BASTION_PUBLIC_IP>:~/

Method 2: Copy-Paste (for quick testing)

Open the private key file locally and copy its contents
On the bastion, create a new file:

nano ~/private-instance-key.pem

Paste the contents and save (Ctrl+X, Y, Enter)

Step 8.3: Set Correct Permissions on the Private Key

On the bastion host, set the correct permissions:

chmod 400 ~/private-instance-key.pem

⚠️ Common Error: If you see Load key "private-instance-key.pem": Permission denied, the key permissions are too open. SSH requires private keys to be readable only by the owner (permissions 400 or 600).

⚠️ Another Common Error: If the key is owned by root but you're running as ubuntu, you'll need to change ownership:
sudo chown ubuntu:ubuntu ~/private-instance-key.pem

Step 8.4: SSH into the Private Instance

Get the private IP of your private instance from the EC2 console (it will be something like 10.0.3.xxx)
From the bastion host, SSH into the private instance:

ssh -i "private-instance-key.pem" ubuntu@<PRIVATE_INSTANCE_PRIVATE_IP>

Success! You're now connected to your private instance that has no public IP address. The only way to reach it is through the bastion host.

Verifying the Setup

Let's verify everything is working as expected.

On the Private Instance, Try to Reach the Internet

ping google.com

This should fail (hang or show "Network is unreachable") because the private instance has no route to the internet.

Check the Private Instance Has No Public IP

curl ifconfig.me

This should timeout or fail, confirming no public IP is assigned.

Check You Cannot SSH Directly to Private Instance

From your local machine, try:

ssh -i "private-instance-key.pem" ubuntu@<PRIVATE_INSTANCE_PRIVATE_IP>

This should fail because your local machine cannot route to private IP addresses in AWS.

Best Practices and Security Recommendations

1. Restrict Bastion SSH Access

Instead of allowing SSH from 0.0.0.0/0, restrict to your specific IP:

Source: YOUR_PUBLIC_IP/32

2. Use SSH Agent Forwarding

Instead of copying private keys to the bastion, use SSH agent forwarding:

# On your local machine
ssh-add private-instance-key.pem
ssh -A -i "bastion-key.pem" ubuntu@<BASTION_PUBLIC_IP>

# Now on the bastion, you can SSH without specifying a key
ssh ubuntu@<PRIVATE_INSTANCE_PRIVATE_IP>

3. Enable VPC Flow Logs

Monitor all network traffic for security analysis:

Go to VPC → Your VPC → Flow Logs
Create a flow log to CloudWatch Logs

4. Use Session Manager Instead

AWS Systems Manager Session Manager provides a more secure alternative to SSH bastion hosts:

No need to open port 22
No need to manage SSH keys
Built-in logging and auditing

5. Implement Multi-Factor Authentication

Consider using AWS IAM Identity Center with MFA for accessing your AWS resources.

Troubleshooting Common Issues

"Permission denied (publickey)"

Cause: SSH key issues

Solutions:

Check key file permissions: chmod 400 key.pem
Check key ownership: ls -la key.pem
Ensure you're using the correct key for the correct instance
Verify the username (ubuntu for Ubuntu AMI, ec2-user for Amazon Linux)

"Connection timed out"

Cause: Network/routing issues

Solutions:

Verify the instance is running
Check security group rules allow SSH (port 22)
Verify route table associations
Ensure Internet Gateway is attached (for bastion)

"error in libcrypto"

Cause: Corrupted key file

Solutions:

Re-download the key from AWS
Use SCP instead of copy-paste to transfer keys
Check for hidden characters in the key file

"Network is unreachable" from private instance

Cause: This is expected! Private instances have no internet access.

Solution: If you need internet access for updates, set up a NAT Gateway (additional topic for another article).

Cost Considerations

Here's what this setup will cost:

Resource	Cost
VPC	Free
Internet Gateway	Free
Subnets	Free
Route Tables	Free
Security Groups	Free
t2.micro EC2 (Free Tier)	Free for 750 hours/month
t2.micro EC2 (after Free Tier)	~$8.50/month

Total: Free if using Free Tier eligible instances, otherwise minimal cost.

Cleanup

If you are doing this for learning purpose, then, clean up resources to avoid unexpected charges when done:

Terminate EC2 Instances: EC2 → Instances → Select → Instance State → Terminate
Delete Security Groups: VPC → Security Groups → Delete (delete custom ones)
Delete Subnets: VPC → Subnets → Delete
Detach and Delete Internet Gateway: VPC → Internet Gateways → Detach → Delete
Delete Route Tables: VPC → Route Tables → Delete (delete custom ones)
Delete VPC: VPC → Your VPCs → Delete

Summary

Congratulations! 🎉 You've successfully built a secure bastion host architecture in AWS. Here's what we accomplished:

✅ Created a VPC with custom CIDR block

✅ Set up an Internet Gateway for public internet access

✅ Created public and private subnets

✅ Configured route tables for proper traffic flow

✅ Implemented security groups for access control

✅ Launched a bastion host in the public subnet

✅ Launched a private instance accessible only through the bastion

✅ Successfully SSH'd from local → bastion → private instance

This architecture forms the foundation for many production AWS environments and is a crucial pattern to understand for anyone working with cloud infrastructure.

What's Next?

Now that you have this foundation, consider exploring:

NAT Gateway: Allow private instances to access the internet for updates
AWS Systems Manager Session Manager: Bastion-less access to private instances
VPC Peering: Connect multiple VPCs together
AWS PrivateLink: Access AWS services without going through the internet
Infrastructure as Code: Automate this setup using Terraform or CloudFormation

Connect With Me

If you found this article helpful, give it a ❤️ and follow me for more cloud and DevOps content!

Have questions? Drop them in the comments below—I'd love to help!

This article is part of my AWS Fundamentals series. I am documenting my own cloud journey to serve as a personal knowledge base and to provide a clear, relatable guide for others navigating the same path. For more comprehensive deep dives, explore my full collection of AWS tutorials.

Tags: #aws #cloud #devops #security #networking #tutorial

Reconciliation in React Native vs. React Web: A Brief Analysis

Sagnik Ghosh — Tue, 04 Feb 2025 12:38:43 +0000

Introduction

React is widely used for building both web and mobile applications through React Web and React Native. One of its key features is Reconciliation, the process that determines how changes in the component state or props reflect in the UI efficiently.

With the release of React Native 0.76, the architecture has significantly changed, moving away from the old bridge system to a more performant Fabric and TurboModules architecture. This brings notable differences in how reconciliation works compared to previous versions of React Native and React Web.

In this article, we’ll compare reconciliation in React Web and React Native 0.76 (New Architecture), highlighting key differences, improvements, use cases, and optimization techniques.

What is Reconciliation in React?

Reconciliation is the algorithm React uses to efficiently update the UI in response to changes in component state or props. It minimizes unnecessary re-renders by identifying differences between the current and previous virtual DOM (in React Web) or virtual tree (in React Native).

Key Steps in Reconciliation:

Rendering the Virtual Representation: React creates a virtual representation of the UI.
Diffing Algorithm: React compares the new virtual representation with the previous one to identify changes.
Efficient Updates: Only the necessary changes are applied to the real DOM (React Web) or native views (React Native).

Reconciliation in React Web vs React Native (0.76)

React Web:

Uses the Virtual DOM, a JavaScript object representation of the HTML DOM.
Updates the real DOM in the browser.
Optimizes performance through efficient DOM updates but can be constrained by browser limitations.
Batches updates to avoid excessive DOM manipulation.
Uses synthetic events managed within the browser environment.
Animations are executed in JavaScript (less performant) or via CSS.

React Native 0.76 (Fabric):

Uses a Virtual Tree, a JavaScript object representation of native UI views.
Updates native views via Fabric, the new rendering pipeline.
Eliminates the bridge bottleneck by using a direct-to-native threading model.
Enables synchronous layout updates for improved UI responsiveness.
Uses Fabric’s concurrent event handling, reducing UI lag.
Animations now utilize JSI-powered native animations, improving FPS and responsiveness.

Optimizing Reconciliation in React Web and React Native 0.76

Use `key` in Lists

Keys help React efficiently track changes in lists. This applies to both React Web and React Native. Incorrectly managing keys can result in unnecessary re-renders and degraded performance.

const items = [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }];

return (
  <FlatList
    data={items}
    keyExtractor={(item) => item.id.toString()}
    renderItem={({ item }) => <Text>{item.name}</Text>}
  />
);

Use `React.memo` and `PureComponent`

Memoization prevents unnecessary re-renders in both React Web and React Native by ensuring components only update when their props change.

const MemoizedComponent = React.memo(({ name }) => {
  return <Text>{name}</Text>;
});

Leverage Synchronous Updates in Fabric (React Native Only)

Fabric’s synchronous updates significantly improve performance by reducing UI lag. Ensure your components are structured to take advantage of these updates and avoid unnecessary state updates.

Use JSI-based Native Modules (React Native Only)

JSI (JavaScript Interface) allows for direct interaction with native code, bypassing the old bridge, reducing the performance overhead, and making state updates more efficient.

import { NativeModules } from 'react-native';
const { MyNativeModule } = NativeModules;

MyNativeModule.performNativeTask();

Use Concurrent Event Handling (React Native Only)

Fabric introduces a concurrent event system that reduces bottlenecks during UI interactions. Use event listeners that fully utilize Fabric’s improved event handling model.

const handlePress = useCallback(() => {
  console.log("Button pressed");
}, []);

<Button onPress={handlePress} title="Press Me" />;

Optimize Animations Using the Native Driver (React Native Only)

React Native’s JSI-based native driver allows for animations to run smoothly without blocking the JavaScript thread. Always use useNativeDriver: true where possible.

Animated.timing(animatedValue, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true, // Runs animation on the native thread
}).start();

Batch State Updates

React automatically batches multiple state updates into a single re-render cycle, reducing performance overhead in both React Web and React Native.

setState1(value1);
setState2(value2);
// React optimizes and processes both updates together.

Profile and Optimize Performance Using React DevTools

For React Web, use React DevTools to analyze component re-renders. For React Native, use Flipper to monitor performance bottlenecks and improve reconciliation efficiency.

Conclusion

With React Native 0.76, reconciliation has evolved significantly compared to previous versions, moving away from the traditional bridge-based architecture. Fabric, TurboModules, and JSI have made UI updates faster, reducing bottlenecks that existed in earlier versions.

In contrast, React Web still relies on the Virtual DOM, which, while optimized, does not achieve the same level of native performance improvements seen with Fabric.

By understanding the differences, use cases, and optimizations available in React Web and React Native 0.76, developers can build highly performant applications tailored to their respective platforms.

If you have experience optimizing reconciliation with React Web or React Native 0.76, share your insights in the comments below!

Happy coding! 🚀

How Arrow Functions Work with useEffect in React: An In-Depth Guide

Sagnik Ghosh — Fri, 17 Jan 2025 19:15:17 +0000

During a recent interview, I was asked an intriguing question about hoisting and its interaction with React. Specifically, the interviewer wanted to know why, in React, an arrow function defined below a useEffect hook can still be called inside that useEffect. Although I could not properly answer it but this question piqued my interest, and I decided to dive deep into the underlying concepts. Here’s what I found.

The Scenario

Here’s the situation described in the question:

import React, { useEffect } from "react";

const MyComponent = () => {
  useEffect(() => {
    myArrowFunction(); // This works!
  }, []);

  const myArrowFunction = () => {
    console.log("Arrow function called");
  };

  return <div>Check the console</div>;
};

export default MyComponent;

At first glance, it may seem surprising that this code works. After all, we know that arrow functions are not hoisted, unlike regular function declarations. So, why does React’s useEffect behave as if the function was defined before it was called?

To understand this, we need to break down several core JavaScript and React concepts.

1. What Is Hoisting in JavaScript?

Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their scope during the compilation phase, even before the code is executed. This means you can use certain variables or functions before they are explicitly defined in the code.

Function Declarations vs. Function Expressions

Function Declarations: These are hoisted entirely-both the variable and the function body are available before the line where they are defined.

hello(); // Works!

function hello() {
  console.log("Hello, world!");
}

Function Expressions: These are not hoisted in the same way. Only the variable name is hoisted, not the function body. This means you’ll encounter a TypeError if you try to call the function before it is assigned.

hello(); // TypeError: hello is not a function

const hello = function () {
  console.log("Hello, world!");
};

Arrow Functions
Arrow functions are a special type of function expression. Like regular function expressions, only their variable name is hoisted—the actual function body remains uninitialized until the code execution reaches the assignment.

myArrowFunction(); // TypeError: myArrowFunction is not a function

const myArrowFunction = () => {
  console.log("Arrow function");
};

2. How React’s useEffect Works

In React, the useEffect hook allows you to perform side effects after the render phase of a component. Importantly:

useEffect Executes After Rendering:

React does not execute the useEffect callback during the initial rendering phase. Instead, it schedules the useEffect callback to run after the DOM has been updated.
This means that by the time useEffect runs, the entire body of the component function has already been executed, ensuring that all variables and functions within the component scope are fully initialized.

Function Scope and Execution Context:

The useEffect hook has access to all variables and functions defined within the same scope. Since myArrowFunction is defined in the component scope, it is available for use when the useEffect callback is executed.

3. Why the Arrow Function Works in useEffect

Now let’s apply these concepts to the code in question. Here’s a step-by-step explanation:

Step 1: Component Rendering
When the component is rendered, the following happens in order:

JavaScript parses the MyComponent function.
It encounters the useEffect call and registers the callback to be executed later (after rendering).
It initializes the variable myArrowFunction with the arrow function.

By the time React executes the useEffect callback, the myArrowFunction has already been defined, so it can be called without any issues.

Step 2: Execution Lifecycle
Here’s how the lifecycle works in this case:

Code Parsing:

The entire MyComponent function is parsed.
useEffect is registered, and myArrowFunction is initialized.

Rendering:

The component’s output is rendered to the DOM.

useEffect Execution:

After rendering, React runs the useEffect callback.
At this point, myArrowFunction is fully defined and ready to use.

4. Common Misunderstandings

Misconception: Arrow Functions Are Hoisted
Arrow functions themselves are not hoisted. In this case, it works because useEffect runs after the function body has been fully executed, not because of hoisting.

Misconception: useEffect Runs Inline
useEffect does not execute inline during the parsing phase. It is scheduled to run after the render phase, ensuring all variables and functions in the component scope are available.

5. Temporal Dead Zone and React

The Temporal Dead Zone (TDZ) refers to the period between the start of a variable’s scope and its actual declaration where it cannot be accessed. In the code example, there is no TDZ issue because:

The myArrowFunction is declared before the useEffect is executed.
React’s lifecycle ensures that the useEffect callback does not run until after the component function has completed execution.

6. Summary

To summarize:

Hoisting in JavaScript: Arrow functions are not hoisted, but variables declared with const or let are scoped to their block and are accessible after their declaration.
React Lifecycle: useEffect does not execute immediately; it waits until the component has rendered.
Execution Order: By the time the useEffect callback runs, all variables and functions within the component scope are initialized, including arrow functions.

This combination of JavaScript behavior and React’s execution model explains why you can use an arrow function inside a useEffect, even if it appears to be declared "later" in the code.

7. Key Takeaways for Interviews

If you’re asked this in an interview, here’s a concise way to answer:

Arrow functions are not hoisted, but React’s useEffect executes after the component has been rendered.
This ensures that any arrow function defined in the component scope is fully initialized and accessible by the time useEffect runs.
The behavior relies on React’s lifecycle and JavaScript’s execution order, not on hoisting.

By understanding the interplay between JavaScript’s scoping rules and React’s rendering lifecycle, you can confidently tackle questions like this and demonstrate your expertise in modern JavaScript and React.

Feel free to share your thoughts or ask questions in the comments! Let’s discuss and learn together.

A Deep Dive into Promises and Their Real-World Applications

Sagnik Ghosh — Mon, 13 Jan 2025 19:04:17 +0000

In modern JavaScript, asynchronous programming has become an integral part of application development. Promises play a pivotal role in managing asynchronous operations effectively. This blog delves deep into JavaScript Promises, their APIs, practical scenarios, examples, and their pros and cons.

What is a Promise in JavaScript?

A Promise in JavaScript is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value. It serves as a placeholder for the result of an operation that hasn’t completed yet but is expected in the future.

The Three States of a Promise:

Pending: Initial state, neither fulfilled nor rejected.
Fulfilled: The operation completed successfully, and the promise has a resulting value.
Rejected: The operation failed, and the promise has a reason for the failure.

Creating a Promise

Here’s how you can create a simple Promise:

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulating success or failure

  if (success) {
    resolve("Operation succeeded!");
  } else {
    reject("Operation failed!");
  }
});

Consuming Promises

Promises are consumed using .then(), .catch(), and .finally():

myPromise
  .then(result => {
    console.log(result); // Logs: "Operation succeeded!"
  })
  .catch(error => {
    console.error(error); // Logs: "Operation failed!"
  })
  .finally(() => {
    console.log("Operation completed.");
  });

Promise APIs in Depth

Promise.resolve(): This method creates a promise that is immediately resolved with the provided value. It is useful for wrapping non-promise values into a promise for consistency.

Promise.resolve("Quick resolve").then(value => console.log(value));
// Logs: "Quick resolve"

Promise.reject(): This method creates a promise that is immediately rejected with the provided reason. It’s typically used to simulate errors or pass rejections in promise chains.

Promise.reject("Quick reject").catch(reason => console.error(reason));
// Logs: "Quick reject"

Promise.all(): This method takes an array of promises and returns a single promise that resolves when all promises have resolved or rejects as soon as one promise rejects. It is often used when multiple asynchronous tasks need to complete together.

const promises = [
  Promise.resolve(1),
  Promise.resolve(2),
  Promise.resolve(3)
];

Promise.all(promises).then(values => console.log(values));
// Logs: [1, 2, 3]

Promise.allSettled(): This method takes an array of promises and returns a promise that resolves after all promises have settled, regardless of whether they are resolved or rejected. It is useful when you want to handle both outcomes for all promises.

const promises = [
  Promise.resolve(1),
  Promise.reject("Error"),
  Promise.resolve(3)
];

Promise.allSettled(promises).then(results => console.log(results));
/* Logs:
[
  { status: "fulfilled", value: 1 },
  { status: "rejected", reason: "Error" },
  { status: "fulfilled", value: 3 }
]
*/

Promise.race(): This method takes an array of promises and returns a single promise that resolves or rejects as soon as the first promise in the array resolves or rejects. It’s ideal for timeout scenarios.

const promises = [
  new Promise(resolve => setTimeout(() => resolve("Fast"), 100)),
  new Promise(resolve => setTimeout(() => resolve("Slow"), 500))
];

Promise.race(promises).then(value => console.log(value));
// Logs: "Fast"

Promise.any() This method takes an array of promises and resolves with the value of the first promise that fulfills. If all promises are rejected, it returns an AggregateError. It’s useful when you only care about the first successful outcome.

const promises = [
  Promise.reject("Error"),
  Promise.resolve("First success"),
  Promise.resolve("Second success")
];

Promise.any(promises).then(value => console.log(value));
// Logs: "First success"

Practical Scenarios

Fetching Data from Multiple APIs Imagine needing user information and their associated posts. You can handle both requests simultaneously:

const userPromise = fetch("https://api.example.com/user").then(res => res.json());
const postsPromise = fetch("https://api.example.com/posts").then(res => res.json());

Promise.all([userPromise, postsPromise])
  .then(([user, posts]) => {
    console.log("User:", user);
    console.log("Posts:", posts);
  })
  .catch(error => console.error("Error fetching data:", error));

Sequential Execution of Dependent Promises Some operations depend on the completion of prior tasks. Here’s an example:

fetch("https://api.example.com/authenticate")
  .then(response => response.json())
  .then(authData => {
    return fetch(`https://api.example.com/user/${authData.userId}`);
  })
  .then(response => response.json())
  .then(userData => console.log("User Data:", userData))
  .catch(error => console.error("Error:", error));

Retry Mechanism To handle transient network errors, you can implement a retry mechanism:

function retryPromise(fn, retries) {
  return fn().catch(err => {
    if (retries > 0) {
      return retryPromise(fn, retries - 1);
    } else {
      throw err;
    }
  });
}

retryPromise(() => fetch("https://api.example.com/data"), 3)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error("Failed after retries:", err));

Timeout Handling Handling operations that take too long:

function fetchWithTimeout(url, timeout) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => setTimeout(() => reject("Request timed out"), timeout))
  ]);
}

fetchWithTimeout("https://api.example.com/data", 5000)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Chaining Multiple Asynchronous Tasks For tasks requiring step-by-step execution:

function task1() {
  return new Promise(resolve => setTimeout(() => resolve("Task 1 completed"), 1000));
}

function task2() {
  return new Promise(resolve => setTimeout(() => resolve("Task 2 completed"), 2000));
}

task1()
  .then(result1 => {
    console.log(result1);
    return task2();
  })
  .then(result2 => {
    console.log(result2);
  });

Pros and Cons of Promises

Pros:

Readable Code: Promises make asynchronous code more readable compared to nested callbacks.
Error Handling: Centralized error handling with .catch().
Chaining: Easy to chain multiple asynchronous operations.

Cons:

Complexity: Understanding edge cases with .race(), .all(), or .allSettled() can be challenging.
Debugging: Tracing the source of errors can sometimes be difficult in complex promise chains.

Understanding the Critical Render Path and Its Role in Web Performance

Sagnik Ghosh — Mon, 13 Jan 2025 17:11:15 +0000

Web performance is a critical factor in modern development, directly impacting user experience, engagement, and conversion rates. The Critical Render Path (CRP) is a core concept in optimizing web performance. By understanding and optimizing the CRP, developers can significantly improve the speed at which web pages load and become interactive. Let’s dive into what the CRP entails, why it matters, and how to optimize it based on insights from web.dev.

Why Web Performance Matters

Speed is at the heart of web performance. According to web.dev, fast-loading websites lead to better user engagement, retention, and overall satisfaction. Slow websites, on the other hand, frustrate users, leading to higher bounce rates and lost opportunities. Performance isn’t just about milliseconds, it’s about creating seamless experiences that respect users’ time.

Google have spent some considerable amount of time creating user centric performance metrics which are known as Core Web Vitals. Here is a list of some case studies which highlights the connection between performance and business outcomes based on these core web vitals -

The Role of the Critical Render Path

The Critical Render Path refers to the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen. Every web page has its unique CRP, influenced by the content structure, resource size, and dependencies. Optimizing the CRP ensures a faster path from the server to the user’s viewable content.

Key Stages in the Critical Render Path

HTML Parsing: The browser parses the HTML document to construct the Document Object Model (DOM).
CSSOM Construction: The browser processes CSS files to build the CSS Object Model (CSSOM).
JavaScript Execution: If the HTML references external or inline JavaScript, the browser may pause parsing to execute scripts.
Render Tree Construction: The DOM and CSSOM combine to form the Render Tree, representing elements to be displayed with their styles.
Layout and Paint: The browser calculates the layout of elements and paints pixels on the screen.

(Content of this Image is sourced from web.dev)

Only after all these steps have been completed, will the user see content on the screen. The critical rendering path focuses on the process outlined for the initial render, and depends on the critical resources necessary for it. And in between re-rendering happens multiple times as more resources which affect page's rendering becomes available to update what the user sees.

Resources on the Critical rendering path

Here’s an overview of the resources that influence the critical rendering path and how browsers handle them -

1. Critical Resources for Initial Rendering

The browser requires certain resources to complete the initial page render, including:

HTML: Key portions are processed as they arrive.
Render-blocking CSS: Typically in the <head> element.
Render-blocking JavaScript: Typically in the <head> element.

2. What the Browser Doesn’t Wait For

For efficiency, the browser doesn’t halt the initial render for:

All HTML: Rendering starts with the available portions.
Fonts: Text may be temporarily invisible until fonts load.
Images: Space may be reserved, but the browser moves forward.
Non-render-blocking JavaScript: Often placed outside the <head> or marked as async or defer.
Non-render-blocking CSS: Includes styles with media attributes irrelevant to the current viewport.

3. The Role of the `<head>` Element

The <head> contains metadata and critical resources that guide rendering. It does not include visible content but ensures the browser knows how to render the visible content in the <body>element.

4. Render-Blocking Resources

Render-blocking resources pause rendering until they’re downloaded and processed:

CSS: Blocks rendering by default unless its media attribute makes it non-applicable to the current conditions.
Recent Innovations: The blocking=render attribute allows developers to explicitly manage rendering-blocking elements.

what is FOUC?
CSS is considered a render-blocking resource because it prevents the browser from displaying any content until the CSS Object Model (CSSOM) is fully constructed. This behavior ensures a seamless user experience by avoiding a Flash of Unstyled Content (FOUC), where the page appears briefly without styling before the CSS is applied.

While FOUC is typically brief and may go unnoticed, understanding its implications is essential. The browser delays rendering to maintain a polished appearance, but prolonged render blocking can negatively impact performance. To address this, ensure your CSS is efficient and well-optimized to reduce the time it takes for the page to display fully styled content.

Here is a sample video clip of FOUC taken from web.dev where you can see the page without any styling and all styles are applied once the page's CSS has finished loading from the network.
Example of FOUC

5. Parser-Blocking Resources

These resources halt the browser’s ability to parse HTML further:

JavaScript: By default, it blocks parsing unless marked async or defer. This ensures DOM and CSSOM stability before execution.

Browsers mitigate parser blocking with techniques like the preload scanner, which downloads resources in advance to reduce delays.

6. Identifying Blocking Resources

Tools like WebPageTest and Lighthouse help developers pinpoint performance bottlenecks:

WebPageTest: Marks render-blocking resources with an orange circle in its network waterfall diagram.
Lighthouse: Highlights resources only if they delay rendering, avoiding false positives.

Optimizing the Critical Render Path

So now that we have understood what a Critical Rendering Path (CRP) is and how different resources affect it's path while rendering, It's time to know how to optimize the CRP for better web performance, ensuring faster page load times, and enhancing user experience. Below are key strategies to streamline the CRP -

1. Efficient HTML Structure

As highlighted in General HTML Performance, clean and semantic HTML is essential. Avoid excessive DOM depth and unnecessary elements, as they can complicate the rendering process. Use modern HTML standards to ensure compatibility and efficiency.

2. Minimize Critical Resources

Critical resources are those required to render the first paint of the page. To optimize their impact:

Eliminate unnecessary resources: Remove unused CSS, JavaScript, and large media files.
Inline critical CSS: Embed only the CSS needed for above-the-fold content directly into the HTML.

3. Optimize Resource Loading

Efficient resource loading can significantly reduce delays:

Use async and defer for JavaScript: These attributes prevent JavaScript from blocking the parsing of HTML.

async: Scripts load independently and execute as soon as they are ready.

defer: Scripts load in order and execute after the HTML parsing is complete.

Lazy-load non-critical resources: Images, videos, and other resources not immediately visible can be loaded only when needed.

4. Prioritize Critical Resources

Ensure the browser prioritizes the most important resources:

Preload key resources: Use the <link rel="preload"> tag for fonts, images, and other assets required early in the rendering process.
Reduce the size of critical resources: Minify CSS, JavaScript, and compress images to decrease file sizes.

5. Reduce the Number of Critical Path Length

Shortening the CRP involves reducing the number of render-blocking requests:

Combine CSS and JavaScript files: Fewer requests translate to shorter load times.
Eliminate render-blocking CSS and JavaScript: Defer or asynchronously load these files to allow the page to render sooner.

6. Optimize Web Fonts

Fonts can delay the first paint and add to the CRP:

Use font-display: swap: This CSS property ensures text is displayed using fallback fonts until the web font is fully loaded.
Preload fonts: Preload key font files to make them available earlier in the rendering process.

Measuring and Monitoring Performance

Optimization doesn’t end with implementation. Regularly measure performance using tools like Lighthouse or WebPageTest to analyze the CRP. Look for metrics such as:

First Contentful Paint (FCP)
Time to Interactive (TTI)
Largest Contentful Paint (LCP)

Identify bottlenecks and iteratively improve based on data.

Conclusion

The Critical Render Path is a vital aspect of web performance. By understanding its components and employing optimization techniques, developers can create faster, more engaging websites. Remember, performance is a journey, not a destination. Continuously monitor, test, and refine your strategies to stay ahead in delivering exceptional user experiences.

DEV Community: Sagnik Ghosh

Building a Secure Bastion Host Architecture in AWS: A Complete Step-by-Step Guide

What is a Bastion Host?

Why Use a Bastion Host?

The Architecture We'll Build

Prerequisites

Step 1: Create a Virtual Private Cloud (VPC)

Navigate to VPC Dashboard

Create the VPC

Understanding the CIDR Block

Step 2: Create and Attach an Internet Gateway

Create the Internet Gateway

Attach to VPC

Step 3: Create Public and Private Subnets

Create the Public Subnet

Create the Private Subnet

Understanding the Subnet CIDR Blocks

Step 4: Configure Route Tables

Create the Public Route Table

Add Internet Route to Public Route Table

Associate Public Subnet with Public Route Table

Create the Private Route Table

Associate Private Subnet with Private Route Table

Step 5: Create Security Groups

Create Security Group for Bastion Host

Create Security Group for Private Instance

Step 6: Launch the Bastion Host (Public EC2 Instance)

Create a Key Pair (if you don't have one)

Launch the Bastion EC2 Instance

Step 7: Launch the Private EC2 Instance

Create Another Key Pair for Private Instance

Launch the Private EC2 Instance

Step 8: Connect to Your Infrastructure

Step 8.1: SSH into the Bastion Host

Step 8.2: Transfer the Private Key to Bastion Host

Step 8.3: Set Correct Permissions on the Private Key

Step 8.4: SSH into the Private Instance

Verifying the Setup

On the Private Instance, Try to Reach the Internet

Check the Private Instance Has No Public IP

Check You Cannot SSH Directly to Private Instance

Best Practices and Security Recommendations

1. Restrict Bastion SSH Access

2. Use SSH Agent Forwarding

3. Enable VPC Flow Logs

4. Use Session Manager Instead

5. Implement Multi-Factor Authentication

Troubleshooting Common Issues

"Permission denied (publickey)"

"Connection timed out"

"error in libcrypto"

"Network is unreachable" from private instance

Cost Considerations

Cleanup

Summary

What's Next?

Connect With Me

Reconciliation in React Native vs. React Web: A Brief Analysis

Introduction

What is Reconciliation in React?

Key Steps in Reconciliation:

Reconciliation in React Web vs React Native (0.76)

React Web:

React Native 0.76 (Fabric):

Optimizing Reconciliation in React Web and React Native 0.76

Use key in Lists

Use React.memo and PureComponent

Leverage Synchronous Updates in Fabric (React Native Only)

Use JSI-based Native Modules (React Native Only)

Use Concurrent Event Handling (React Native Only)

Optimize Animations Using the Native Driver (React Native Only)

Batch State Updates

Profile and Optimize Performance Using React DevTools

Conclusion

How Arrow Functions Work with useEffect in React: An In-Depth Guide

The Scenario

1. What Is Hoisting in JavaScript?

2. How React’s useEffect Works

3. Why the Arrow Function Works in useEffect

4. Common Misunderstandings

Use `key` in Lists

Use `React.memo` and `PureComponent`

3. The Role of the `<head>` Element