React Đơ Sao? Xử Lý "Tính Toán Nặng" Để UI Luôn Mượt Mà!

Chào bạn! Đã bao giờ bạn đang dùng một ứng dụng React, bỗng dưng mọi thứ "đứng hình" vài giây, chuột không di chuyển được hay nút bấm không phản hồi chưa? Đó chính là dấu hiệu của một "tính toán nặng" (expensive computation) đang diễn ra, khiến giao diện người dùng (UI) bị treo.

Trong thế giới của React và JavaScript, mọi thứ thường chạy trên một luồng duy nhất (main thread) của trình duyệt. Khi một tác vụ đòi hỏi nhiều tài nguyên CPU như xử lý dữ liệu lớn, tính toán phức tạp, hoặc render hàng ngàn phần tử cùng lúc, nó sẽ chiếm dụng toàn bộ luồng này. Kết quả? UI không thể phản hồi các tương tác của người dùng, dẫn đến trải nghiệm khó chịu.

Đừng lo lắng! Bài viết này sẽ trang bị cho bạn những "vũ khí" lợi hại để "thuần hóa" những phép tính nặng đô đó, giữ cho ứng dụng React của bạn luôn mượt mà và nhạy bén.

"Tính Toán Nặng" Là Gì và Tại Sao Nó Gây Đơ UI?

Như đã nói, JavaScript trong trình duyệt là đơn luồng. Điều này có nghĩa là tại một thời điểm, chỉ có thể có một tác vụ được thực thi. Khi bạn thực hiện một phép tính mất nhiều thời gian (ví dụ: lặp qua một mảng chứa 100.000 phần tử để tìm kiếm, xử lý một hình ảnh độ phân giải cao, hoặc thực hiện một thuật toán phức tạp), luồng chính sẽ bị chặn. Trong thời gian này, trình duyệt không thể cập nhật UI, xử lý sự kiện click, hay thậm chí cuộn trang. Đây chính là nguyên nhân gây ra hiện tượng UI "đơ" hay "treo".

Các Chiến Lược "Giải Cứu" UI Của Bạn

1. Tối Ưu Hóa Với Memoization (useMemo, useCallback, React.memo)

Memoization là kỹ thuật ghi nhớ kết quả của một hàm hoặc một component để tránh tính toán lại hoặc render lại không cần thiết khi các đầu vào (dependencies/props) không thay đổi. Nó giống như việc bạn ghi chú lại kết quả của một phép tính phức tạp, lần sau cần dùng lại chỉ việc xem ghi chú thay vì tính toán lại từ đầu.

• useMemo: Ghi nhớ giá trị của một phép tính.

  Sử dụng khi bạn có một phép tính tốn kém và muốn kết quả của nó chỉ được tính toán lại khi các dependency của nó thay đổi.

  import React, { useMemo } from 'react';
  
  function ExpensiveComponent({ data }) {
    // Giả sử filterData là một hàm tốn kém
    const filteredAndSortedData = useMemo(() => {
      console.log("Performing expensive computation...");
      return data
        .filter(item => item.isActive)
        .sort((a, b) => a.name.localeCompare(b.name));
    }, [data]); // Chỉ tính lại khi 'data' thay đổi
  
    return (
      <div>
        <h3>Filtered & Sorted Data:</h3>
        <ul>
          {filteredAndSortedData.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }

• useCallback: Ghi nhớ định nghĩa hàm.

  Hữu ích khi bạn truyền một hàm callback xuống một component con được memoize (sử dụng React.memo) hoặc khi hàm đó là một dependency của một useEffect/useMemo khác, để tránh việc tạo lại hàm mới trên mỗi lần render của component cha.

  import React, { useCallback, useState } from 'react';
  
  function ParentComponent() {
    const [count, setCount] = useState(0);
  
    // Hàm này sẽ chỉ được tạo lại khi 'count' thay đổi
    const handleClick = useCallback(() => {
      setCount(prevCount => prevCount + 1);
    }, [count]);
  
    return (
      <div>
        <p>Count: {count}</p>
        <ChildComponent onClick={handleClick} />
      </div>
    );
  }
  
  const ChildComponent = React.memo(({ onClick }) => {
    console.log("ChildComponent rendered"); // Sẽ không render lại nếu onClick không đổi
    return <button onClick={onClick}>Increment</button>;
  });

• React.memo: Ghi nhớ component.

  Một Higher-Order Component (HOC) giúp ngăn chặn component function re-render nếu props của nó không thay đổi. Rất hiệu quả khi component con nhận các props phức tạp hoặc khi nó tự nó là một component nặng.

  import React from 'react';
  
  const MyPureComponent = React.memo(function MyComponent(props) {
    // Component này chỉ re-render nếu props thay đổi
    console.log("MyPureComponent is rendering...");
    return <div>{props.value}</div>;
  });

Lưu ý quan trọng: Memoization cũng có chi phí riêng (tốn bộ nhớ để lưu trữ kết quả và thời gian để so sánh dependencies). Đừng lạm dụng! Chỉ sử dụng khi bạn xác định được rằng có một phép tính/render thực sự tốn kém đang xảy ra.

2. "Tống Cổ" Tính Toán Nặng Ra Khỏi Main Thread Với Web Workers

Khi memoization không đủ, hoặc phép tính của bạn quá nặng đến mức vẫn chặn luồng chính, Web Workers là giải pháp tối ưu. Web Workers cho phép bạn chạy các script trong một luồng nền riêng biệt, hoàn toàn không chặn luồng chính của trình duyệt. Điều này có nghĩa là UI của bạn vẫn sẽ mượt mà, phản hồi tốt trong khi tác vụ nặng đang được xử lý ở "hậu trường".

Khi nào sử dụng?

• Xử lý dữ liệu lớn (ví dụ: phân tích hàng triệu bản ghi).
• Mã hóa/giải mã dữ liệu.
• Nén/giải nén file.
• Tính toán đồ họa 3D phức tạp.

Cơ chế hoạt động đơn giản:

1. Bạn tạo một instance của Worker, trỏ đến một file JavaScript riêng biệt.
2. Gửi dữ liệu đến worker bằng worker.postMessage().
3. Worker xử lý dữ liệu.
4. Worker gửi kết quả trở lại luồng chính bằng postMessage().
5. Luồng chính nhận kết quả qua sự kiện onmessage của worker.

// Trong component React (main.js)
const worker = new Worker('worker.js');

// Gửi dữ liệu cần xử lý
worker.postMessage({ data: largeDataSet, operation: 'sort' });

// Lắng nghe kết quả từ worker
worker.onmessage = (event) => {
  const result = event.data;
  console.log('Kết quả từ worker:', result);
  // Cập nhật state hoặc UI với kết quả đã xử lý
};

worker.onerror = (error) => {
  console.error('Lỗi từ worker:', error);
};

// Trong worker.js (file worker riêng biệt)
onmessage = (event) => {
  const { data, operation } = event.data;
  let result;
  if (operation === 'sort') {
    // Thực hiện phép tính nặng ở đây
    result = data.sort((a, b) => a - b);
  }
  // Gửi kết quả trở lại luồng chính
  postMessage(result);
};

3. Kiểm Soát Tần Suất Với Debounce & Throttle

Mặc dù không trực tiếp làm cho các phép tính nhanh hơn, nhưng Debounce và Throttle giúp giảm số lần một hàm tốn kém được gọi. Điều này cực kỳ hữu ích cho các sự kiện kích hoạt liên tục như nhập liệu (input), cuộn trang (scroll), thay đổi kích thước cửa sổ (resize).

• Debounce: Đảm bảo rằng một hàm sẽ chỉ được gọi sau khi một khoảng thời gian nhất định đã trôi qua kể từ lần cuối cùng nó được kích hoạt.

  Ví dụ: Thanh tìm kiếm. Bạn muốn tìm kiếm khi người dùng ngừng gõ trong 300ms, chứ không phải tìm kiếm trên mỗi phím bấm.

  import React, { useState, useEffect } from 'react';
  import debounce from 'lodash.debounce'; // Cần cài đặt lodash
  
  function SearchBar() {
    const [searchTerm, setSearchTerm] = useState('');
    const [results, setResults] = useState([]);
  
    // Hàm giả định gọi API tìm kiếm
    const performSearch = (query) => {
      console.log("Searching for:", query);
      // Thực hiện gọi API hoặc tính toán tìm kiếm
      setResults([`Result for ${query} 1`, `Result for ${query} 2`]);
    };
  
    // Tạo hàm debounce
    const debouncedSearch = debounce(performSearch, 500);
  
    useEffect(() => {
      if (searchTerm) {
        debouncedSearch(searchTerm);
      } else {
        setResults([]);
      }
      // Cleanup debounce khi component unmount
      return () => {
        debouncedSearch.cancel();
      };
    }, [searchTerm, debouncedSearch]); // debouncedSearch là stable nhờ debounce
  
    return (
      <div>
        <input
          type="text"
          placeholder="Type to search..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        <ul>
          {results.map((result, index) => (
            <li key={index}>{result}</li>
          ))}
        </ul>
      </div>
    );
  }

• Throttle: Đảm bảo rằng một hàm sẽ không được gọi nhiều hơn một lần trong một khoảng thời gian nhất định.

  Ví dụ: Xử lý sự kiện cuộn trang. Bạn muốn cập nhật vị trí cuộn cứ mỗi 200ms một lần, chứ không phải hàng trăm lần mỗi giây.

  import React, { useEffect, useState } from 'react';
  import throttle from 'lodash.throttle'; // Cần cài đặt lodash
  
  function ScrollTracker() {
    const [scrollPosition, setScrollPosition] = useState(0);
  
    const handleScroll = () => {
      setScrollPosition(window.scrollY);
      console.log("Scroll position:", window.scrollY);
    };
  
    // Tạo hàm throttle
    const throttledScrollHandler = throttle(handleScroll, 200);
  
    useEffect(() => {
      window.addEventListener('scroll', throttledScrollHandler);
      return () => {
        window.removeEventListener('scroll', throttledScrollHandler);
        throttledScrollHandler.cancel(); // Cleanup throttle
      };
    }, [throttledScrollHandler]);
  
    return (
      <div style={{ height: '2000px', paddingTop: '100px' }}>
        <p>Scroll down to see position updates.</p>
        <p style={{ position: 'fixed', top: '20px', left: '20px' }}>
          Current scroll Y: {scrollPosition}px
        </p>
      </div>
    );
  }

4. "Ảo Hóa" Danh Sách Lớn (Virtualization)

Khi bạn cần hiển thị hàng trăm hoặc hàng ngàn item trong một danh sách, việc render tất cả chúng cùng lúc sẽ gây ra gánh nặng lớn cho trình duyệt. Virtualization (hoặc "windowing") là kỹ thuật chỉ render những item thực sự hiển thị trong viewport của người dùng, và tái sử dụng các phần tử DOM khi cuộn. Điều này giúp giảm đáng kể số lượng DOM node và cải thiện hiệu suất render.

Thư viện phổ biến:

• react-window (nhẹ, tập trung vào hiệu suất).
• react-virtualized (nhiều tính năng hơn, nhưng nặng hơn).

Dù không đi sâu vào code ví dụ ở đây, việc áp dụng các thư viện này thường đơn giản như việc bọc danh sách của bạn trong một component FixedSizeList hoặc VariableSizeList và cung cấp chiều cao/chiều rộng của các item.

Kết Luận

Việc xử lý "tính toán nặng" trong React không phải là một vấn đề không thể giải quyết. Với các công cụ như memoization (useMemo, useCallback, React.memo), Web Workers, debounce/throttle và virtualization, bạn có thể biến những ứng dụng "ì ạch" thành những trải nghiệm mượt mà, phản hồi nhanh chóng.

Hãy nhớ rằng, chìa khóa là hiểu rõ vấn đề của mình và chọn đúng công cụ. Đừng ngần ngại thử nghiệm và đo lường hiệu suất để tìm ra giải pháp tốt nhất cho ứng dụng của bạn. Chúc bạn thành công!