DEV Community: YogiYiorgos

Exploring the Inner Workings of the JavaScript Event Loop

YogiYiorgos — Sat, 25 Mar 2023 13:05:30 +0000

Introduction

Asynchronous programming is an essential part of modern web development. Whether you're making network requests to APIs, handling user input in the browser, or performing complex calculations, it's important to understand how JavaScript handles asynchronous tasks. One key concept in JavaScript's approach to asynchronous programming is the event loop.

The event loop is the mechanism that allows JavaScript to execute multiple tasks concurrently without blocking the main thread. In this blog post, we'll explore what the event loop is, how it works, and provide real-life examples of how it's used in JavaScript.

What is the event loop?

Specifically in Javascript, the event loop is a mechanism that allows the single threaded environment of the language to handle asynchronous operations. The event loop is a continuous process that runs in the background of JavaScript's execution environment, constantly monitoring a queue of tasks that need to be processed. When the main thread finishes executing a task, the event loop checks the task queue for any pending tasks and processes them in the order they were received. This allows JavaScript to execute multiple tasks concurrently, without blocking the main thread.

How does the event loop work?

In Javascript, there is only one main thread of execution that processes code in a linear fashion, one line at a time. When an asynchronous operation is initiated, such as a network request, it is handed off to a separate thread of execution provided by the browser, such as the Web API thread, to be processed in the background. The main thread then continues executing the next line of code, without waiting for the asynchronous operation to complete.

Once the asynchronous operation is completed, it is added to a queue of events that are managed by the event loop. The event loop constantly monitors this queue and, when the queue is not empty, it processes the events in a FIFO order.

The event loop uses a two-phase cycle to manage the queue of events. In the first phase, the event loop processes all synchronous events in the queue, such as mouse clicks and button presses. These events are typically processed quickly and are not likely to block the main thread. In the second phase, the event loop processes asynchronous events, such as callbacks from network requests, that have been added to the queue.

When the event loop processes an asynchronous event, it runs the associated callback function on the main thread. This can result in the callback being executed at any point in the program's execution, even if it is in the middle of processing another task. This is why callback functions must be designed to be non-blocking and lightweight to avoid blocking the main thread for too long.

Real-life examples

Let's look at some real-life examples of how the event loop is used in Javascript.

Example 1: Network request

When we make a network request in Javascript, the request is handled asynchronously by the browser's networking stack. This means that the main thread can continue executing code while the request is being processed in the background. Once the response is received, the callback function is added to the task queue, and the event loop processes it when it's the next item in the queue.

fetch('https://jsonplaceholder.typicode.com')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))

Example 2: Timer

When we use the setTimeout function to schedule a timer in Javascript, the timer is handled asynchronously by the browser's timer API. This means that the main thread can continue executing code while the timer is counting down in the background. Once the timer expires, the callback function is added to the task queue, and the event loop processes it when it's the next item in the queue.

console.log("Starting")

// Set a timer to execute after 2 seconds
setTimeout(() => {
    console.log("Timeout 1")
}, 2000)

// Set another timer to execute after 1 second
setTimeout(() => {
    console.log("TImeout 2")
}, 1000)
console.log("Finishing")

When this code is executed, the following happens:

The first console.log statement is executed, logging "Starting" to the console.
The first setTimeout call is made, scheduling the first callback function to be executed after 2 seconds. However, since this is an asynchronous operation, the main thread continues executing the next line of code without waiting for the timer to expire.
The second setTimeout call is made, scheduling the second callback function to be executed after 1 second. Again, the main thread continues executing the next line of code without waiting for the timer to expire.
The final console.log statement is executed, logging "Finishing" to the console.
The event loop continues to run on the main thread, monitoring the queue of events.
After 1 second has elapsed, the first timer expires and adds the associated callback function to the event queue.
The event loop processes the first event in the queue, which is the callback function from the first setTimeout call, logging "Timeout 2" to the console.
After another second has elapsed, the second timer expires and adds the associated callback function to the event queue.
The event loop processes the second event in the queue, which is the callback function from the second setTimeout call, logging "Timeout 1" to the console.

The console prints:

Starting
Finishing
Timeout 2
Timeout 1

Beyond Props and State: Understanding and using Refs in React

YogiYiorgos — Sun, 22 Jan 2023 11:11:16 +0000

React is a powerful Javascript library for building user interfaces and one of the features it offers is the ability to create and use refs. In this blog post, we'll take a closer look at what refs are, when to use them, and how to create and use them in our React projects.

What are refs in React?

Refs are a way to access a component's underlying DOM (Document Object Model) node. They allow us to access the value of a form element, trigger a focus or media playback, and more. Refs can be created and used in both functional and class components.

When to use refs in React?

Refs should be used sparingly and only when necessary. In general, it's recommended to use state and props to manage the state of our application. However, there are certain cases where refs offer a better solution:

Accessing the value of a form element
Triggering a focus on a specific element
Triggering media playback
Integrating with third-party libraries that require direct access to the DOM ## How to create and use refs in React? To create a ref, we can use the useRef hook in functional components or the createRef method in class components. Then, we can attach the ref to any JSX element using the ref attribute.

import { useRef } from 'react';

const MyInput = () => {
  const inputRef = useRef(null);

  function handleSubmit(e) {
    e.preventDefault();
    console.log(inputRef.current.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

In the example above, inputRef is a ref created using the useRef hook. It is attached to the input element using the ref attribute. When the form is submitted, the handleSubmit function is called and it logs the current value of the input field by accessing inputRef.current.value.

We can also use refs for other purposes such as triggering a focus on a specific element, or triggering media playback.

import { useRef } from 'react';

const MyVideoPlayer = () => {
  const videoRef = useRef(null);

  function handlePlay() {
    videoRef.current.play();
  }

  return (
    <div>
      <video ref={videoRef}>
        <source src="my-video.mp4" type="video/mp4" />
      </video>
      <button onClick={handlePlay}>Play</button>
    </div>
  );
}

In the example above shows how refs can be very useful, where videoRef is a ref created using the useRef hook and it is attached to the video element using the ref attribute. When the play button is clicked, the handlePlay function is called and it triggers the play method on the video element by accessing videoRef.current.play().

What makes refs so different?

Now that we have covered the basics of hoe to create and use refs in a React application, let's delve deeper into some of the key features and considerations when utilizing refs.

Refs have a few key differences form state and props that make them useful is certain situations. One important difference is that refs persist across re-renderes, unlike regular variables which reset in every render. This makes refs useful for storing information that needs to be accessed between renders, such as the current position of a video player or the scroll position of a container.

Another difference is that changing a ref does not trigger a re-render, unlike state variables which, when they change, they trigger a re-render. This can be beneficial in situations where we need to update a value without causing a re-render, such as when updating the position of an element on a drag and drop interaction.

Finally, refs are local to each copy of a component, unlike variables outside of the component which are shared. This means that each instance of a component can have its own ref, which can be useful in situations where multiple instances of a component need to maintain their own state independently.

Summary

In summary, refs in React offer a way to access the underlying DOM of a component, providing more control over our application. While it may be tempting to rely on refs for everything, it's important to remember that they should be used when other methods such as props and state are not sufficient. Used correctly, refs can be a powerful tool in our React arsenal.