website·Indexed 32 days ago
https://gauravthakur.comA collection of technical articles and projects by Gaurav Thakur. Content covers JavaScript internals (execution context, hoisting, the 'this' keyword, and array implementation), React patterns (Server Components, useEffect, and data fetching), and data structures like heaps and binary trees. Also features projects such as SplitMaadi, a group expense-splitting app, and PerfKit.
A Heap is a complete binary tree. There are two primary types:
Hoisting is the behavior in JavaScript that allows variables and functions to be accessed before they are explicitly initialized in the code. This occurs because of the two-phase process of creating an Execution Context:
undefined, while function declarations are stored in their entirety.When a variable or function is accessed before its declaration, JavaScript checks the memory allocated during Phase 1. If the identifier exists, it returns the stored value (undefined for variables, the function body for functions). If no memory was allocated for the identifier, a ReferenceError is thrown.
console.log(sayHello); // Returns the whole function definition
console.log(name); // Returns undefined
var name = 'Gaurav Thakur';
function sayHello() {
console.log('hello');
}Binary trees are categorized by their structure:
SplitMaadi is a free expense-sharing application designed to provide a frictionless experience without arbitrary limits. Key product guarantees include:
An execution context is the environment in which JavaScript code is executed. It consists of two components: a Memory Component (storing variable and function references as key-value pairs) and a Code Component (responsible for executing the code). Every execution context is created in two distinct phases:
undefined. For functions, the entire function body is stored in memory.var num1 = 5;
var num2 = 7;
function add(num1, num2) {
return num1 + num2;
}
var result = add(num1, num2);// Memory Phase Result: // num1: undefined // num2: undefined // add: function(num1, num2) { ... } // result: undefined
In React 18+, when Strict Mode is enabled in development, React will intentionally unmount and remount components upon their first mount. This causes useEffect and useLayoutEffect to run twice. This behavior is designed to help developers identify bugs where effects are not properly cleaned up, which could lead to issues in production (e.g., when a user navigates away from and back to a screen quickly).
To prevent bugs such as duplicate API connections or memory leaks when an effect runs multiple times, always provide a cleanup function in the useEffect hook.
function Chat() {
useEffect(() => {
const { connect, disconnect, connection } = dummyServer();
connect();
connection.on(() => {
console.log("connected");
});
// The cleanup function ensures that previous connections
// are closed before a new one is created
return disconnect;
}, []);
return (
<div>
<p>Chat Screen</p>
<a href="/">Go to home page</a>
</div>
);
}heapify on all non-leaf nodes starting from the bottom and moving upwards to the root. This approach is more efficient than traditional insertion, taking O(n) time instead of O(n log n).void Heap::constructHeap(const vector<int> &values) {
if (size == 0) {
for (int value: values) {
heap[size++] = value;
}
for (int i = size - 1; i >= 0; i--) {
heapify(i);
}
}
}To avoid render-time waterfalls and prevent blocking the server render, you can initiate a fetch in a Server Component without awaiting it, and pass the resulting promise to a Client Component. The Client Component then unwraps the promise using the use() hook inside a Suspense boundary.
Constraints:
Use this pattern when:
// app/page.tsx (Server Component)
import { Suspense } from "react";
import PageWrapper from "./page-wrapper";
import ClientPanel from "./client-panel";
import { getUserPreferences } from "./api";
export default function Page() {
// Start the fetch early — do not await here
const prefsPromise = getUserPreferences();
return (
<PageWrapper>
<Suspense fallback={<div>Loading preferences...</div>}>
<ClientPanel prefsPromise={prefsPromise} />
</Suspense>
</PageWrapper>
);
}
// app/client-panel.tsx (Client Component)
"use client";
import { use } from "react";
export default function ClientPanel({ prefsPromise }) {
// Unwrap the promise using the 'use' hook
const prefs = use(prefsPromise);
return <div>Max discount: {prefs.maxDiscount}</div>;
}this keyword inside that function refers to the object it is attached to. The object serves as the context for the function call.const obj = {
name: 'Gaurav',
foo: function () {
console.log(this.name);
}
};
obj.foo(); // Gauravcache API to ensure that a function is called only once per request cycle. This is essential for deduplicating custom logic (such as database calls via Prisma or API calls with dynamic headers) that cannot be automatically deduplicated by the native fetch API.import { cache } from "react";
// Deduplicate an API call with dynamic headers
const getUserPreferences = cache(async () => {
const response = await client("https://api.gauravthakur.com/v1/user-config");
return response.json();
});
// Deduplicate a database call
const getOrderStatus = cache(async (id: string) => {
const order = await prisma.order.findFirst({
where: { id },
});
return order?.status ?? null;
});