React design patterns are essential for building scalable and maintainable applications. In this guide, we will delve into 7 essential React design patterns that every frontend developer should be familiar with. These patterns are commonly discussed in technical interviews and understanding them will not only help you ace your interviews but also make you a better React developer. Directly Jump to the React Design Pattern Higher-Order Components (HOCs) Pattern Render Prop Pattern Context Provi...

Read full article on FrontendGeek

Mastering the 13 Core React Hooks is essential for every frontend developer preparing for React interviews. These hooks form the foundation of modern React development and are frequently asked in frontend interviews at startups as well as top product-based companies. This guide serves as a quick cheat sheet to help you revise all 13 core React Hooks with concise explanations, practical code examples, and common use cases. Let's dive into the 13 Core React Hooks every frontend developer should k...

Read full article on FrontendGeek

In the modern frontend landscape, React hooks have become the standard for managing state, side effects, and component lifecycles. Mastering them is no longer optional; it is a prerequisite for any developer aiming to pass a technical interview. Here are the Top 30 Frequently Asked React Hooks Interview Questions, ranging from foundational concepts to advanced performance patterns. Foundations of Hooks Q1. What are React Hooks and why were Hooks introduced in React? React Hooks are functions tha...

Read full article on FrontendGeek

In frontend technical interviews, mastering the nuances of React hooks is often the difference between a junior and a senior candidate. Understanding when to use a specific hook and the trade-offs involved is crucial for building efficient, maintainable applications. Below are the eight critical React hook comparisons that can make or break your next frontend interview. 1. React.memo vs. useMemo The primary difference lies in what they memoize: React.memo is a higher-order component used to wrap...

Read full article on FrontendGeek

When working with React, developers often encounter situations where they need to optimize performance and manage side effects. Two key hooks that help achieve these goals are useMemo and useEffect. In this blog post, we will delve into the differences between useMemo and useEffect, their use cases, and the trade-offs involved. Understanding when to use each hook is crucial for building efficient and maintainable React applications and is a common topic in frontend technical interviews. Understa...

Read full article on FrontendGeek

When building React applications, you often need unique IDs to associate labels with form inputs, create accessible components, or identify elements in the DOM. React provides the useId() hook to generate stable and unique IDs. Another common approach is using Math.random(). While both can generate IDs, they serve different purposes and have important differences, especially when working with Server-Side Rendering (SSR). In this blog, we'll compare useId() and Math.random(), explore their use ca...

Read full article on FrontendGeek

The useEffect hook in React is a powerful tool for managing side effects in functional components. While it provides a clean way to perform actions after render, there are common pitfalls that developers might encounter when dealing with asynchronous operations. In this blog post, we will explore these pitfalls and discuss strategies to avoid them. 7 Common Pitfalls of the useEffect Hook (with Examples) The useEffect() Hook is one of the most powerful features in React, but it's also one of the...

Read full article on FrontendGeek

React provides us with powerful hooks to optimize performance and improve user experience. Two such hooks, useDeferredValue and useTransition, play a crucial role in managing asynchronous updates and improving the perceived performance of React applications. Understanding useDeferredValue The useDeferredValue hook is used for deferring updates to a value in React. It allows delaying the update of a value until a specified time has passed. This can help in reducing the load on the main thread and...

Read full article on FrontendGeek

In React, useRef and createRef are two commonly used tools for managing references to DOM elements or values within functional components. While both can achieve similar outcomes, they have distinct differences in terms of usage and behavior. This blog post will explore the differences between useRef and createRef, their use cases, and provide guidance on when to choose one over the other in React applications. Table of Content Difference between useRef vs createRef createRef() useRef Hook Ke...

Read full article on FrontendGeek

useMemo and useCallback are two important hooks in React that help optimize performance by memoizing values and functions, respectively. While they may seem similar, they serve different purposes based on the data they handle. In this blog, we delve into finding out the key differences between useMemo vs useCallback hook in react, Table of Content Understanding useMemo Hook Understanding useCallback Hook useMemo vs useCallback: What is the Difference Key Differences Code Example Understand...

Read full article on FrontendGeek

When it comes to optimizing performance in React applications, developers often encounter the need to use React.memo and useMemo. While both are essential tools, it's crucial to understand the differences between them and when to choose one over the other based on the specific requirements of your application. In this blog, Let's delve into the blog to understand the key differences between React.memo and useMemo React.memo vs useMemo: Key Differences Before delving into specific use cases, let'...

Read full article on FrontendGeek

React provides two important hooks - useState and useRef - that help manage state and reference elements within functional components. Understanding the differences between useState and useRef is crucial for frontend developers to write efficient and maintainable React applications. This is also one of the most common questions asked in React interviews. In this blog, let's delve into the difference between useRef and useState hooks. useState The useState hook is commonly used to manage state va...

Read full article on FrontendGeek

When building React applications, understanding the nuances between useEffect and useLayoutEffect is crucial for optimizing performance and ensuring proper rendering. In this blog post, we will delve into the differences between these two hooks, explore their use cases, advantages, and disadvantages, and learn when to choose one over the other in React applications and interviews. Difference Between useEffect and useLayoutEffect useEffect and useLayoutEffect are both hooks provided by React to p...

Read full article on FrontendGeek

When working with state management in React, developers often come across two popular hooks: useState and useReducer. While both can be used to manage state in functional components, they serve different purposes and have specific use cases. In this blog, we will delve into the differences between useState and useReducer, explore their trade-offs, and provide insights on when to choose one over the other. Table of Content Understanding useState Understanding useReducer useState vs useReducer: D...

Read full article on FrontendGeek

The JSON.parse() method in JavaScript is used to parse a JSON string and transform it into a JavaScript object. However, for older browsers that do not support this method, a polyfill can be implemented to provide this functionality. Code Implementation: JSON Parse Polyfill In the case of JSON.parse(), if a browser does not support this method, we can create a polyfill that mimics its behavior to ensure consistent functionality across different browsers. There are 3 appraoches to implement the p...

Read full article on FrontendGeek

The JSON.stringify() method converts a JavaScript object or value to a JSON string. However, in some older browsers that do not support this method, a polyfill is required to emulate its behavior. In the case of JSON.stringify(), a polyfill can be used to ensure consistent behavior across different environments. Implementation of JSON Stringify Polyfill To create a polyfill for JSON.stringify(), we need to check if the method is already available in the environment. If not, we define our own im...

Read full article on FrontendGeek

In this blog post, we will delve into creating a custom useKeyPress hook in React. This hook will enable us to listen for specific keypress events and trigger actions accordingly. Let's dive into the implementation details. Prerequisites This custom hook implementation required an understanding of the registering and deregistering of event listeners and handling key-down events. Implementation of useKeyPress Hook Let's start by creating a custom hook named useKeyPress that will listen for a spec...

Read full article on FrontendGeek

In frontend development, responsive design is crucial to ensure that websites adapt well to various screen sizes and devices. Media queries in CSS help achieve this responsiveness by applying different styles based on the device's characteristics. However, handling this dynamically in React components can be challenging. To simplify this process, we can create a custom hook called useMediaQuery that allows us to conditionally render components based on the viewport size. What do you need to know...

Read full article on FrontendGeek

In React applications, monitoring the scroll position is a common requirement for various functionalities like lazy loading, sticky headers, infinite scrolling, animations, etc. Creating a custom useScrollPosition hook can simplify handling scroll events and make the codebase more modular and reusable. In this blog, we will delve into the code implementation and explanation of the custom useScrollPosition() hook for a solid understanding. Common use cases Here are the most common user cases to u...

Read full article on FrontendGeek

API polling is a common requirement in frontend development to fetch data from a server at regular intervals. In React, we can create a custom usePolling hook to encapsulate the logic of fetching data at specified intervals. This blog post will cover the code implementation and usage of the custom usePolling hook in React. What you need to know Understanding of React hooks Fetch API call implementation Code Implementation - usePolling Hook Let's create a custom usePolling hook that fetches dat...

Read full article on FrontendGeek

There are several applications, like social networks, where there are requirements to know the online and offline status of the users. This logic can be separated out in the custom hook so that it can be quickly used anywhere in the code. In this blog post, we will explore how to create a custom useOnlineStatus() hook in React to monitor the online status of a device. This hook will be useful for applications that need to perform actions based on the device's online/offline status. Code Implemen...

Read full article on FrontendGeek

Implement custom useClipboard() Hook in React Frontend developers often need to work with clipboard functionality in web applications. In this blog post, we will explore how to implement a custom useClipboard() hook in React to easily handle copying content to the clipboard. This hook will encapsulate the logic required to interact with the clipboard API and provide a reusable solution for copying text. Understanding the Clipboard API The Clipboard API provides a way to programmatically interact...

Read full article on FrontendGeek

Infinite scrolling is a popular technique used in web applications to load content continuously as the user scrolls down the page. React provides us with the Intersection Observer API to monitor elements entering or exiting the viewport. In this blog post, we will delve into creating a custom useIntersectionObserver hook in React to facilitate infinite scrolling efficiently. useIntersectionObserver Hook: Code Implementation Let's start by creating our custom useIntersectionObserver hook in React...

Read full article on FrontendGeek

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 CSS RGB to HEX Converter 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 v...

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 HEX to RGB Converter 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...

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