Sứ mệnh của Reactjs là tạo ra những ứng dụng website hấp dẫn với một tốc độ cực nhanh và mạnh mẽ, khả năng mở rộng và đơn giản thông qua việc tái sử dụng triệt để component bên trong nó. Tuy nhiên trong quá trình phát triển lập trình viên vô tình để một component phải re-render quá nhiều lần, đặc biệt là những component liên quan gọi api hay tính toán logic phức tạp. Điều đó làm ảnh hưởng rất lớn đến hiệu năng. Bài hôm nay chúng ta sẽ cùng tìm hiểu các khái niệm về memo và 2 hook rất hay được sử dụng để giảm việc re-render không cần thiết, từ đó hiệu suất sẽ tăng lên. Nào, chúng ta cùng bắt đầu nhé.
- React memo là gì?
Reacts memo là một HOC (Higher-Order Components). Có thể bạn chưa hiểu HOC là gì. Hiểu một cách rất đơn giản nó là một hàm nhận vào 1 component và trả về 1 component mới.
Với memo, các props được truyền từ component cha xuống component con sẽ được ghi nhớ. Từ đó nó sẽ quyết định xem có re-render lại component con hay không. Nếu giá trị props truyền từ component cha xuống component con bị thay đổi thì component con được memo mới bị re-render. Từ đó sẽ tránh được việc re-render lại component nhiều lần không cần thiết nhờ đó mà hiệu năng ứng dụng được cải thiện. - Nó được dùng khi nào
Bản thân memo là ghi nhớ 1 function component. Chỉ xác định re-render khi có sự thay đổi giá trị của props truyền vào component mà nó đang bọc. Vậy khi nào thì chúng ta cần sử dụng đến memo trong reactjs. Dưới đây là 4 cách dùng phổ biến nhất của reactjs Memo:
– Dùng cho function component
– Component thường xuyên bị re-render
– Component bị re-render dù cho props truyền vào k bị thay đổi giá trị
– Component bị chứa 1 lượng tính toán lớn
Chúng ta sẽ cùng đi một ví dụ cụ thể để hiểu rõ hơn về vấn đề này.
Đây là một ví dụ đơn giản. Ứng dụng giúp hiển thị list todo và đồng thời xử lý sự kiện click để tăng biến count lên 1 đơn vị.
Đây là kết quả khi chạy ứng dụng:
Mỗi khi click vào button Increment để tăng giá trị count lên 1 đơn vị thì component Todos cũng bị re-render một cách không cần thiết. Lý do là bởi vì khi state count bị thay đổi khi click button increment thì toàn bộ component Memo cũng bị render lại dù cho state được truyền vào component Todos không bị thay đổi.
Mong muốn của chúng ta chắc chắn sẽ là, nếu props truyền vào component Todos không bị thay đổi giá trị thì component không bị render. Lúc này memo được sinh ra để giải quyết vấn đề này. Chúng ta sẽ bọc component Todos trong memo, lúc này chỉ khi giá trị props truyền vào là todos thay đổi thì component mới thay đổi.
Đây là code bọc component vào memo. Chúng ta cùng xem lại kết quả sau thay đổi khi click vào button Increment. Component Todos đã không bị re-render nữa. Bài toán đã được giải quyết.
Như vậy là chúng ta đã cùng tìm hiểu về memo trong reactjs, nó là gì, dùng khi nào qua ứng dụng cụ thể. Ở bài viết tiếp theo, chúng ta sẽ đi sâu hơn về 2 hook cực kì quan trọng trong Reactjs để cải thiện hiệu năng đó là useMemo và useCallback. Các bạn cùng đón đọc ở link này nhé.
