JS bits: The Event Loop

Adaeze Odurukwe — Thu, 05 May 2022 17:15:17 +0000

In some ways, I think the programming journey defies the "normal" order of learning. We most likely learned about alphabets before learning to spell or read and simple division before long division. However, in learning to code, more emphasis is put on learning to use tools before knowing how they work or what happens in the background. Focusing on knowing how to use the tools is the reason you'll probably not bother about digging deeper into what the event loop is. Till one day, with your three years of experience working with javascript, an interviewer says: "so, tell me about the event loop" and you're smiling in embarrassment and mixing up the terms.

So without further ado, let's try to understand the javascript event loop.

The first thing worthy of note is that javascript code runs in a single thread. Simply put, only one task is executed at a time.

The second important thing to note is that the javascript engine runs javascript code. The javascript engine is built into modern browsers, and it consists of two main components:

A heap used for memory allocation
The call stack is used to keep track of and execute function calls

Thirdly, the javascript engine runs in the Javascript Runtime Environment. On web browsers, the Javascript Runtime Environment also provides APIs for timers, DOM manipulation, HTTP requests and others.

To describe the event loop, I'll use an example. Consider the snippet below

Here's what happens when I run the script

The first console.log is added to the call stack and executed
The setTimeout is pushed into the call stack. However, javascript only provides a way to access the setTimeout API and not execute it. So it is moved to the Event table and popped off the call stack.
The third console.log is then added to the call stack and executed.

What happens to the second console.log? After zero seconds, it is moved to the task queue (or callback queue), and after the call stack is empty, it is then moved from the task queue to the call stack and executed.

The above seems like a lot happening for three lines of code but let's also look at another example:

There is a new addition to the list, a Promise. When promises were introduced to Javascript, the job queue (or microtask queue) was also added to the loop. Here, the first two steps still apply but, when the promise is moved to the call stack, it is resolved to "c" immediately, and the .then() is moved to the microtask queue. Then, the last console.log is moved to the call stack and executed.

When the call stack is empty, the tasks in the job queue are moved (First In First Out) to the call stack and executed. After the job queue is empty, the tasks in the task queue are then moved to the call stack one after the other and executed.

So in the course of explaining these examples, we've looked at how the event loop works. Summarily, when a function is invoked or a script is run, the event loop continually checks and updates the call stack until execution is complete.

My goal in writing this article was to make the event loop a lighter pill to swallow, so, you can read more here:

JavaScript Internals: JavaScript engine, Run-time environment & setTimeout Web API
Synchronous vs Asynchronous JavaScript

Photo credit: Pixabay

Kindly leave any feedback in the comment section. Thank you for reading.

Practical Bits - React Custom Hooks

Adaeze Odurukwe — Fri, 17 Dec 2021 08:41:15 +0000

I’m starting a series where I write my experience using concepts. I’m doing this because most times we hear about new or special concepts with the tools we use but never get to use them or fully understand them. Mostly, I’m doing this to gain mastery of the tools I work with (HTML, CSS, React) so disclaimer, this is not expert opinion.

I came across a problem recently where I was going to copy/paste logic across different components. The components were a dropdown and an input element, I needed to be able to

Close the dropdown when I clicked anywhere outside it and
Hide the input field when I clicked anywhere outside it

So, the common denominator was “when I clicked outside the element”. There’s a package for this, look out for a link in the last section. I also found an easy solution and had it working for me on the dropdown element. To avoid repeating logic too many times, I thought about using a custom hook.

Snippet from the dropdown component

 const selectRef = useRef(null);
 useEffect(() => {
   function handleClickOutside(event) {
     if (selectRef.current && !selectRef.current.contains(event.target)) {
       close();
     }
   }
   document.addEventListener("mousedown", handleClickOutside);
   return () => {
     document.removeEventListener("mousedown", handleClickOutside);
   };
 }, [selectRef]);

 return (<div ref={selectRef}></div>)

Essentially, I’m adding an event listener that listens to the mousedown event and carries out the handleClickOutside function. The function checks if the clicked element is the element with the specified ref and if not, it calls a function close() that closes the dropdown in the div.

A custom hook helps to extract reusable logic in to a function. Extracting the logic to a hook

import { useState, useEffect } from "react";

export function useClickedOut(ref) {
const [active, setActive] = useState(false);

 const onClickOutside = (event) => {
   if (ref.current && !ref.current.contains(event.target)) {
     setActive(false);
   }
 };

 useEffect(() => {
   document.addEventListener("mousedown", onClickOutside);
   return () => {
     document.removeEventListener("mousedown", onClickOutside);
   };
 });

 return [active, setActive];
};

Here, I have a state active that is set to false anytime a user clicks outside the target ref.

Using the hook in my dropdown component

const Dropdown = () => {
 const targetRef = useRef(null);
 const [ menuOpen, setMenuOpen ] = useClickOutside(targetRef);

 const onMenuBtnClick = () => {
   setMenuOpen(!menuOpen);
 };

 return (
   <div ref={targetRef} className="dropdown-wrapper">
     <button className="openMenu" type="button" onClick={onMenuBtnClick}>
       Open Dropdown Menu
     </button>
     {menuOpen && (
       <div className="dropdown-items-wrapper">
         <h3>Menu Items</h3>
         <ul className="dropdown-items">
           <li className="dropdown-item">Dropdown Item 1</li>
           <li className="dropdown-item">Dropdown Item 2</li>
           <li className="dropdown-item">Dropdown Item 3</li>
         </ul>
       </div>
     )}
   </div>
 );
};

Now, I can use this hook wherever I need to act after a user clicks outside a particular element.

I’ve also put a full illustration here

I hope you enjoyed reading this, feel free to comment on what you think or what you’ve tried or, how you would have solved this.

References and further reading
Using a Custom Hook
Detect click outside React component
React Click Outside

DEV Community: Adaeze Odurukwe

JS bits: The Event Loop

Practical Bits - React Custom Hooks