The Problem: Uncontrolled Re-rendering Cascade Imagine a simple Todo app. When you type in the input field, everything re-renders—even components that haven't changed. Here's why: Without optimization (problematic version): // Parent Component - WITHOUT memo/useCallback function Todo() { const [newTodo, setNewTodo] = React.useState(""); const [todos, setTodos] = React.useState([]); // ❌ These functions get recreated on EVERY render const handleInputChange = (e) => setNewTodo(...

Read full article on FrontendGeek

Why CSS Sprites Still Matter in Modern Web Development? CSS sprites combine multiple small images into one file, slashing HTTP requests and boosting load times—crucial even with HTTP/3. This technique shines for icons, buttons, and repetitive graphics on mobile or low-bandwidth sites. What Are CSS Sprites? CSS sprites pack icons or images into a single "sprite sheet," then use background-position to display just the needed section. Born in the early 2000s for dial-up era optimization, they...

Read full article on FrontendGeek

Converting RGB (Red, Green, Blue) colors to hexadecimal format is a common task in web development. Hexadecimal color codes are widely used, especially in web design and CSS. In this article, we will explore how efficiently we can convert CSS RGB to HEX values programmatically using JavaScript. Understand RGB and HEX Color Codes RGB (Red, Green, Blue) and HEX are two common codes to represent colors in web development. RGB Color Codes RGB color codes use a combination of red, green, and blue val...

Read full article on FrontendGeek

When working with colors in web development, you may come across the need to convert HEX colors to RGB format. While HEX colors are commonly used in CSS, manipulating colors programmatically requires converting them to RGB or RGBA In this blog, we'll explore how to convert HEX to RGB in JavaScript programmatically. Understanding HEX and RGB Colors Before diving into the conversion process, let's quickly understand what HEX and RGB colors represent: HEX Color - HEX colors are represented as a six...

Read full article on FrontendGeek

Understanding closures in JavaScript is crucial for frontend developers as they play a significant role in how functions work and interact with variables. This is one of the confusing topics with so many applications in different contexts. In this blog post, we will explore 5 practical examples to help you grasp the concept of Closures in JS and use them confidently in your applications. What are Closures in JavaScript? In JavaScript, a closure is a combination of a function bundled together wit...

Read full article on FrontendGeek

Managing interactions with the clipboard is a common requirement in web applications. In React, we can achieve this functionality using custom hooks. In this blog post, we will explore the implementation and usage of the useCopyToClipboard hook in a React application. Approach for useCopyToClipboard Hook The useCopyToClipboard hook is a custom React hook that simplifies copying text to the clipboard. This hook abstracts the process of working with the Clipboard API and provides an easy-to-use in...

Read full article on FrontendGeek

Infinite scrolling is a popular technique used in web development to load content continuously as the user scrolls down a page. Implementing infinite scrolling efficiently can greatly improve user experience and performance. In this blog post, we will explore how to create a custom useInfiniteScroll hook in React using Intersection Observer. Implementation of useInfiniteScroll hook const useInfiniteScroll = (callback) => { const observer = new IntersectionObserver((entries) => { if (...

Read full article on FrontendGeek

As hooks are now become the essential part of the react application, learning react hooks is must and useDocumentTitle hook can be your starting point of learning react hooks. In React applications, dynamically changing the title of a web page can enhance user experience and provide context to the user. One real-life scenario is updating the document title dynamically based on the content being displayed for the products in e-commerce application. In this blog post, we will explore how to create...

Read full article on FrontendGeek

In React applications, creating responsive designs is important to provide a seamless user experience across various devices. In responsive design implementation, one common requirement is to know the size of the browser window to adapt the UI accordingly. In this blog post, we'll delve into implementing a custom useWindowSize hook in React to dynamically track the window size changes. Implementation of useWindowSize() hook Let's start implementing custom hook named useWindowSize that will track...

Read full article on FrontendGeek

While developing react applications, sometimes you need to keep track of the previous value of a state or a prop to perform certain actions or comparisons. The usePrevious custom hook in React allows you to store the previous value of a state or a prop to be accessed in subsequent renders. React does not provide a built-in way to track the previous value, so this hook is extremely useful in real-world apps and comes up often in interviews. Implementation of usePrevious Hook Let's create the useP...

Read full article on FrontendGeek

Detecting click outside a specific element is one of the common use-cases in the react development, and this functionality can be simplified using a reusable useClickOutside custom hook in react. In this blog, we will go through the useClickOutside hook implementation and its real-life use-case. Implementation of useClickOutside Custom Hook Let's quickly jump into the implementation of react useClickOutside hook that detects clicks outside a specified element. import { useEffect } from 'react';...

Read full article on FrontendGeek

In frontend Interviews and development, react performance optimization is one of the important ask when dealing with user input events like typing, scrolling, etc. In this case Throttling can help to improve the performance In this blog post, we will explore how to implement a custom useThrottle hook in React, which can be handy in scenarios where you want to control the rate of execution of a function. Implementation of useThrottle custom hook in React Before jumping to the implementation, let...

Read full article on FrontendGeek

In frontend development, optimizing performance is crucial to ensure a smooth user experience. One most common performance optimization technique is debouncing, which delays the execution of a function until a certain amount of time has passed without additional calls. In this blog, will understand the implementation of useDebounce() custom hook in react Let's quickly understand the Debouncing? Debouncing is a process where a function call is delayed until after a specified time interval has ela...

Read full article on FrontendGeek

Nested array are quite commonly used in the javascript for data manipulations, and that's why we often need to Flatten nested array in javascript for processing purpose. Flattening a nested array involves converting a multi-dimensional array into a single-dimensional array by extracting all elements and combining them into one array. In this blog post, we will explore how to flatten nested arrays using recursion. We will also cover the ways to handle complex arrays of objects and flattening them...

Read full article on FrontendGeek

useLocalStorage and useSessionStorage is most widely used custom hooks to simplify the interaction with localStorage and sessionStorage at the application level and provide a clean way for interaction. In this blog, Let's understand the implementation code of useSessionStorage custom hook in react. How to Approach While exploring the approach, its important to know that useSessionStorage custom hook in react will internally going to use the window.sessionStorage object only, and convert the obje...

Read full article on FrontendGeek

In this blog post, we will go through the implementation and usage of useLocalStorage custom hook in React, specifically focusing on managing local storage. The useLocalStorage custom hook will allow us to easily store and retrieve data from the browser's local storage, providing a convenient way to persist data across sessions in a React application. Implementation of useLocalStorage Custom Hook Let's start creating useLocalStorage custom hook, which will abstract the logic for interacting with...

Read full article on FrontendGeek

Nowadays theming is an essential part of the most web application that allowing users to customize the appearance of an application according to their preferences. This is one the important functional implementation when it comes to frontend development. In this blog post, we will dive into implementing the useTheme() custom hook in React, a commonly discussed topic in frontend interviews as well. Implementation of useTheme() custom hook Before jumping into the useTheme() implementation, its imp...

Read full article on FrontendGeek

Custom hooks in React are a powerful way to reuse stateful logic across multiple components, and helps to write clean code that is extensible and easily testable. In this blog post, we will implement a useToggle() custom hook in react to efficiently handle toggle functionality in React applications. This custom hook will help in toggling between states in different components like accordion and modal. Implementation of useToggle() Custom Hook Let's start by creating the useToggle() custom hook....

Read full article on FrontendGeek

Custom hooks improve the overall reusability in the react application and reduce down the boilerplate code. Understanding custom hooks are so important that Nowadays Custom Hooks in React are one of the most asked React Interviews questions. Any number of custom hooks can be make as per the requirement, so to help you out we have captured the 20 most asked Custom Hooks in React with code implementation for quick revision before your frontend interview Table of content useFetch() Hook useToggle(...

Read full article on FrontendGeek

A Quick Explanation Because React relies on the order of Hook calls to correctly associate state and effects with their respective components.If you call Hooks conditionally or inside nested functions, that order can change between renders — and React would lose track of which state belongs to which Hook. Code Explanation React uses an internal array (or linked list) to keep track of Hooks for each component.For example, when your component renders: function MyComponent() { const [count,...

Read full article on FrontendGeek

Implement useFetch() Custom Hook in React Learn how to create a custom hook in React, useFetch, that simplifies data fetching from APIs and manages loading and error states efficiently. Step 1: Define the useFetch Hook import React, { useState, useEffect } from 'react'; const useFetch = (url) => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try...

Read full article on FrontendGeek

Performance optimization of a react application is necessary while building any react application, there are many performance optimization techniques exist to improve performance using the JavaScript, CSS or network optimization side, but in this post we primarily focused on the performance optimization techniques which we can use specific to React codebase and patterns. Let's checkout these top 10 and bonus React performance optimization techniques Table of content Memoization using Rect.memo(...

Read full article on FrontendGeek

When working with nested objects in JavaScript, there might be scenarios where you need to flatten the object to a single level to perform other operations on that flattened object. In this blog post, we will explore how to flatten a nested object using a recursive approach. We will cover the recursive code, how to approach and provide step-by-step explanations. Flatten nested object in JavaScript using recursion Let's explore flattening nested objects in JavaScript using a recursive approach, a...

Read full article on FrontendGeek

Currying in JavaScript provides a way to implement partial functions in JavaScript, and one of the use cases is to implement Infinite currying in JavaScript to calculate multiplication using partial functions, such as mul(2)(3)(4). This is one of the most common JavaScript interview questions. Implementing Infinite Currying Multiplication in JavaScript Let's implement a function that performs infinite multiplication using currying. The function should be able to take any number of arguments and...

Read full article on FrontendGeek

Infinite currying sum and multiplication are one of the best examples to check the understanding of currying and its implementation to generate partial functions. In this post, we will going to cover the infinite currying sum implementation. Table of Contents Implementing Infinite Currying Sum Real-world example Implementing Infinite Currying Sum Let's start by implementing a function that can take any number of arguments and return the sum of all those arguments. We will use currying to achie...

Read full article on FrontendGeek

When working with objects and arrays in JavaScript, you’ll often need to copy or clone data but not all copies are same, thats where understanding Shallow Copy and Deep Copy in JavaScript helps. In frontend interviews, this is a common topic because understanding how data is referenced in memory helps you debug unexpected behaviour in your web application.In this post, Let’s learns Shallow copy and Deep copy in detail. Table of Contents Basic of Shallow Copy and Deep Copy Understand...

Read full article on FrontendGeek

Async Await in JavaScript provides a simple way to handle async operations synchronously. This removes the issues that come with callback hell while using promises to handle async operations in JavaScript. This is one of the most commonly asked questions to the senior devs to evaluate their in-depth understanding. Understanding a polyfill for Async Await (the common approach is generator + Promise) is a great way to show deep knowledge of the event loop, Promise resolution, error propagation, an...

Read full article on FrontendGeek

If you are preparing for frontend interviews, knowing how to write polyfills is extremely helpful. Interviewers often ask you to re-create commonly used methods like map, filter, and reduce. These questions test not only your JavaScript skills but also how well you understand the prototype chain and higher-order functions. Table of Contents Polyfill for map, filter, and reduce in JavaScript map polyfill in JavaScript Understand the map array method in JavaScript Expected map method behaviour M...

Read full article on FrontendGeek

JWT(JSON Web Token) is currently becoming the standard of web authorization, where the token(JWT) carries all the required information along with the token and on the server, the information is decoded by the server using a key. In this post, we will learn about JWT Token, its structure and pros-cons, so that you can use JWT token for authorization confidently What is JWT(JSON Web Token)? A JSON Web Token (JWT) is a compact, URL-safe way of securely transmitting information between client and s...

Read full article on FrontendGeek

If you're preparing for frontend interviews, understanding Hoisting in JavaScript is a must. It's one of those concepts that seems simple at first glance but can trip you up during coding rounds or real-world debugging. In this blog, we’ll break down hoisting in JavaScript in an easy-to-understand way, with examples and explanations that make sense even if you're just getting started. Let's deep dive into what it is, how it works internally, and how different types of variables and functio...

Read full article on FrontendGeek

In this article, I’ll be explaining the call, apply & bind methods & how to write their polyfills. These three polyfills are very commonly asked questions in a JavaScript interview. Table of Contents Understand Call method in JavaScript Understand Apply method in JavaScript Understand Bind method in JavaScript Polyfill of call, apply and bind in JavaScript Call polyfill in JavaScript Apply polyfill in JavaScript Bind polyfill in JavaScript Let’s get started with an example to...

Read full article on FrontendGeek

Understanding popstate in Single Page Applications (SPAs) We'll demystify the popstate event, explore examples in vanilla JavaScript, and then compare how libraries like React Router handle it under the hood. The Basics: What is popstate in JavaScript? The popstate event is fired on the window whenever the active history entry changes. This usually happens when the user clicks Back or Forward in the browser window.addEventListener("popstate", (event) => { console.log("Location changed to:", wi...

Read full article on FrontendGeek

In this blog, we will focus on building the clearInterval polyfill in JavaScript, which stops a running interval created by our custom setInterval. This not only helps you prepare for interviews but also gives you a deeper understanding of how JavaScript timers work under the hood. Table of Contents Understand scenarios to cover as part of clearInterval polyfill Implementation of clearInterval polyfill in JavaScript clearInterval polyfill code with example Explanation of the clearInterval poly...

Read full article on FrontendGeek

In frontend interviews, it’s common to get questions that test your understanding of JavaScript internals. One such question is to implement the polyfill of setInterval. It helps you understand how browser timers work, how callbacks are scheduled, and how you can build these functionalities using plain JavaScript. This is primarily asked of the experienced frontend folks to evaluate their understanding of the internals. In this blog, we will learn to implement a setInterval polyfill in Jav...

Read full article on FrontendGeek

Frontend interview for experienced folks required to test on the javascript internals and implementation of polyfills are the best way to evaluate the understanding of timers working under the hood. Understanding clearTimeout polyfill in JavaScript are one of those questions to understand the internals. In this blog, we will focus on implementing a clearTimeout polyfill. By the end, you will know how to stop a timer created by your own custom setTimeout function. Table of Contents Understand s...

Read full article on FrontendGeek

setTimeout in JavaScript is a very commonly used function to add a delay in the execution of a callback function, and understanding the internal workings of setTimeout gives a solid understanding of asynchronous JavaScript. In this post, we will learn how to implement a simple polyfill for setTimeout using JavaScript Table of Contents Expected scenarios for setTimeout polyfill Implementation of setTimeout polyfill in JavaScript setTimeout polyfill code with example Explanation of the setTimeou...

Read full article on FrontendGeek

A fast website is a necessity in the current fast-paced world. It can be achieved by Web Performance optimizations of the web application, and to understand the optimization, you must understand how browsers turn HTML/CSS/JS into rendered pixels. This is where Critical Rendering Path (CRP) comes into play. Table of Contents Jump directly to the topic What is Critical Rendering Path in a nutshell? What all steps are executed by browser in the CRP? How optimizing CRP helps in improving web perfo...

Read full article on FrontendGeek

Machine Coding Round Interview is one of the most common interview round in frontend interviews to test your hands-on frontend skills. This evaluation happens by giving a real life frontend problem statement to code and execute. This guide consists of more than 20 Machine Coding Round questions that includes the required functionalities that an Interviewer is looking for while evaluating the machine coding solutions. It will help you to understand the right approach for a machine coding round in...

Read full article on FrontendGeek

Machine coding interviews are a must in all tech companies hiring for frontend/UI roles at any level. There are plenty of machine coding questions out there that can become part of the frontend interview, but the underlying concepts are quite common. As part of this Frontend Machine Coding Cheat-Sheet, we aim to capture common concepts in a single blog post, so that anyone can revise all the important concepts from a single place. Let's jump to the topic Search Logic Search for a text in the...

Read full article on FrontendGeek

🧩 Introduction Recently, I built and published my own npm package — a minimal state management library for React. It’s tiny, fast, supports selectors for optimal re-renders, and works seamlessly with TypeScript. My goal wasn't just to create another state library — I wanted to learn the complete journey of publishing a package to npm, from writing the logic to bundling it properly and finally seeing it live on npmjs.com. I also needed a lightweight state manager for my persona...

Read full article on FrontendGeek

Understanding hoisting in JavaScript is important to understand how the variables and function scope behave in different scenarios. There are different scenarios where hoisting behaves differently than anticipated, which makes hoisting a favourite topic for Frontend Interviews. In this post, we have curated 5 examples with detailed explanations which cover important scenarios to understand hoisting in depth. 👇 Jump to the examples Example 1: Overshadow variable Example 2: Hoisting with differe...

Read full article on FrontendGeek

Stopwatch implementation is one of the most commonly asked Frontend Machine Coding Question, and this machine coding question helps to evaluate the understanding of useEffect hook as part of react application. In this post, we will going to understand the implementation of a stopwatch using React that tracks elapsed time in hours, minutes, and seconds. Component States & Hooks It uses the useState hook to manage 2 component states to track time and status. [ millisecond, setMillisecond] state i...

Read full article on FrontendGeek

Its important to know the latest enhancements in the protocols to take the better decision while choosing between HTTP/2 vs HTTP/1.1. This decision can be based on the functionality (like web sockets doesn't support HTTP/2) or the server requirements. Let's check out the major features of both widely used protocols and the difference between HTTP/2 and HTTP/1.1 Table of contents HTTP/1.1 Major Features HTTP/2 Major Features Major Differences between HTTP/2 vs HTTP/1.1 HTTP/1.1 Major Features...

Read full article on FrontendGeek

In order to understand the browser functionality, Its important to know what happens when you type google.com in the browser search bar. This overall process, primarily includes client-server communication and webpage rendering/painting in the browser. Also it's a very frequently asked frontend interview question at all the levels. In this post, we will briefly describe the overall process into 3 major steps, here are those Step 1: URL Parsing & Server Lookup URL Parsing When the user types goo...

Read full article on FrontendGeek

Debounce in JavaScript is a very effective technique to improve web performance, especially for applications with higher user interaction. This is also very useful for saving the network bandwidth by delaying the API calls and invoking when user interaction gets paused for a certain interval. Let's understand 👇👇 Table of Content Debouncing in JavaScript Debouncing use-case examples Debouncing in JavaScript Debouncing in javascript is a technique to delay the function call for a certain inter...

Read full article on FrontendGeek

Throttling in javascript is a very frequently used technique nowadays to improve performance by limiting the number of calls when the user uses any web application and there is a function call which used to happen on an event, In this case, we can't control the user behaviour but behind the scenes, we can limit the function calls so that there won't be any performance issue. Let's see the implementation and how it works. Table of content Throttling in JavaScript Throttling Use-Case Example Fina...

Read full article on FrontendGeek

Storing data in the client-side browser is a common case to provide personalized user experiences with the web application and JavaScript local storage, session storage, and cookies are the most common ways to store the data in these cases. There are certain differences between these storage mechanisms and understanding these differences is important to choose the best-suited one for the web application. This post covers the implementation, usage and differences to help you to choose among these...

Read full article on FrontendGeek

Jump to the topic How does Promise.any work in javascript? Examples Expected Functionality for Promise.any Implementation Promise.any Polyfill in Javascript - Detailed Explanation How does Promise.any work in JavaScript? Promise.any() takes multiple promises and returned the first one that resolved. If all promises reject, it returns an AggregateError object containing all the error messages for all the rejected promises. Promise.any static method is quite useful in the cases where in the a...

Read full article on FrontendGeek

Table of Content How does Promise.race work in javascript? Examples Expected Functionality for Custom Promise.race Implementation Promise.race Polyfill in Javascript - Detailed Explanation # How does Promise.race work in JavaScript? Promise.race takes the iterable (such as array) of promises, and returns the first settled promise, here settled promise can be resolved or rejected. As name "race" suggested, whichever promise settled first will be returned by Promise.race() method. Examples Ex...

Read full article on FrontendGeek

Table of content: Understand Promise.allSettled Static Method Promise.allSettled Polyfill in JavaScript - Step by Step Explanation Handle Multiple Aync API Calls using Promise.allSettled Understand Promise.allSettled Static Method Static Promise.allSettled([Promises]) function works similar to Promise.all() method to execute all the promises parallelly but rather than returning a failure response in case of one or more rejected promises, allSettled method takes array of promises as an input, a...

Read full article on FrontendGeek