Forem: Umair Syed

Fixing "Connection Refused" Errors with Serverless Offline

Umair Syed — Tue, 28 Jan 2025 10:44:36 +0000

If you've ever encountered the frustrating ECONNREFUSED error while working with Serverless Offline, you're not alone. I was getting this error when I tried to run e2e tests with cypress. The frontend was working fine and was able to hit the serverless offline backend but in cypress tests, it was giving refused connection errors. In this blog, I'll walk you through how I solved this problem and got my serverless backend up and running locally.

The Problem

While running my e2e cypress tests locally, I kept running into the following error:

Error: connect ECONNREFUSED 127.0.0.1:8080

This error indicated that my application (or Cypress tests) couldn't connect to the backend running on localhost:8080. Surprisingly, the backend worked fine when tested manually with curl or Postman or browser, but it failed when accessed via Cypress or other tools.

The Solution

After some debugging, I discovered two key changes that resolved the issue:

1. Change the Port

By default, sls offline runs on port 8080. However, this port might already be in use by another process on your machine. To fix this, I updated the serverless.yml file to use a different port (e.g., 8000):

custom:
  serverless-offline:
    httpPort: 8000

2. Set the Host Explicitly

Sometimes, sls offline binds to localhost by default, which can cause issues in certain environments. To ensure the server is accessible from all network interfaces, I explicitly set the host to 0.0.0.0:

custom:
  serverless-offline:
    httpPort: 8000
    host: 0.0.0.0

After making these changes, I restarted sls offline, and there you go! The backend was now accessible at http://localhost:8000.

Why This Works

Changing the Port: If port 8080 is already in use, switching to a different port (e.g., 8000) ensures there’s no conflict.
Setting the Host to 0.0.0.0: Binding to 0.0.0.0 makes the server accessible from any network interface, not just localhost. This is especially useful when working with tools like Cypress or Docker.

Steps to Reproduce the Fix

Update your serverless.yml file:

   custom:
     serverless-offline:
       httpPort: 8000
       host: 0.0.0.0

Restart sls offline:

   sls offline

Test the backend using curl or your application:

   curl -X POST http://localhost:8000/prod/signIn \
     -H "Content-Type: application/json" \
     -d '{"email": "test@example.com", "password": "your-password"}'

You can also resolve the issue via terminal command by running sls offline with specific options directly. This can be done in one line like so:

sls offline start --httpPort 8000 --host 0.0.0.0

This command will start your serverless offline environment on port 8000 and bind it to 0.0.0.0, making the backend accessible from all network interfaces without the need to modify the serverless.yml file manually. It's a quick and efficient alternative for testing.

Bonus Tip: Debugging with Cypress

If you're using Cypress for end-to-end testing and still encountering issues, try hitting the backend directly:

cy.request({
        method: 'POST',
        url: 'http://localhost:8000/api/signIn', // Replace with your backend URL
        body: {
          email: Cypress.env("TEST_USER_EMAIL"),
          password: Cypress.env("TEST_USER_PASSWORD"),
        },
      }).then((response) => {
        expect(response.status).to.equal(200);
        expect(response.body.token).to.exist;
      });

Introduction to LLMs: A Useful Handbook

Umair Syed — Thu, 03 Oct 2024 06:07:25 +0000

In the rapidly advancing field of Artificial Intelligence (AI), understanding the foundations is key, especially when dealing with Large Language Models (LLMs). This guide aims to simplify complex topics for beginners, taking you through essential concepts like neural networks, natural language processing (NLP), and LLMs. We'll explore how LLMs are built, trained, and keywords related to LLMs, as well as the challenges they face, like biases and hallucinations.

What Are Neural Networks?

A neural network is a machine learning model that makes decisions like the human brain, by mimicking how biological neurons work together to recognize patterns, evaluate choices, and reach conclusions. Neural networks are the backbone of any AI model, including LLMs. As the backbone of AI models, including LLMs, neural networks are organized into layers that process data and learn from it. The neurons in a neural network are arranged in layers:

Input Layer: Where the data first enters the model.
Hidden Layers: Where computations happen, allowing the network to learn patterns.
Output Layer: Where the final prediction or decision is made.

For example, a neural network can be trained to recognize images of cats. It processes an image through layers of neurons, enabling it to identify a cat among different shapes or objects.

What Is Natural Language Processing (NLP)?

Natural language processing (NLP) is a computer program's ability to understand human language, both spoken and written. NLP is the field that focuses on enabling machines to understand and generate human language. NLP powers everything from chatbots to voice assistants, translating human language into something a machine can process. It involves tasks like:

Tokenization: Breaking text into smaller components (e.g., words or subwords).
Parsing: Understanding the structure of sentences.
Sentiment Analysis: Determining whether a piece of text is positive, negative, or neutral.

Without NLP, LLMs wouldn't be able to grasp the nuances of human language.

What Are Large Language Models (LLMs)?

Large Language Models (LLMs) are advanced neural networks designed to understand and generate human language. They are trained on vast amounts of text data, allowing them to learn patterns, context, and nuances of language. LLMs can perform various tasks, such as answering questions, writing essays, translating languages, and engaging in conversations. Their primary goal is to create human-like text that captures the intricacies of natural language.

The core idea behind LLMs is simple: predict the next word in a sentence. For example, if you input "The sun rises in the...", the LLM should predict "east." While this may seem basic, this task leads to the development of complex, emergent abilities like text generation, reasoning, and even creativity.

Key LLM Terminologies

The Transformer

A Transformer is a type of neural network architecture that revolutionized natural language processing (NLP) by enabling models to handle sequences of data more efficiently. The Transformer architecture was introduced in the groundbreaking paper Attention Is All You Need. Traditional models like Recurrent Neural Networks (RNNs) processed sequential data and maintained an internal state, allowing them to handle sequences like sentences. However, they struggled with long sequences due to issues like the vanishing gradient problem, because over time, they would forget earlier information. This happened because the adjustments made to improve the model became too small to have any real impact.

The Transformer addressed these challenges by using a mechanism called attention, which allowed the model to focus on different parts of a sentence or document more effectively, regardless of their position. This innovation laid the foundation of ground breaking models like GPT-4, Claude, and LLaMA.

The architecture was first designed as an encoder-decoder framework. In this setup, the encoder processes input text, picking out important parts and creating a representation of it. The decoder then transforms this representation back into readable text. This approach is useful for tasks like summarization, where the decoder creates summaries based on the input passed to the encoder. The encoder and decoder can work together or separately, offering flexibility for various tasks. Some models only use the encoder to turn text into a vector, while others rely on just the decoder, which is the foundation of large language models.

Language Modeling

Language modeling refers to the process of teaching LLMs to understand the probability distribution of words in a language. This allows models to predict the most likely next word in a sentence, a critical task in generating coherent text. The ability to generate coherent and contextually appropriate text is crucial in many applications, such as text summarization, translation, or conversational agents.

Tokenization

Tokenization is the first step when working with large language models (LLMs). It means breaking down a sentence into smaller parts, called tokens. These tokens can be anything from individual letters to whole words depending on the model, and how they're split can affect how well the model works.

For example, consider the sentence: The developer’s favorite machine..

If we split the text by spaces, we get:

["The", "developer's", "favorite", "machine."]

Here, punctuation like the apostrophe in developer’s and the period at the end of machine. stays attached to the words. But we can also split the sentence based on spaces and punctuation:

["The", "developer", "'", "s", "favorite", "machine", "."]

The way text is split into tokens depends on the model, and many advanced models use methods like subword tokenization. This breaks words into smaller, meaningful parts. For example, the sentence It's raining can be split as:

["It", "'", "s", "rain", "ing", "."]

In this case, raining is broken into rain and ing, which helps the model understand the structure of words. By splitting words into their base forms and endings (like rain and ing for raining), the model can learn the meaning more effectively without needing to store different versions of every word.

During tokenization, the text is scanned, and each token is assigned a unique ID in a dictionary. This allows the model to quickly refer to the dictionary when processing the text, making the input easier to understand and work with.

Embeddings

After tokenization, the next step is to convert these tokens into something a computer can work with — which is done using embeddings. Embeddings are a way to represent tokens (words or parts of words) as numbers that the computer can understand. These numbers help the model recognize relationships between words and their context.

For example, let's say we have the words happy and joyful. The model assigns each word a set of numbers (its embedding) that captures its meaning. If two words are similar, like happy and joyful, their numbers will be close together, even though the words are different.

At first, the model assigns random numbers to each token. But as the model trains—by reading and learning from large amounts of text—it adjusts those numbers. The goal is for tokens with similar meanings to have similar sets of numbers, helping the model understand the connections between them.

Although it may sound complicated, embeddings are just lists of numbers that allow the model to store and process information efficiently. Using these numbers (or vectors) makes it easier for the model to understand how tokens relate to one another.

Let's look at a simple example of how embeddings work:
Imagine we have three words: cat, dog, and car. The model will assign each word a set of numbers, like this:

cat → [1.2, 0.5]
dog → [1.1, 0.6]
car → [4.0, 3.5]
Here, cat and dog have similar numbers because they are both animals, so their meanings are related. On the other hand, "car" has very different numbers because it’s a vehicle, not an animal.

Training and Fine-Tuning

Large language models (LLMs) are trained by reading massive amounts of text to learn how to predict the next word in a sentence. The model's goal is to adjust its internal settings to improve the chances of making accurate predictions based on the patterns it observes in the text. Initially, LLMs are trained on general datasets from the internet, like The Pile or CommonCrawl, which contain a wide variety of topics. For specialized knowledge, the model might also be trained on focused datasets, such as Reddit Posts, which help it learn specific areas like programming.

This initial training phase is called pre-training, where the model learns to understand language overall. During this phase, the model’s internal weights (its settings) are adjusted to help it predict the next word more accurately based on the training data.

Once pre-training is done, the model usually undergoes a second phase called fine-tuning. In fine-tuning, the model is trained on smaller datasets focused on specific tasks or domains, like medical text or financial reports. This helps the model apply what it learned during pre-training to perform better on specific tasks, such as translating text or answering questions about a particular field.

For advanced models like GPT-4, fine-tuning requires complex techniques and even larger amounts of data to achieve their impressive performance levels.

Prediction

After training or fine-tuning, the model can create text by predicting the next word in a sentence (or next token to be precise). It does this by analyzing the input and giving each possible next token a score based on how likely it is to come next. The token with the highest score is chosen, and this process repeats for each new token. This way, the model can generate sentences of any length, but it’s important to remember that the model can only handle a certain amount of text at a time as input, known as its context size.

Context Size

The context size, or context window, is a crucial aspect of LLMs. It refers to the maximum number of tokens the model can process in a single request. It determines how much information the model can handle in a single go, which impacts how well it performs and the quality of its output.

Different models have different context sizes. For instance, OpenAI’s gpt-3.5-turbo-16k model can handle up to 16,000 tokens (which are parts of words or words themselves). Smaller models might manage only 1,000 tokens, while bigger ones like GPT-4-0125-preview can process up to 128,000 tokens. This limit affects how much text the model can generate at one time.

Scaling Laws

Scaling laws explain how a language model's performance is affected by different factors, such as the number of parameters, the size of the training dataset, the computing power available, and the model's design. These laws, discussed in the Chinchilla paper, help us understand how to best use resources to train models effectively. They also offer insights into optimizing performance. According to Scaling laws, The following elements determine a language model’s performance:

Number of Parameters (N): Parameters are like tiny parts of the model’s brain that help it learn. When the model reads data, it adjusts these parameters to get better at understanding patterns. The more parameters the model has, the smarter it becomes, meaning it can pick up on more complex and detailed patterns in the data.
Training Dataset Size (D): The training dataset is the collection of text or data the model learns from. The bigger the training dataset, the more the model can learn and recognize patterns in different texts.
FLOPs (Floating Point Operations Per Second): This term refers to the amount of computing power needed to train the model. It measures how fast the model can process data and perform calculations during training. More FLOPs mean the model can handle more complex tasks but also requires more computational resources to do so.

Emergent Abilities in LLMs

As LLMs grow in size and complexity, they start exhibiting emergent abilities that were not explicitly programmed into them. For example, GPT-4 can summarize long texts or even perform basic arithmetic without being specifically trained for those tasks. These abilities emerge because the model learns so much about language and data during training.

Prompts

Prompts are the instructions you give to LLMs to generate a desired output. Designing the right prompt can significantly improve the quality of the generated text. For example:

1. Use Clear Language:

Be specific in your prompts to get better results.

Less Clear: Write about Allama Iqbal.
More Clear: Write a 500-word article on the great poet of sub-continent Allama Iqbal.

2. Provide Enough Context:

Context helps the model know what you want.

Less Context: Write a story.
More Context: Write a short story about a baby girl lost in the woods with happy ending.

3. Try Different Variations:

Experiment with different prompt styles to see what works best.

Original: Write a blog post about the benefits of programming.
Variation 1: Write a 1000-word blog post on the mental and financial benefits of regularly practicing programming.
Variation 2: Create an engaging blog post highlighting the top 10 benefits of programming.

4. Review Outputs:

Always check the automated responses for accuracy before sharing.

Hallucinations

Hallucinations occur when LLMs generate content that is factually incorrect or nonsensical. For instance, an LLM might state that "The capital of Australia is Sydney," when the correct answer is Canberra. This happens because the model is focused on generating likely text based on its training, not verifying facts.

Biases

Bias in LLMs arises when the training data reflects cultural, gender, or racial biases. For example, if a model is trained predominantly on English text from Western sources, it may produce biased outputs that favor Western perspectives. Efforts are being made to minimize these biases, but they remain a critical challenge in the field.

The Journey of DNS Resolution: How the Internet Finds Websites for You

Umair Syed — Tue, 01 Oct 2024 02:42:04 +0000

Imagine you’re in a big city, trying to visit a building. Instead of using an address like 123 Main Street you just remember the name of the building, like Google Headquarters To find this building, you need someone to convert the name into an actual address. In the same way, websites have IP addresses (like 192.168.1.1) that are needed for your computer to find them. Every device on the internet, including websites, has its own unique IP address. Without these addresses, your computer wouldn’t know where to send or receive information, and websites wouldn’t be able to load. That’s exactly what DNS (Domain Name System) does for websites—it turns easy-to-remember names into IP addresses so your computer can find the right website. This process is called DNS resolution, where the system works behind the scenes to translate a website's name (like "google.com") into the numerical IP address needed to load the site on your browser.

Let’s learn how DNS works step-by-step, so by the end, you’ll know exactly what happens when you type a website name and hit "Enter."

How DNS Resolution Works

You Type a Website Name (URL):

You open your browser and type in “example.com” Before the page can load, your computer needs to know the IP address for "example.com"—the exact location on the internet.

Step 1: The Recursive DNS Resolver

The recursive DNS resolver is responsible for finding the correct IP address for the website you want to visit. It does this by asking different servers until it gets an answer.
Your computer asks for help from a recursive DNS resolver. This is like your internet assistant, and it’s usually provided by your internet service provider (ISP). If the resolver has seen the website before, it may have the IP address stored already. If not, it begins asking other servers to help find the IP address.

Step 2: The Root Name Server

The root name server is the first step in the DNS process. It works like a guide, directing the resolver to the right place based on the website's ending, like .com or .org.
The recursive resolver doesn’t know the IP address itself, so its first stop is the root name server. Think of the root server as a giant directory that knows where to find information for any website in the world. However, the root server doesn’t know the exact address for "example.com." Instead, it points the resolver to the next step: the Top-Level Domain (TLD) server.

Step 3: The TLD Name Server

The TLD name server is responsible for handling domain names that end with specific extensions, like ".com" or ".org." It points the resolver to the authoritative name server for that particular domain.
The recursive resolver goes to the Top-Level Domain (TLD) server. TLD servers are organized by the end of the website’s name, such as “.com,” “.org,” or “.net.” Since you are looking for "example.com", the resolver goes to the .com TLD server. This server knows which authoritative name server to ask for the exact IP address.

Step 4: The Authoritative Name Server

The authoritative name server holds all the information about a domain, including its IP address. It gives the resolver the final answer it needs to direct you to the right website.
Finally, the recursive resolver arrives at the authoritative name server. This server holds the DNS records for "example.com". DNS records are like stored information about your domain—things like its IP address, mail server details, and more. The authoritative server looks up the IP address for "example.com" and gives it to the resolver.

How Your Domain's DNS Records Are Accessed: When you register a domain and set up its DNS records, you are storing these records in the authoritative name server for that domain. So, if you own “mywebsite.com”, the IP address and other important details are saved in the authoritative server. Whenever someone tries to visit “mywebsite.com”, their recursive resolver will eventually ask your authoritative server for the IP address.

Step 5: The IP Address Is Returned

Now that the recursive resolver has the correct IP address, it sends it back to your computer. Your browser uses this address to connect to the website, and "example.com" loads on your screen.

DNS Caching: Speeding Things Up

You might think that going through all these steps every time would take a long time, but in reality, it happens very quickly—usually in milliseconds. This is because of something called DNS caching. Your computer, browser, and even the recursive resolver can store the IP addresses of websites for a certain amount of time. This means they don’t have to go through the whole process each time you visit a website. Instead, they can skip straight to the answer.

How your DNS records are pushed to Authoritative Name Server?

When you set up DNS records for your domain (such as the IP address, email server details, etc.), the process typically involves using your domain registrar or a DNS hosting provider. Here's how your DNS records are pushed to the authoritative name server:

Register Your Domain: The first step is to buy a domain (like "example.com") from a domain registrar.
Set Up DNS Records: Most domain registrars provide a control panel where you can manage your DNS records, or you can use a DNS hosting provider like Cloudflare or AWS Route 53 to manage your records. These records include details like the IP address (A record) of your website.
Push to Authoritative Servers: Once you save your DNS records with the registrar or DNS hosting service, they automatically push these records to their authoritative name servers. These are the servers that answer DNS queries for your domain.
Propagation: After you update or set up new DNS records, it may take some time for the changes to spread across the internet. This is called DNS propagation, where all the DNS servers around the world update their cached information to reflect your changes.

Wrapping It All Up

DNS resolution might seem like a lot of steps, but it’s a fast and efficient process that happens every time you visit a website. Whether you’re typing in "google.com" or "mywebsite.com", the DNS works behind the scenes to find the correct IP address, so your browser knows where to go.

From HTML to Pixels: The Magic Behind Web Rendering

Umair Syed — Mon, 30 Sep 2024 03:30:59 +0000

When you load a website, your browser works like a sophisticated artist, transforming the raw code (HTML, CSS, JavaScript) behind the scenes into the polished picture you see on screen. This journey involves several critical steps: DOM, CSSOM, render tree, layout, paint, and composite. Understanding how these work and where they can bottleneck performance can help you write better, more efficient code. It can also give you an edge in technical interviews. Let’s break it down.

1. The DOM: Structure from HTML

The first step in rendering a website is parsing the HTML to build the Document Object Model (DOM). Think of the DOM as a tree where each HTML tag becomes a node. The <html>, <body>, <div>, and other elements are nested according to their hierarchy.

What it does: The DOM represents the structure of the document and acts as a bridge between the HTML code and JavaScript. As the browser parses the HTML, it incrementally builds the DOM tree. We need the DOM because it allows JavaScript to interact with and manipulate the page's content dynamically, enabling responsive and interactive web experiences. The HTML parser in the rendering engine is responsible for building the DOM.
Caveat: Any errors or issues in HTML (like missing closing tags) might break the structure or cause unexpected behaviors. Tools like the browser's Developer Tools help catch such mistakes early.

2. The CSSOM: Style Rules from CSS

While the DOM provides the structure, the CSS Object Model (CSSOM) provides the style. As your CSS files are parsed, the browser builds another tree-like structure that maps styles to different elements.

What it does: The CSSOM is responsible for applying the styles you’ve written—colors, margins, fonts, etc. The CSS parser, also part of the rendering engine, builds the CSSOM.
Caveat: CSS files can block rendering. The browser waits until the CSSOM is built before rendering anything on the screen, which is why proper CSS loading (using async or defer) can significantly speed up page load times.

3. The Render Tree: Merging DOM and CSSOM

Once the DOM and CSSOM are created, the browser merges these two trees into the render tree. This tree contains only the visible elements and the styles applied to them. Hidden elements (e.g., display: none) are ignored because they don’t affect the visual output.

What it does: The render tree determines which elements need to be displayed and how they should look. It excludes non-visual elements like <head> and any element with display: none. The rendering engine combines the DOM and CSSOM to generate the render tree.
Caveat: visibility: hidden elements still appear in the render tree, which can lead to unnecessary calculations. Be cautious with hidden elements—they can still impact performance.

The browser transforms HTML and CSS into trees (DOM, CSSOM, and the render tree) because working directly with raw HTML and CSS is inefficient, unmanageable and deoptimized.

4. Layout: Calculating Position and Size

The layout step is where the browser calculates the exact position and size of each element in the render tree. This is also known as "reflow." The browser needs to determine the width, height, and spatial positioning of all the elements.

What it does: Layout is responsible for ensuring elements are positioned according to the flow of the document or the CSS properties like float or absolute. The layout engine or reflow engine, which is part of the rendering engine, calculates the positions and sizes of elements.
Caveat: Frequent layout changes (e.g., modifying the DOM or CSS dynamically) can cause a performance hit due to reflows. Recalculating layout can be expensive, especially for complex pages.

5. Paint: Filling in Pixels

In the paint phase, the browser fills in the pixels for each element. The content is drawn on the screen based on the styles and layout computed earlier: fonts, colors, shadows, borders, backgrounds, and more.

What it does: The browser paints each element pixel-by-pixel onto the screen. The paint module in the rendering engine takes charge of this phase.
Caveat: Complex visual effects like box shadows, gradients, and large images can slow down this process. Optimizing images and avoiding overly complex styles ensures smooth painting.

6. Composite: Putting It All Together

The composite stage involves taking the different painted layers (sometimes, complex web pages are broken into multiple layers) and putting them together to create the final image. Modern browsers use layers to allow for smoother animations and interactions.

What it does: Layers are merged to form the final, visible webpage. The compositor thread handles the compositing process, ensuring layers are merged and displayed smoothly on the screen.
Caveat: Incorrect layer management can result in janky animations or slow scrolling. Avoid unnecessary layers, but use them for performance-intensive animations (like transform and opacity changes) to keep repaints and reflows at a minimum.

Mastering Script Tags: Using Async and Defer for Precise Script Control

Umair Syed — Sun, 29 Sep 2024 11:05:48 +0000

In the world of web development, optimizing page load times is crucial. Two powerful attributes of the <script> tag – async and defer – can significantly impact your website's performance. Using these attributes without thoroughly understanding them can affect performance and lead to bugs. Let's start from the basics and learn what these attributes do and when to use them.

The Basics: How Scripts Load

By default, when a browser encounters a <script> tag, it:

Pauses HTML parsing
Downloads the script
Executes the script
Resumes HTML parsing

This process can slow down page rendering, especially for large scripts or slow connections. Additionally, it can lead to bugs if the script runs before certain HTML elements are fully loaded, which often happens if the script is not placed correctly in the document.

Async and Defer: A Double-Edged Sword

Async

<script async src="script.js"></script>

What it does: Downloads the script asynchronously while HTML parsing continues.
When it executes: As soon as it's downloaded, pausing HTML parsing.
When it is used: Independent scripts that don't rely on other scripts or DOM content.
Caveat: Can execute out of order, potentially breaking dependencies.

Defer

<script defer src="script.js"></script>

What it does: Downloads the script while HTML parsing continues.
When it executes: After HTML parsing is complete, but before the DOMContentLoaded event.
When it is used: Scripts that rely on DOM content or need to execute in a specific order.
Caveat: May delay execution of critical functionality.

Comparing Behaviors

Attribute	Download	Execution	HTML Parsing	Main Risk
None	Blocks	Immediate	Paused	Slow Initial Render
Async	Parallel	ASAP	Paused when downloaded	Race Conditions
Defer	Parallel	After HTML	Continues	Delayed Functionality

Order of Execution: Async, Defer, and Both

Understanding the order of execution for scripts with different attributes is crucial for managing dependencies and ensuring proper functionality. Here's how it works:

Regular scripts (no async or defer):
- Execute in the order they appear in the document.
- Block HTML parsing until they're downloaded and executed.
Async scripts:
- Download in parallel and execute as soon as they're available.
- No guaranteed order of execution; they run as soon as they're downloaded.
- May execute before the DOM is fully loaded.
Defer scripts:
- Download in parallel but execute only after HTML parsing is complete.
- Execute in the order they appear in the document.
- Run before the DOMContentLoaded event.
Scripts with both async and defer:
- The async attribute takes precedence in modern browsers.
- In older browsers that don't support async, they fall back to defer behavior.

Example Execution Order:

<script src="1.js"></script>
<script async src="2.js"></script>
<script async src="3.js"></script>
<script defer src="4.js"></script>
<script defer src="5.js"></script>

Possible execution order:

1.js (blocks parsing)
3.js or 2.js (whichever downloads first)
2.js or 3.js (whichever downloads second)
4.js
5.js

Note that 2 and 3 could execute in any order or even before 1 if 1.js takes longer to download.

Best Practices

Use async for independent scripts like analytics.
Use defer for scripts that depend on DOM or other scripts.
Place scripts in the <head> with async or defer to start downloading early.
For critical scripts, consider inline scripts in the <head>.

Browser Support

Both async and defer are widely supported in modern browsers. For older browsers, consider using a script loader or placing scripts at the end of the <body>.

The Right Way to Update Reference Types in React State

Umair Syed — Tue, 10 Sep 2024 17:37:49 +0000

Ever wondered why your set state function is not updating the state sometimes when the stored value is a reference type like array or object. Let me tell you why. But first, let's build a foundation so that we can cop up with the concepts that will be explained in this blog.

Principle of Immutability in React:

The principle of immutability in React refers to the practice of not directly mutating state or data structures, but instead creating new copies of them whenever changes are needed. In simpler terms, once a value is created, it should not be changed, but rather replaced with a new value when modifications are required.

Reference Types:

All the data types in JavaScript are divided into two main categories:

Primitive Types
Non primitive or Reference Types

Primitive types are the basic building blocks or fundamental types of data. For example, numbers, strings, Boolean, null and undefined etc.

// Primitive types
var name = "Umair Syed"; // String
var age = 25; // number
var isCool = true; // boolean
var favoriteMovie = null; // null
var salary = undefined; // undefined

Reference types are complex types that are made up from other types like Primitive or even other reference types. You can consider them as a combination of multiple primitive types in a single place. For example, an object or array where we can store a group of values including strings, numbers, Booleans and so on. In JavaScript, reference types are Arrays, Objects, and Functions.
Why are they called reference types? Because in JavaScript, when you create a variable and assign it a reference type value, you're not actually storing the entire value in that variable. Instead, you're storing a reference to where the value is stored in memory, compared to Primitive type where value is stored in that variable. This means that if you have two variables pointing to the same reference type value, they both refer to the same data in memory. As a result, changes made to the data through one variable will also be reflected when accessing the data through the other variable.

// Reference types

// These values are stored in a heap and person variable is just storing 
// the pointer to that place in memory. You can think of it as
// person = 0x7ffd84520a38
var person = { 
  name: "Umair Syed",
  age: 25,
};

// Since we assigned an object to anotherPerson, that is why a pointer is 
// stored in anotherPerson as well. A new pointer? Nope, the same
// pointer as stored in person. For the sake of example:
// anotherPerson = 0x7ffd84520a38;
var anotherPerson = person;

// Since both objects have the same pointer, changing any property in
// anotherPerson will be reflected in person as well
anotherPerson.name = "Faisal Tahir";

console.log(person); // { name: "Faisal Tahir", age: 25 }
console.log(anotherPerson); // { name: "Faisal Tahir", age: 25 }

Keeping the above points in mind, it is very crucial to take care of the type that we are updating in the React state. Now, what is the wrong way of updating a state that has reference value and what is the correct way?

Wrong Way:

Let's say you are showing an array of sorted values in a list, and you want to change the sorting order from Ascending to Descending or vice versa. How you would do it. Most probably, the novice will think of the following way:

function OrderedList() {
  const [sortedArr, setSortedArr] = useState([1, 2, 3, 4]);
  return (
    <div>
      <ol>
        {sortedArr.map((value, i) => (
          <li key={i}>{value}</li>
        ))}
      </ol>
      <button
        onClick={() => setSortedArr((currentValue) => currentValue.reverse())}
      >
        Reverse
      </button>
    </div>
  );
}

On clicking the Reverse button, the list will not update, why? Let's understand:
The reverse() method reverses the elements of an array in place, meaning it modifies the original array and returns a reference to the same array with its elements reversed.
Since reverse() modifies the original array, React might not detect the change in the array's content. React compares the new state with the previous state using reference equality and shallow comparison. If the reference to the array remains the same after the update (which is the case when using reverse()), React might not recognize the change and may not trigger a re-render.

Correct Way:

To fix this issue, you should ensure that you create a new array with the reversed elements rather than modifying the original array in place. You can achieve this using the spread operator (...) or other array methods like slice() or concat():

setSortedArray(currentValue => [...currentValue].reverse());

This way, you're creating a new array with the reversed elements, maintaining immutability, and ensuring that React detects the change in state correctly, triggering a re-render as expected.

Conclusion: It's essential to always create a new array or object when updating state that contains a reference type. This ensures adherence to the principle of immutability, which is crucial for React's state management to function correctly. By creating new copies of arrays or objects instead of modifying them directly, you guarantee that React accurately detects changes and triggers re-renders as needed, maintaining the integrity of your application's state.