React Automatic Batching: Tối ưu hóa cập nhật State để tăng hiệu suất

Hiệu suất của React là yếu tố then chốt để tạo ra giao diện người dùng mượt mà và phản hồi nhanh. Một trong những tính năng quan trọng được giới thiệu để cải thiện hiệu suất là gộp lệnh tự động (automatic batching). Kỹ thuật tối ưu hóa này tự động nhóm nhiều lần cập nhật state vào một lần re-render duy nhất, mang lại lợi ích hiệu suất đáng kể. Điều này đặc biệt phù hợp trong các ứng dụng phức tạp có sự thay đổi state thường xuyên.

React Automatic Batching là gì?

Batching, trong ngữ cảnh của React, là quá trình nhóm nhiều lần cập nhật state thành một bản cập nhật duy nhất. Trước React 18, việc gộp lệnh chỉ được áp dụng cho các cập nhật xảy ra bên trong các trình xử lý sự kiện (event handlers) của React. Các cập nhật bên ngoài trình xử lý sự kiện, chẳng hạn như trong setTimeout, promises, hoặc các trình xử lý sự kiện gốc (native event handlers), không được gộp lại. Điều này có thể dẫn đến các lần re-render không cần thiết và gây tắc nghẽn hiệu suất.

React 18 đã giới thiệu gộp lệnh tự động, mở rộng sự tối ưu hóa này cho tất cả các cập nhật state, bất kể chúng xảy ra ở đâu. Điều này có nghĩa là dù cập nhật state của bạn diễn ra bên trong một trình xử lý sự kiện React, một callback của setTimeout, hay một promise đã được giải quyết, React sẽ tự động gộp chúng lại với nhau thành một lần re-render duy nhất.

Tại sao Automatic Batching lại quan trọng?

Gộp lệnh tự động mang lại một số lợi ích chính:

• Cải thiện hiệu suất: Bằng cách giảm số lần re-render, việc gộp lệnh tự động của React giảm thiểu lượng công việc mà trình duyệt cần thực hiện để cập nhật DOM, dẫn đến giao diện người dùng nhanh hơn và phản hồi tốt hơn.
• Giảm chi phí render: Mỗi lần re-render đều yêu cầu React so sánh DOM ảo với DOM thực và áp dụng các thay đổi cần thiết. Việc gộp lệnh giảm chi phí này bằng cách thực hiện ít so sánh hơn.
• Ngăn chặn các trạng thái không nhất quán: Việc gộp lệnh đảm bảo rằng component chỉ re-render với trạng thái cuối cùng, nhất quán, ngăn chặn việc hiển thị các trạng thái trung gian hoặc tạm thời cho người dùng.

Cách Automatic Batching hoạt động

React thực hiện gộp lệnh tự động bằng cách trì hoãn việc thực thi các cập nhật state cho đến cuối bối cảnh thực thi hiện tại. Điều này cho phép React thu thập tất cả các cập nhật state đã xảy ra trong bối cảnh đó và gộp chúng lại thành một bản cập nhật duy nhất.

Hãy xem xét ví dụ đơn giản sau:

            function ExampleComponent() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  function handleClick() {
    setTimeout(() => {
      setCount1(count1 + 1);
      setCount2(count2 + 1);
    }, 0);
  }

  return (
    <div>
      <p>Count 1: {count1}</p>
      <p>Count 2: {count2}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

            

              
                Copy
              
            
          

Trước React 18, việc nhấp vào nút sẽ kích hoạt hai lần re-render: một cho setCount1 và một lần khác cho setCount2. Với tính năng gộp lệnh tự động trong React 18, cả hai cập nhật state đều được gộp lại, chỉ dẫn đến một lần re-render duy nhất.

Ví dụ về Automatic Batching trong thực tế

1. Cập nhật bất đồng bộ

Các hoạt động bất đồng bộ, chẳng hạn như tìm nạp dữ liệu từ một API, thường liên quan đến việc cập nhật state sau khi hoạt động hoàn tất. Gộp lệnh tự động đảm bảo rằng các cập nhật state này được gộp lại với nhau, ngay cả khi chúng xảy ra trong callback bất đồng bộ.

            function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return <div>Data: {JSON.stringify(data)}</div>;
}

            

              
                Copy
              
            
          

Trong ví dụ này, setData và setLoading đều được gọi bên trong hàm bất đồng bộ fetchData. React sẽ gộp các cập nhật này lại với nhau, dẫn đến một lần re-render duy nhất sau khi dữ liệu được tìm nạp và trạng thái tải được cập nhật.

2. Promises

Tương tự như các cập nhật bất đồng bộ, promises thường liên quan đến việc cập nhật state khi promise được giải quyết (resolve) hoặc bị từ chối (reject). Gộp lệnh tự động đảm bảo rằng các cập nhật state này cũng được gộp lại với nhau.

            function PromiseComponent() {
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        const success = Math.random() > 0.5;
        if (success) {
          resolve('Promise resolved!');
        } else {
          reject('Promise rejected!');
        }
      }, 1000);
    });

    myPromise
      .then((value) => {
        setResult(value);
        setError(null);
      })
      .catch((err) => {
        setError(err);
        setResult(null);
      });
  }, []);

  if (error) {
    return <p>Error: {error}</p>;
  }

  if (result) {
    return <p>Result: {result}</p>;
  }

  return <p>Loading...</p>;
}

            

              
                Copy
              
            
          

Trong trường hợp này, hoặc là setResult và setError(null) được gọi khi thành công, hoặc setError và setResult(null) được gọi khi thất bại. Dù thế nào đi nữa, gộp lệnh tự động sẽ kết hợp chúng thành một lần re-render duy nhất.

3. Trình xử lý sự kiện gốc (Native Event Handlers)

Đôi khi, bạn có thể cần sử dụng các trình xử lý sự kiện gốc (ví dụ: addEventListener) thay vì các trình xử lý sự kiện tổng hợp của React. Gộp lệnh tự động cũng hoạt động trong những trường hợp này.

            function NativeEventHandlerComponent() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    function handleScroll() {
      setScrollPosition(window.scrollY);
    }

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <p>Scroll Position: {scrollPosition}</p>;
}

            

              
                Copy
              
            
          

Mặc dù setScrollPosition được gọi bên trong một trình xử lý sự kiện gốc, React vẫn sẽ gộp các cập nhật lại với nhau, ngăn chặn việc re-render quá mức khi người dùng cuộn trang.

Tùy chọn không sử dụng Automatic Batching

Trong một số trường hợp hiếm hoi, bạn có thể muốn từ chối việc gộp lệnh tự động. Ví dụ, bạn có thể muốn buộc một cập nhật đồng bộ để đảm bảo rằng giao diện người dùng được cập nhật ngay lập tức. React cung cấp API flushSync cho mục đích này.

Lưu ý: Việc sử dụng flushSync nên được thực hiện một cách hạn chế, vì nó có thể ảnh hưởng tiêu cực đến hiệu suất. Nhìn chung, tốt nhất là nên dựa vào việc gộp lệnh tự động bất cứ khi nào có thể.

            import { flushSync } from 'react-dom';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    flushSync(() => {
      setCount(count + 1);
    });
  }

  return (<button onClick={handleClick}>Increment</button>);
}

            

              
                Copy
              
            
          

Trong ví dụ này, flushSync buộc React phải cập nhật state và re-render component ngay lập tức, bỏ qua việc gộp lệnh tự động.

Các phương pháp tốt nhất để tối ưu hóa cập nhật State

Mặc dù gộp lệnh tự động mang lại những cải tiến hiệu suất đáng kể, việc tuân thủ các phương pháp tốt nhất để tối ưu hóa cập nhật state vẫn rất quan trọng:

• Sử dụng Cập nhật hàm (Functional Updates): Khi cập nhật state dựa trên state trước đó, hãy sử dụng cập nhật hàm (tức là, truyền một hàm vào trình thiết lập state) để tránh các vấn đề với state cũ.
• Tránh cập nhật State không cần thiết: Chỉ cập nhật state khi cần thiết. Tránh cập nhật state với cùng một giá trị.
• Ghi nhớ Components (Memoize): Sử dụng React.memo để ghi nhớ các component và ngăn chặn các lần re-render không cần thiết.
• Sử dụng `useCallback` và `useMemo`: Ghi nhớ các hàm và giá trị được truyền dưới dạng props để ngăn các component con re-render không cần thiết.
• Tối ưu hóa Re-renders với `shouldComponentUpdate` (Class Components): Mặc dù các functional components và hooks hiện nay phổ biến hơn, nếu bạn đang làm việc với các class components cũ, hãy triển khai shouldComponentUpdate để kiểm soát khi nào một component re-render dựa trên sự thay đổi của prop và state.
• Phân tích hiệu năng ứng dụng của bạn: Sử dụng React DevTools để phân tích ứng dụng của bạn và xác định các điểm tắc nghẽn hiệu suất.
• Cân nhắc tính bất biến (Immutability): Coi state là bất biến, đặc biệt khi xử lý các đối tượng và mảng. Tạo các bản sao mới của dữ liệu thay vì thay đổi trực tiếp. Điều này làm cho việc phát hiện thay đổi hiệu quả hơn.

Automatic Batching và những cân nhắc toàn cầu

Gộp lệnh tự động, là một tối ưu hóa hiệu suất cốt lõi của React, mang lại lợi ích cho các ứng dụng trên toàn cầu bất kể vị trí, tốc độ mạng hay thiết bị của người dùng. Tuy nhiên, tác động của nó có thể rõ rệt hơn trong các kịch bản có kết nối internet chậm hơn hoặc các thiết bị kém mạnh mẽ hơn. Đối với khán giả quốc tế, hãy xem xét các điểm sau:

• Độ trễ mạng: Ở những khu vực có độ trễ mạng cao, việc giảm số lần re-render có thể cải thiện đáng kể khả năng phản hồi cảm nhận được của ứng dụng. Gộp lệnh tự động giúp giảm thiểu tác động của sự chậm trễ mạng.
• Khả năng của thiết bị: Người dùng ở các quốc gia khác nhau có thể sử dụng các thiết bị có sức mạnh xử lý khác nhau. Gộp lệnh tự động giúp đảm bảo trải nghiệm mượt mà hơn, đặc biệt trên các thiết bị cấp thấp có tài nguyên hạn chế.
• Ứng dụng phức tạp: Các ứng dụng có giao diện người dùng phức tạp và cập nhật dữ liệu thường xuyên sẽ được hưởng lợi nhiều nhất từ việc gộp lệnh tự động, bất kể vị trí địa lý của người dùng.
• Khả năng tiếp cận (Accessibility): Hiệu suất được cải thiện đồng nghĩa với khả năng tiếp cận tốt hơn. Một giao diện mượt mà và phản hồi nhanh hơn sẽ mang lại lợi ích cho người dùng khuyết tật dựa vào các công nghệ hỗ trợ.

Kết luận

Gộp lệnh tự động trong React là một kỹ thuật tối ưu hóa mạnh mẽ có thể cải thiện đáng kể hiệu suất của các ứng dụng React của bạn. Bằng cách tự động nhóm nhiều lần cập nhật state vào một lần re-render duy nhất, nó giúp giảm chi phí render, ngăn chặn các trạng thái không nhất quán và mang lại trải nghiệm người dùng mượt mà, phản hồi nhanh hơn. Bằng cách hiểu cách hoạt động của gộp lệnh tự động và tuân thủ các phương pháp tốt nhất để tối ưu hóa cập nhật state, bạn có thể xây dựng các ứng dụng React hiệu suất cao mang lại trải nghiệm tuyệt vời cho người dùng trên toàn thế giới. Tận dụng các công cụ như React DevTools giúp tinh chỉnh và tối ưu hóa hơn nữa hồ sơ hiệu suất của ứng dụng trong các môi trường toàn cầu đa dạng.