Vấn đề rerender component khi sử dụng React Context
react contextreactjsTrong tài liệu React, một component được rerender khi một trong các yếu tố sau thay đổi: props, state và context. Điều này hiển nhiên là hợp lý nhưng nó cũng sẽ là một vấn đề với context mà bạn cần chú ý.
Vấn đề:
-
Giả sử ta có một context chưa hai giá trị số: a và b. Giá trị của chúng được thay đổi trong Provider ở trên cùng trong cây component của ứng dụng. Ta có 2 component DisplayA và DisplayB là các component con bên trong cây thư mục và tất nhiên trong Provider.
-
DisplayA sẽ hiển thị giá trị a trong context
-
DisplayB sẽ hiển thị giá trị b trong context
-
Khi tăng giá trị của a hoặc b thì giá trị sẽ được update trên DisplayA và DisplayB
=> Vậy câu hỏi là: khi thay đổi giá trị a thì component DisplayA thay đổi. Vậy còn component DisplayB nó có bị rerender hay không?
Hẳn sẽ nhiều người chưa để ý vấn đề này và thực tế là component DisplayB cũng sẽ bị rerender và tất nhiên các sub component của DisplayA hoặc DisplayB sẽ rerender
Điều này để ta thấy những điều cần chú ý:
- Không lạm dụng việc sử dụng Context, có nhiều cách khác nhau mà trong tài liệu ReactJS có đề cập đến trong như Composition, render props...
- Không ném tất cả mọi thứ vào context để truyền xuống các component con. Các state này nên cùng chung mục đích hoặc chung cho các component con sử dụng nó.
- Khi truyền value vào Context đặc biệt function nên chú ý có nên dùng useCallback hay không? Vì nếu Provider mà viết dưới dạng function component và function đó sẽ khởi tạo mới mỗi lần Provider rerender => điều này dẫn đến context thay đổi và nó sẽ rerender tất cả các component sử dụng context đó.