Khi nào không nên sử dụng effect trong React?

Khi nào không nên sử dụng effect trong React?

  1. Không nên sử dụng effect để cập nhật DOM hoặc trạng thái trực tiếp trong quá trình render.

    Trong React, quá trình render phải là một phép tính thuần túy của JSX, không được bao gồm các hiệu ứng phụ (side effects) như sửa đổi DOM. Việc gọi các phương thức DOM trong quá trình render có thể dẫn đến lỗi vì DOM có thể chưa tồn tại.

    Ví dụ, trong component <VideoPlayer>, việc gọi play() hoặc pause() trực tiếp trong quá trình render để điều khiển trạng thái phát/dừng của video là không hợp lệ.Thay vào đó, nên bọc logic này trong useEffect để nó được thực thi sau khi quá trình render hoàn tất.

  2. Không nên sử dụng effect khi chỉ cần cập nhật trạng thái dựa trên trạng thái khác mà không cần tương tác với hệ thống bên ngoài.

    Nếu không có hệ thống bên ngoài nào và bạn chỉ muốn điều chỉnh một số trạng thái dựa trên trạng thái khác, bạn có thể không cần effect.

  3. Không nên sử dụng effect để xử lý các sự kiện trực tiếp từ người dùng.

    Các sự kiện như click chuột, nhập liệu, ... nên được xử lý bằng các trình xử lý sự kiện (event handler).

    Ví dụ, việc gửi yêu cầu mua hàng khi người dùng nhấp vào nút "Mua" nên được thực hiện trong trình xử lý sự kiện onClick của nút thay vì trong effect.

Nên nhớ rằng effect trong React thường được sử dụng để đồng bộ hóa với các hệ thống bên ngoài sau khi render.