Hooks vs Class Components Class Components: Use state and lifecycle methods inside ES6 classes. Hooks (Functional Components): Use useState, useEffect, and other hooks in functions for state and side effects.…

What Are React Portals? React Portals allow you to render a component outside the parent DOM hierarchy while maintaining the React tree.Useful for modals, tooltips, or overlays. Basic Syntax ReactDOM.createPortal(child,…

React Memo vs useMemo vs useCallback React.memo: Wraps a component to prevent unnecessary re-renders if props are unchanged. useMemo: Memoizes computed values to avoid recalculating on every render. useCallback: Memoizes…

Suspense vs Error Boundary Suspense: Handles loading states for lazy-loaded components or data fetching. Error Boundary: Catches runtime errors in component tree and displays fallback UI. Suspense Example import React,…

Prop Drilling vs Context API Prop Drilling: Passing data through multiple component levels via props. Context API: Provides global state accessible by any component in the subtree, avoiding prop drilling.…

The useCallback hook memoizes a function so it is only recreated when dependencies change.It helps prevent unnecessary re-renders of child components. Basic Syntax const memoizedCallback = useCallback(() => { //…

The useMemo hook memoizes a computed value, preventing recalculation on every render.It’s used to optimize performance for expensive computations. Basic Syntax const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);…

The useContext hook allows functional components to access context values directly.It eliminates the need for Context.Consumer components. Basic Syntax const value = useContext(MyContext); Returns the current context value Must be…

What Is React Context API? React Context API allows you to share data across components without passing props manually at every level.It’s useful for themes, authentication, and global state. Basic…

useDeferredValue allows you to defer updates for non-urgent values.It’s useful to avoid blocking the UI when updating large lists or heavy computations. Basic Syntax const deferredValue = useDeferredValue(value); Returns a…