Nội dung

24. React.memo & useCallback_ Cách Giảm Số Lần Render Component Con Hiệu Quả

Trong video này, chúng ta cùng khám phá cách sử dụng hook useCallback trong React để tối ưu hiệu suất khi làm việc với component con. Đây là một trong những kỹ thuật quan trọng giúp giảm số lần render không cần thiết, đặc biệt hữu ích trong các ứng dụng React có cấu trúc phức tạp và nhiều tầng component. Mở đầu bài học, bạn sẽ được làm rõ vấn đề thường gặp: khi component cha render lại, các hàm callback được định nghĩa trực tiếp trong hàm cha sẽ tạo ra một phiên bản mới tại mỗi lần render, khiến React hiểu rằng props truyền xuống component con đã thay đổi. Mặc dù giá trị thực tế không thay đổi, nhưng do tham chiếu trong bộ nhớ khác nhau, component con vẫn bị render lại không cần thiết. Từ đó, chúng ta tiếp tục với cách khắc phục bằng hook useCallback. Bài giảng sẽ hướng dẫn cách sử dụng useCallback đúng cách để ghi nhớ hàm callback, đảm bảo rằng hàm không bị tạo mới ở mỗi lần render trừ khi giá trị phụ thuộc thay đổi. Điều này đặc biệt hữu ích khi kết hợp với React.memo để component con không bị render lại nếu props không thực sự thay đổi. Bạn sẽ được hướng dẫn từng bước cụ thể, từ khái niệm đến ví dụ trực quan, giúp hiểu rõ khi nào nên dùng useCallback và làm thế nào để sử dụng nó hiệu quả. Video cũng phân tích các lưu ý khi để dependencies trong useCallback, từ đó giúp bạn đưa ra quyết định phù hợp với từng tình huống thực tế trong dự án. Cuối video, bạn sẽ nắm được cách kết hợp giữa useCallback và React.memo để kiểm soát tốt hơn quá trình render trong React, cải thiện hiệu suất và trải nghiệm người dùng cho ứng dụng của bạn.