useLayoutEffect is a version of useEffect that fires before the browser repaints the screen. useLayoutEffect can hurt performance. Prefer useEffect when possible. References useLayoutEffect(setup, dependencies?) Call useLayoutEffect to perform the layout measurements before the browser repaints the screen. Parameters Returns useLayoutEffect returns undefined. Caveats  Use Cases for useLayoutEffect Here are common and practical scenarios where…

When building React applications that deal with large lists, rendering every item at once can lead to poor performance, sluggish UI, and high memory consumption. This is where the windowing technique comes in. Windowing is a performance optimization technique that only renders a subset of items visible in the viewport and a small buffer (the…

React has evolved significantly over the years—from class-based components to a more functional, declarative paradigm. Along with this evolution, new patterns and optimization techniques have emerged. One such pattern is render props, used for reusing component logic. Another is React.memo, used to prevent unnecessary renders by performing shallow comparison of props in functional components. However,…

What is React Context? React’s Context API allows you to share data (state or functions) globally across your component tree without passing props down manually at every level. Context is often used for: Basic flow: What is the Default Value in React Context? When you create a context using: The defaultValue you pass here is…

What is Prop Drilling? Prop Drilling is the process of passing data from a parent component down to deeply nested child components through intermediate components that don’t actually need that data themselves — they’re just passing it along. It usually happens when the component that needs the data is not directly connected to the component…

What is Concurrent Rendering? Concurrent Rendering is not a feature you “turn on” or call directly — it’s a set of internal rendering capabilities that React uses under the hood to make your application more responsive and efficient. Introduced in React 18, it gives React the ability to start rendering, pause, interrupt, prioritize, and resume…

Motivation When using React, you can think of the render() function as producing a tree of React elements at any given moment. When state or props change, a new tree is returned. React’s job is to efficiently update the actual UI to reflect the differences between the previous and current trees. While there are advanced…

1. Conditional Rendering Use an if statement or a ternary operator to control whether the component should be rendered: or 2. Returning null Inside the Component If you want the component itself to decide whether it should render: 3. Using React.memo() With Custom propsAreEqual You can use React.memo() to avoid re-rendering a component when props…

In Spring Boot, we use profiles (application-dev.yml, application-prod.yml) to manage different configurations. Similarly, in Vite, we can use environment files (.env) and a configuration file (config.ts) to manage settings for different environments. What We’ll Cover 1. Why Separate Configuration Files? Each environment (development, UAT, production) may have different: Instead of manually changing them every time,…

Introduction React provides a powerful way to encapsulate and reuse logic through Custom Hooks. Custom Hooks allow you to extract component logic into reusable functions, improving code readability and maintainability. This guide will cover: What Are Custom Hooks? A Custom Hook is a JavaScript function that follows the rules of React Hooks and allows stateful…