𝗥𝗲𝗮𝗰𝘁 𝗛𝗼𝗼𝗸 𝗣𝗿𝗶𝗻𝗰𝗶𝗽𝗹𝗲𝘀
Đừng sử dụng useEffect cho mọi thứ. Nhiều lập trình viên đang lạm dụng hook này. Điều này tạo ra lỗi và khiến mã nguồn trở nên khó đọc.
Hạn chế sử dụng useEffect.
Hãy cố gắng chỉ sử dụng một useEffect cho mỗi trang. Việc sử dụng quá nhiều hook cho cùng một state sẽ gây ra sự nhầm lẫn. Bạn sẽ không còn kiểm soát được hook nào đang cập nhật state nào.
Ngừng sử dụng useEffect cho các sự kiện của người dùng.
Đừng dùng useEffect cho các thao tác click hoặc chạm. Thay vào đó, hãy sử dụng các event handler.
- Xấu: Sử dụng useEffect để cập nhật state sau một cú click.
- Tốt: Sử dụng một hàm như onClickBar để cập nhật state.
Các loại sự kiện bạn nên biết:
- Điều hướng trang và render lần đầu.
- Thay đổi kết nối mạng.
- WebSocket hoặc các cập nhật từ server theo thời gian thực.
Các hành động của người dùng như click không nên nằm trong useEffect. Hãy sử dụng các event handler trực tiếp cho những hành động này.
Chia nhỏ component theo props.
Nếu bạn sử dụng một boolean prop để thay đổi logic, hãy chia nhỏ component của mình ra. Đừng xây dựng một component duy nhất đảm nhận cả việc tạo và cập nhật dữ liệu.
Một component duy nhất với quá nhiều câu lệnh "if" sẽ trở nên quá lớn. Điều này khiến ứng dụng trở nên khó bảo trì.
- Xấu: Một component có prop "isAdd" để thay đổi các trường trong form.
- Tốt: Tạo một "RegisterComponent" và một "UpdateComponent."
Các component nhỏ sẽ dễ kiểm thử hơn. Chúng chạy nhanh hơn. Chúng giúp code luôn sạch sẽ.
Nguồn: https://dev.to/kkr0423/reactjs-the-principle-of-the-hook-3c31