Skip to main content

How does React’s useMemo hook help performance, and what are the common mistakes when using it?

 Awesome follow-up! useMemo can definitely help with performance—but only if used correctly. Let's break it down:


How does React’s useMemo hook help performance, and what are the common mistakes when using it?

What useMemo Does


const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  • It memoizes (remembers) the result of a function.

  • Only recomputes when dependencies change.

  • Avoids unnecessary re-runs of expensive calculations on every render.

So, it helps with:

  • Heavy computations.

  • Avoiding re-renders of components when props haven't actually changed.

  • Stabilizing references (e.g. objects/arrays/functions) passed as props to children.

🧠 Common Use Cases

  • Calculating derived data from props or state.

  • Preventing re-renders when passing stable values to useEffect, React.memo components, etc.

  • Memoizing options/configs (e.g. chart settings, select dropdowns).

🚫 Common Mistakes

  1. Using it prematurely ("premature optimization")

    • Don’t use useMemo just to avoid re-running simple logic.

    • Example of overkill:

      const doubled = useMemo(() => num * 2, [num]); // 😬 unnecessary

  2. Ignoring dependencies

    • If your dependency array is incomplete, you'll get stale values.

      const result = useMemo(() => doSomething(x), []); // ❌ x isn’t in deps

  3. Using it for side effects

    • useMemo should be pure—no side effects like API calls or state updates.

    • Use useEffect for that instead.

  4. Expecting it to prevent re-renders

  5. Stabilizing functions? Use useCallback

    • If you're memoizing a function, useCallback is usually better:

      jsx
      const handleClick = useCallback(() => doSomething(id), [id]);

✅ When It's Worth It

  • You're doing expensive calculations (e.g., filtering, sorting, large data sets).

  • You're passing objects/functions as props to children wrapped in React.memo.

  • You're experiencing performance bottlenecks from unnecessary recalculations.

Popular posts from this blog

Explain the Angular compilation process: View Engine vs. Ivy.

 The Angular compilation process transforms your Angular templates and components into efficient JavaScript code that the browser can execute. Over time, Angular has evolved from the View Engine compiler to a newer, more efficient system called Ivy . Here's a breakdown of the differences between View Engine and Ivy , and how each affects the compilation process: 🔧 1. What Is Angular Compilation? Angular templates ( HTML inside components) are not regular HTML—they include Angular-specific syntax like *ngIf , {{ }} interpolation, and custom directives. The compiler translates these templates into JavaScript instructions that render and update the DOM. Angular uses Ahead-of-Time (AOT) or Just-in-Time (JIT) compilation modes: JIT : Compiles in the browser at runtime (used in development). AOT : Compiles at build time into efficient JS (used in production). 🧱 2. View Engine (Legacy Compiler) ➤ Used in Angular versions < 9 🔍 How It Works: Compiles templat...
Read more

What are the different types of directives in Angular? Give real-world examples.

In Angular, directives are classes that allow you to manipulate the DOM or component behavior . There are three main types of directives: 🧱 1. Component Directives Technically, components are directives with a template. They control a section of the screen (UI) and encapsulate logi c. ✅ Example: @Component ({ selector : 'app-user-card' , template : `<h2>{{ name }}</h2>` }) export class UserCardComponent { name = 'Alice' ; } 📌 Real-World Use: A ProductCardComponent showing product details on an e-commerce site. A ChatMessageComponent displaying individual messages in a chat app. ⚙️ 2. Structural Directives These change the DOM layout by adding or removing elements. ✅ Built-in Examples: *ngIf : Conditionally includes a template. *ngFor : Iterates over a list and renders template for each item. *ngSwitch : Switches views based on a condition. 📌 Real-World Use: < div * ngIf = "user.isLoggedIn...
Read more

Explain the concept of ControlValueAccessor in custom form components.

 In Angular, the ControlValueAccessor interface is what allows custom form components to work seamlessly with Angular forms (both reactive and template-driven). 🧠 What is ControlValueAccessor ? It’s an Angular bridge between your custom component and the Angular Forms API . When you use a custom form component (like a date picker, dropdown, slider, etc.), Angular doesn't automatically know how to read or write its value. That’s where ControlValueAccessor comes in. It tells Angular: How to write a value to the component How to notify Angular when the component’s value changes How to handle disabled state 📦 Common Built-in Examples: <input> and <select> already implement ControlValueAccessor You implement it when creating custom form controls 🔧 Key Methods in the Interface Method Purpose writeValue(obj: any) Called by Angular to set the value in the component registerOnChange(fn: any) Passes a function to call when the component value ch...
Read more