useRef is a React Hook that lets you reference a value that’s not needed for rendering. Call useRef at the top level of your component to declare a ref. Parameters initialValue: The value you want the ref object’s current property to be initially. It can be a value of any type. This argument is ignored after the…

The displayName property in React is used to set a custom name for a component, mainly for debugging and developer tools. 1. Why Use displayName? By default, React components are named based on their function name or class name. However, in some cases: Setting displayName helps in React DevTools and error messages. 2. Using displayName…

A polyfill is a piece of JavaScript code that adds support for modern features in older browsers that do not natively support them. It “fills the gap” by mimicking missing functionality. Why Do We Need Polyfills? Older browsers (like Internet Explorer) do not support modern JavaScript features. Polyfills ensure compatibility so that newer features can…

In React, component names must start with an uppercase letter due to how JSX differentiates between HTML elements and custom components. Reasons for Capitalizing React Component Names JSX Differentiation JSX Compiles to React.createElement() Example of JSX compilation: Compiles to: But if it were <myComponent />, React would assume it’s an HTML tag, which doesn’t exist.…

What is Code-Splitting? Code-splitting is a technique that breaks a large JavaScript bundle into smaller chunks. Instead of loading the entire application at once, it loads only the necessary code when required. Why is this important? How Code-Splitting Works in React React automatically supports code-splitting through dynamic imports and React.lazy. lazy lets you defer loading…

What is React.memo? React.memo is a higher-order component (HOC) that optimizes functional components by preventing unnecessary re-renders. Why Use React.memo? By default, when a parent component re-renders, all its child components re-render, even if their props haven’t changed. React.memo prevents these unnecessary re-renders by memoizing the component and only re-rendering it when its props change.…

In React, falsy values (false, null, undefined, 0, NaN, “”) are not rendered when used inside JSX. If you directly try to display a false value inside JSX, React skips it instead of rendering anything. Example: Falsy values don’t render 1. Using String Conversion (String() or .toString()) To explicitly print false, convert it to a…

Introduction React automatically batches multiple state updates inside event handlers to improve performance. However, in some cases, you may want to prevent automatic batching and force React to update the state synchronously. This tutorial explains automatic batching, why it happens, and how to disable it using flushSync. What is Automatic Batching? Automatic batching means that…

Introduction In React, event handling plays a crucial role in making applications interactive. While most developers are familiar with the onClick event, fewer are aware of onClickCapture. This tutorial explains the event phases, how onClickCapture differs from onClick, and when to use it. Event Propagation Phases in React React’s event system follows the Event Propagation…

You can enable Strict Mode by wrapping your application (or part of it) inside <React.StrictMode>. Example: Enabling Strict Mode in index.js What Does Strict Mode Do? Strict Mode performs the following checks and warnings in development mode: Why Does useEffect Run Twice in Strict Mode? If you’re using Strict Mode, you might notice that your…