DEV Community: Joseph

Breaking Down How Asynchronous JavaScript Works Under the Hood as a Noob

Joseph — Thu, 01 Feb 2024 12:55:02 +0000

What is Asynchronous JavaScript

In a nutshell, asynchronicity means that if JavaScript needs to wait for an operation to complete, it can execute the rest of the code while waiting for that instruction to finish executing in the background. This means your code can remain responsive to other events while that task runs, rather than waiting for it to finish.

The Motivation Behind Asynchronous JavaScript

I want you to imagine a world where asynchronous JavaScript does not exist, which means no async/await or promises. Keep in mind that that JavaScript is a single-threaded language which means that code is run in the order that it appears. Unlike languages like Rust and C, there isn’t a way to create another execution thread to run possibly long-running code like network requests without blocking the main execution thread.

More practically, this means that whenever you need to perform tasks like making an HTTP request, accessing the user’s camera and/or mic or even asking the user to select files, nothing else can run. For example, if you need to make multiple HTTP requests, you would have to wait for one to finish resolving before being able to move on to the next request, which is going to slow down the performance of your website. What a horrible time your users would have.

This, and many problems like it, is what asynchronous JavaScript aims to solve. With that said, it does raise a question of how asynchronicity is even possible when we only have one thread to work with.

How it Works Under the Hood

To understand how asynchronicity is possible in JavaScript there are two concepts we need to understand: Callbacks and Promises, and how they interact with JavaScript’s callback and promise queue and the event loop.

Callbacks, Promises and the Call Stack

The CallStack

The call stack is JavaScript’s main execution thread. Any function or instruction being executed is done so here. To prevent longer-running instructions from blocking other instructions from executing, they are normally removed from the stack and executed by whatever runtime you are using, i.e. node.js, the browser, etc.

Here is an example of how the call stack executes a program:

function add(a, b){
    return a + b
}

function double(a){
    return 2 * a
}

console.log(double(add(5,3))) // 16

conosle.log(double(add(5,3))) will be added to the call stack first. After which, the double function is called and added to the call stack. The double function calls the add function, which adds it to the call stack. As we calculate the return value for each of the functions called, said functions are removed from the call stack until we print the final value of 16 at which point console.log() is also removed from the call stack and the program ends.

Callbacks

A callback is a function passed as an argument to another function and is executed after the first function completes its operations. That first function is normally some call to the browser API, setTimeout is an example of this. Once that first function has finished executing, the function passed in as a parameter is placed in the Callback Queue.

The Callback Queue is a mechanism that JavaScript uses to keep track of the callback functions that need to be executed. Instructions in the callback queue are only executed when the call stack is empty.

console.log("First")

setTimeout(function(){
 console.log("Second")
}, 0)

console.log("Third")

// Result:
// First
// Third
// Second

From this example, we can see that although it looks like Second should be printed to the console before Third, the opposite is true. Because the function that prints Second to the console is wrapped in the timeout function, console.log("Second") is added to the callback queue and therefore only executed after console.log("Third").

Promises

A promise is an object that represents the eventual completion or failure of an asynchronous operation and its resulting value. They provide a simpler way to handle asynchronous operations compared to callbacks by allowing you to chain together multiple operations and handle errors more elegantly. Similarly to callbacks, when a promise is resolved, any function passed into it as an argument is added to a queue called the promise queue or micro-task queue.

Functions and instructions placed in this queue are given higher priority than those in the callback queue. This means that all of the instructions in this queue have to be processed before we start executing any of the instructions in the callback queue.

Here is a code snippet to show this:

const links = []

for(let i = 0; i < 5; i++){
    if(i == 0){
        setTimeout(() => {
        console.log(i)
    }, 0)
  }
    links.push(fetch('https://picsum.photos/200').then(res => res))
  console.log()
  console.log(links.join(" "))
}

// output:
// "[object Promise]"
// "[object Promise] [object Promise]"
// "[object Promise] [object Promise] [object Promise]"
// "[object Promise] [object Promise] [object Promise] [object Promise]"
// "[object Promise] [object Promise] [object Promise] [object Promise] [object Promise]"
// 0

We can see that although console.log(i) looks like it should have run first, it is actually the last to run.

The Event Loop

Once callbacks and promises are added to their respective queues, there needs to be a way for those instructions to be added to the call stack to be executed. This is where the Event Loop comes in. All it is responsible for is looking through the promise and callback queues and adding whatever instructions it finds there to the call sack and this only happens when the call stack is empty. No new instructions will be added to the call stack from the callback queue or promise queue while there is at least one instruction in the call stack.

JSX under the hood

Joseph — Thu, 25 Jan 2024 19:04:42 +0000

What is JSX

JSX, which stands for JavaScript XML, is simply a way of calling a function from the React library that would represent some DOM element like <div> or a custom React component in a way that is easier to understand.

JSX Compiled

There are two answers to what your JSX compiles to depending on if you're using some version of React that was released before or after React 17. If you’re using any version of React before v17.0, then your JSX is being compiled to the function React.createElement. If you’re on the other side of the line then it’s being compiled to the jsx function. From your perspective, there should not have been much of a change in how you write your JSX, since this was a change that would mainly affect compilers like Typescript and Babel. The only exception would be that you would no longer need to have React in scope. You can play around with how it here if you’re curious.

Before React 17

As mentioned, your JSX would call createElement under the hood. This function takes a maximum of 3 parameters:

type: which accepts the name of a valid react component type. This could be a tag name such as ‘div’ or ‘span’ or the name of a react component such as ‘MyCustomComponent’.
props: which must either be null or an object. If you pass null it will be treated like an empty object. React will create an element with props matching the props you have passed.
children: This parameter is optional. The value passed into this property is either a single invocation of the createElement function or an array of them.

As a quick example of what your components look like under the hood, let's look at the following component:

import React from 'react'

export const App = () => {
    return <div>Hello World</div>
}

Compiling it to JavaScript gives us:

import React from 'react'

export const App = () => {
    return React.createElement("div", {}, "Hello World")
}

After React 17

The same hello world component we created above would be compiled to this instead:

import { jsx as _jsx } from "react/jsx-runtime";
export const App = () => {
  return _jsx("div", {
    children: "Hello World"
  });
};

And you would no longer need React in scope.

// This would only be a valid component from React 17+
export const App = () => {
    return <div>Hello World</div>
}

The main motivation for this switch was to simplify how React worked under the hood and reduce the amount of concepts you would have to learn to use React. This switch also provided some performance improvements.

Sources

Understanding the basics of React Refs

Joseph — Fri, 05 Jan 2024 17:26:39 +0000

What are Refs

In the simplest way possible, React refs (which is short for references) are functions that React provides you to reference and interact with DOM nodes and React components directly.[1][2]

Creating Refs

There are two ways to create refs, either use the createRef method or the useRef hook.[2]

What’s the difference?

The createRef method is meant to be used with class components where whereas the useRef hook is meant to be used with function components.[2]

I don’t use class components so from this point onwards I am going to pretend like the createRef method does not exist.

Creating Refs Using the `useRefs` Hook

As mentioned earlier, you can add refs to your component using the useRef hook.

// source: https://react.dev/learn/referencing-values-with-refs
import { useRef } from 'react'

// Here a button will increment ref.current on every click
const Counter = () => {
    const ref = useRef(0)
    const handleClick = () => {
        ref.current = ref.current + 1
        alert(`You have clicked the button ${ref.current} times.`)
    }
    return (
        <button onClick={handleClick} >
            Click Me
        </button>
    )
}

Note: The useRef hook allows you to set an initial value of any type, but this value is ignored after the initial render.[3]

useRef returns an object with a single property, current. If you pass an initial value into useRef, current will be set to that value, but once the ref object is passed into the ref attribute of a JSX node, whatever initial value set will be overridden by a value set by React. [3]

When to use Refs

Typically, you will use a ref when you need your component to communicate with some external from React, often a browser API that won’t impact the component's appearance. Other possible reasons to use refs are to:

Store timeout IDs
Store and manipulate DOM elements
Store other elements that aren’t necessary to calculate the JSX

If your component needs to store some value, but it does not impact the rendering logic, choose refs.[4]

Best practices for refs

Following these principles will make your components more predictable:

Treat refs as an escape hatch: In other words, consider refs as a way to access and modify the lower-level behaviour of DOM nodes that React normally abstracts away.[4]
Don’t read or write ref.current during rendering: If some information is needed during rendering, use state instead because React doesn’t keep track of when ref.current changes. The only exception to this is code like if (!ref.current) ref.current = new Thing() which only sets the ref once during the first render.[4]

Common Use Cases

The following is a list of some of the ways you might use refs in your components.

Focus Control

Programmatically focusing on an input element can be an easy way to improve user experience, cutting out the need for the user to manually drag their cursor over to the input field.

import { useRef, useState, useEffect } from 'react'

const LoginForm = () => {
    const ref = useRef(null)
    const [email, updateEmail] = useState()
    const [password, updatePassword] = useState()
    const handleClick = (e, updateValue) => {
    ...
    }

    useEffect(() => {
    if(ref.current){
        ref.current.focus()
    }
}, [])

    return (
        <div>
                <h1>Insert a new value</h1>
                <form>
                    <input 
                        placeholder="Email" 
                        ref={ref} 
                        type="text" 
                        onChange={(e) => handleChange(e, updateEmail)} 
                        value={email} />
                    <input 
                        placeholder="Password" 
                        type="password" 
                        value={password} 
                        onChange={(e) => handleChange(e, updatePassword)} />
                    <button>Save</button>
                </form>
        </div>
    )
}

The code above works by passing the ref to the email input field. React assigns the input node to ref.current, which gives lower-level access to the node, which means we can call the focus method on the initial page load to automatically have the email input field focused and ready to receive input.

Link to the sandbox: https://codesandbox.io/p/sandbox/focus-on-render-9l7st4

Triggering Animations

Another common use case for refs is to use them as part of a trigger for some animation on an element. The code example below triggers a slide-in animation on some text when the element enters the viewport.

import React, { useEffect, useRef, useState } from "react";

const App = () => {
  const elementRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const node = elementRef.current;
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add(
                        "animate-in", 
                        "slide-in-from-bottom", 
                        "opacity-100"
                    );
          entry.target.classList.remove("opacity-0");
        } 
      });
    });

    if (node) {
      observer.observe(node);
    }

    return () => {
      if (node) {
        observer.unobserve(node);
      }
    };
  }, []);

  return (
    <>
      <div className="h-screen grid place-items-center">
        <p className="text-7xl">What it do!</p>
      </div>
      <div id="animation-section" className="h-screen grid place-items-center">
        <p
          className="text-7xl slide-in-from-bottom duration-300 delay-100 transition opacity-0"
          ref={elementRef}
        >
          This should slide in from the bottom.
        </p>
      </div>
    </>
  );
};

export default App;

Sources: