Category: JavaScript

Sneaky React Memory Leaks: How `useCallback` and closures can bite you

A brief refresher on closures Closures are a fundamental concept in JavaScript. They allow functions to remember the variables that were in scope when the function was created. Here’s a simple example: function createCounter() { const unused = 0; // This variable is not used in the inner function let count = 0; // This… Continue reading Sneaky React Memory Leaks: How `useCallback` and closures can bite you

Garbage collection and closures

Garbage collection within a function doesn’t quite work how we expected. function demo() { const bigArrayBuffer = new ArrayBuffer(100_000_000); const id = setTimeout(() => { console.log(bigArrayBuffer.byteLength); }, 1000); return () => clearTimeout(id); } globalThis.cancelDemo = demo(); With the above, bigArrayBuffer is leaked forever. I didn’t expect that, because: After a second, the function referencing bigArrayBuffer is no longer callable.… Continue reading Garbage collection and closures

Event Loop Explained

Before we dig into the event loop, I want you to look at the following illustration. You might not understand all the components mentioned here, but it’s better to build a mental model before we start. We’ll now zoom in on each of the components one by one and build our understanding of the Event… Continue reading Event Loop Explained

Debouncing and Throttling

Debouncing and Throttling work on the same principle – delay stuff – but still have very different approach and use cases. Both the concepts are useful for developing a performant application. Almost all the websites you visit on a daily basis use Debouncing and Throttling in some way or the other. Debouncing A well known… Continue reading Debouncing and Throttling

Understanding async and defer

The script tag is used to add JavaScript to an HTML page. It could be an inline script or an external script. <body> <!– Some code before it –> <script> console.log(“This is an inline script.”); </script> <script src=”https://example.com/external-script.js” /> <!– Some code after it –> </body> While parsing the HTML, if browser encounters a script tag it… Continue reading Understanding async and defer

Convert Seconds to HH:MM:SS

function secondsToHMS(seconds) {   const h = Math.floor(seconds / 3600);   const m = Math.floor((seconds % 3600) / 60);   const s = seconds % 60;   return `${h.toString().padStart(2, ‘0’)}:${m.toString().padStart(2, ‘0’)}:${s.toString().padStart(2, ‘0’)}`; } console.log(secondsToHMS(3661)); // Output: “01:01:01”

Deep Clone an Object

function deepClone(obj) {   return JSON.parse(JSON.stringify(obj)); } const original = { a: 1, b: { c: 2 } }; const clone = deepClone(original); clone.b.c = 3; console.log(original.b.c); // Output: 2

Format Numbers in Indian Numbering System

function formatIndianNumber(amount) {         let formatted ;         // Parse the number to two decimal places         if(amount){          formatted = parseFloat(amount).toLocaleString(‘en-IN’, {             minimumFractionDigits: 2,             maximumFractionDigits: 2        … Continue reading Format Numbers in Indian Numbering System