Internet Gateway vs Private Gateway in AWS

When working with AWS networking, understanding how your VPC communicates with the outside world is essential.

---

Internet Gateway (IGW)

• Enables public internet traffic to reach resources in a VPC
• Acts as the connection between a VPC and the internet
• Required if resources (like web servers) need public access
• Without an Internet Gateway, resources inside the VPC cannot be accessed from the internet

---

Private Gateway (Virtual Private Gateway – VGW)

• Enables secure communication through a VPN tunnel
• Allows on-premises infrastructure to connect privately to your VPC
• Uses encryption to protect data traveling over the internet
• Commonly used for hybrid cloud architectures

---

Key Concepts

• VPC (Virtual Private Cloud):
  An isolated section of the AWS cloud where you launch resources

• VPN (Virtual Private Network):
  A secure, encrypted tunnel used to connect networks over the internet

---

In Simple Terms

• Internet Gateway → Public access
• Private Gateway + VPN → Secure private access

---

Understanding these components is fundamental when designing secure and scalable AWS architectures.

While developing a new project using Next.js, I encountered an issue where React Hooks could not be used inside an asynchronous function. After researching this problem, I found that it is related to the Rules of Hooks defined by React.

---

React Rules of Hooks

According to the official React documentation, hooks must always be called in the same order during every render.

React depends on this consistent order to correctly associate state and effects with each hook call.

If the order changes between renders, React may lose track of which state belongs to which hook, leading to errors such as:

• "Rendered fewer hooks than expected"
• "Rendered more hooks than expected"
• State mismatches

---

Common Violations of the Rules of Hooks

Some common patterns that violate these rules include:

• Calling hooks inside conditions (if, else, ternary operators)
• Calling hooks inside loops (for, while)
• Calling hooks after early returns
• Calling hooks inside callbacks or event handlers
• Calling hooks inside async functions
• Calling hooks inside class methods
• Calling hooks at the module level

---

Hooks Inside Async Functions

One common mistake is attempting to use hooks inside an async function.

Hooks must run during the rendering of a React function component. React relies on the order of hooks during this render process to manage state and effects correctly.

If hooks are called inside an async function, they are executed outside the component’s render flow, which breaks React’s hook tracking mechanism.

Because of this, hooks can only be called inside:

• React function components
• Custom hooks

Not inside regular JavaScript functions such as async functions.

---

Solution: Using Async Logic Inside useEffect

A common solution is to keep the useEffect callback synchronous while calling an internal async function.

Example

import { useEffect, useState } from "react";

export default function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch("/api/data");
      const json = await res.json();
      setData(json);
    }

    fetchData();
  }, []);

  return <div>{data ? JSON.stringify(data) : "Loading..."}</div>;
}