Hàm Factory trong useMemo: Hướng dẫn chi tiết cho lập trình viên

Giới thiệu về hàm Factory

Hàm factory (hàm tạo) là một khái niệm quan trọng trong lập trình JavaScript, đặc biệt là khi làm việc với React. Hàm factory là một hàm tạo ra và trả về các đối tượng hoặc hàm khác. Khác với các hàm tạo sử dụng từ khóa new, hàm factory là những hàm bình thường không yêu cầu cú pháp đặc biệt.

Ví dụ về hàm Factory

Dưới đây là một ví dụ đơn giản về hàm factory để tạo một đối tượng người dùng:

function createUser(name) {
  return {
    name,
    sayHi() {
      return `Chào, mình là ${name}`;
    }
  };
}

const user1 = createUser("Cathy");
console.log(user1.sayHi()); // Chào, mình là Cathy

Hàm createUser ở trên là một hàm factory, nó tạo ra một đối tượng người dùng mới với tên và phương thức sayHi để chào hỏi.

Tại sao nên sử dụng hàm Factory?

Sử dụng hàm factory có nhiều lợi ích:

• ✅ Tránh sử dụng từ khóa new
• ✅ Dễ dàng tùy chỉnh cho mỗi thể hiện
• ✅ Làm việc tự nhiên với closures (trạng thái riêng tư)

Khi nào React sử dụng hàm Factory

Trong React, các hook như useMemo(() => computeSomething(), [deps]) mong đợi một hàm factory. React sẽ gọi hàm này khi các phụ thuộc thay đổi.

Hàm () => computeSomething() được coi là một hàm factory, nó tạo ra một giá trị mới chỉ khi cần thiết. Hàm factory phải không có tham số vì React sẽ tự động gọi nó.

Phân biệt giữa hàm bình thường và hàm Factory

• Hàm bình thường: Chỉ thực hiện một tác vụ khi bạn gọi nó.

  javascript Copy

  function add(a, b) {
    return a + b;
  }
  console.log(add(2, 3)); // 5

• Hàm Factory: Thay vì thực hiện công việc ngay lập tức, nó tạo ra và trả về một cái gì đó (đối tượng, hàm khác, hoặc tài nguyên).

  javascript Copy

  function createUser(name) {
    return {
      name,
      sayHi() {
        return `Chào, mình là ${name}`;
      }
    };
  }

Hàm Factory và hàm Constructor

• Hàm factory: Là một hàm bình thường trả về một đối tượng hoặc hàm mới.

• Hàm constructor (với new): Là một hàm đặc biệt mà từ khóa this tạo ra đối tượng.

  javascript Copy

  function User(name) {
    this.name = name;
  }
  const u = new User("Cathy"); // constructor

Trong ngữ cảnh của useMemo

Khi nói đến hàm factory cho useMemo, chúng ta có:

useMemo(() => computeSomething(a, b), [a, b]);

Hàm () => computeSomething(a, b) là một hàm factory. React chỉ gọi nó khi cần thiết để "tạo" (sản xuất) giá trị đã ghi nhớ.

Sử dụng useMemo một cách hiệu quả

Gọi hàm bình thường trong render

Khi hàm được gọi, nó sẽ chạy mỗi khi component được render lại:

import React from 'react';

function expensiveCalculation(n) {
  console.log("Đang chạy expensiveCalculation...");
  let total = 0;
  for (let i = 0; i < n * 1_000_000; i++) {
    total += i;
  }
  return total;
}

export default function Example({ n }) {
  // ❌ chạy trên mỗi render, ngay cả khi n không thay đổi
  const result = expensiveCalculation(n);

  return <p>Kết quả là {result}</p>;
}

Nếu component Example được render lại vì bất kỳ lý do gì, ngay cả khi n không thay đổi, hàm expensiveCalculation sẽ chạy lại (lãng phí CPU).

Hàm Factory với useMemo

Bằng cách cung cấp cho React một hàm factory và danh sách phụ thuộc:

import React, { useMemo } from 'react';

function expensiveCalculation(n) {
  console.log("Đang chạy expensiveCalculation...");
  let total = 0;
  for (let i = 0; i < n * 1_000_000; i++) {
    total += i;
  }
  return total;
}

export default function Example({ n }) {
  // ✅ React chỉ gọi hàm factory nếu `n` thay đổi
  const result = useMemo(() => expensiveCalculation(n), [n]);

  return <p>Kết quả là {result}</p>;
}

Hàm () => expensiveCalculation(n) là hàm factory. React lưu trữ kết quả (result). Trong lần render tiếp theo:

• Nếu n giống nhau → React sử dụng lại giá trị đã lưu, hàm factory không được gọi.
• Nếu n thay đổi → React gọi lại hàm factory để tạo ra một kết quả mới.

Mẹo hiệu suất khi sử dụng useMemo

• Tối ưu hóa hiệu suất: Sử dụng useMemo để chỉ tính toán giá trị khi có sự thay đổi trong phụ thuộc, giúp giảm tải cho CPU và tăng tốc độ render của ứng dụng.
• Cảnh giác với việc sử dụng quá mức: Dù useMemo có thể giúp cải thiện hiệu suất, việc sử dụng quá mức có thể làm cho mã trở nên phức tạp và khó bảo trì hơn.

Những cạm bẫy thường gặp

• Quên cập nhật danh sách phụ thuộc: Nếu bạn không cập nhật danh sách phụ thuộc chính xác, giá trị đã ghi nhớ có thể trở nên lỗi thời hoặc không chính xác.
• Sử dụng không đúng ngữ cảnh: Sử dụng useMemo ở nơi không cần thiết có thể gây ra độ phức tạp không cần thiết cho mã.

Tổng kết

Hàm factory là một công cụ mạnh mẽ trong JavaScript, đặc biệt khi làm việc với React. Bằng cách hiểu rõ cách sử dụng chúng trong useMemo, bạn có thể tối ưu hóa hiệu suất ứng dụng của mình một cách hiệu quả. Hãy thử áp dụng những kiến thức này vào các dự án của bạn ngay hôm nay! Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại để lại câu hỏi bên dưới.

Câu hỏi thường gặp (FAQ)

1. Hàm factory là gì?
   Hàm factory là một hàm tạo ra và trả về các đối tượng hoặc hàm khác, không cần sử dụng từ khóa new.
2. Tại sao nên sử dụng useMemo?
   useMemo giúp tối ưu hóa hiệu suất bằng cách chỉ thực hiện tính toán khi có sự thay đổi trong phụ thuộc.
3. Có những cạm bẫy nào khi sử dụng useMemo?
   Một số cạm bẫy bao gồm việc quên cập nhật danh sách phụ thuộc và sử dụng không đúng ngữ cảnh.