Sử dụng React Memo để nâng cao hiệu năng của ứng dụng React

ReactJS Nov 05, 2020

Với việc phát triển của thế giới internet hiện nay, các thành phần trong trang web đang trở nên càng ngày càng phức tạp. Do đó, ở các ứng dụng web xây dựng bằng ReactJS, việc rerender lại nhiều lần các component phức tạp sẽ ảnh hưởng lớn đến hiệu năng của ứng dụng web, từ đó ảnh hưởng tới trải nghiệm của người sử dụng. Ở bản release React v16.6, React.memo đã được thêm vào cho các functional component, nhằm tối ưu hóa việc hiệu năng của quá trình render các functional component.

React.memo

React.memo là một higher order component, được sử dụng để bọc các component. Bằng việc sử dụng React.memo, React sẽ bỏ qua việc render lại component và sử dụng kết đã render lần cuối cùng nếu component của bạn render cùng kết quả với cùng props.

Lấy một ví dụ, background của component sẽ thay đổi thành đỏ nếu người dùng nhập vào một số chẵn, là xanh nếu người dùng nhập vào số lẻ.

Component ColoredSquare sẽ luôn được render lại mỗi khi người dùng đổi giá ở input, bất kể nó là giá trị gì. Để nâng cao hiệu năng của ứng dụng thì ta cần xử lý chỉ cho component render lại nếu giá trị đổi từ số chẵn sang lẻ hoặc lẻ sang chẵn. Ta có thể sử dụng React.memo như sau:

Sử dụng React.memo

Đối số thứ hai truyền vào React.memo sẽ là hàm dùng để React xác định có render lại hay không dựa trên sự thay đổi của props. Nếu giá trị trả về của hàm là true thì có nghĩa là React sẽ không render lại component này mà dùng lại kết quả đã render trước đó và ngược lại nếu trả về giá trị false thì React sẽ render lại component này.

React.memo vs shouldComponentUpdate

React.memoshouldComponentUpdate đều được sử dụng để cải thiện hiệu năng của ứng dụng React bằng việc cân nhắc qúa trình rerender của các component. Vậy chúng khác nhau ở đâu?

- Điều đầu tiên dễ thấy React.memo là một higher order component (HOC) được sinh ra nhằm sử dụng cho các functional component trong việc tối ưu hiệu suất render. Trong khi đó, shouldComponentUpdate là một method của class based component.
- Thứ hai, React.memo chỉ có thể xác định việc rerender dựa trên sự thay đổi của props trong khi shouldComponentUpdate có thể xác định việc rerender dựa trên sự thay đổi của cả propsstate.

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.