4 Lỗi Phổ Biến, Có Thể Bạn Mắc Phải

DSCF5909.jpg
Phuong Vo
Đăng ngày 14 tháng 11, 2023

Bề ngoài ReactJS cung cấp cho bạn một cách để xây dựng logic và UI người dùng một cách đơn giản. Nhưng trên thực tế nó cũng rất dễ khiến bạn lập trình giảm hiểu suất app hoặc website của bạn, nếu bạn không thật sự hiểu rõ ReactJS. Dưới đây mình liệt kệ 4 trường hợp hay mắc phải:

1. Tính toán quá nhiều lần
2. Prop Drilling
3. Quên xóa một số sự kiện khi sử dụng `useEffect`.
4. Không viết custom hook
4 lỗi thường gặp

1. Tính toán quá nhiều lần

Không ai phủ nhận việc khi functional component ra đời đã giúp việc viết một trở nên ngắn gọn hơn, nhanh hơn, vì nó giống với cách viết của một . Tuy nhiên chính vì sự tối giản này nên việc cần phải xem xét cẩn thận hơn. Ví dụ:


Hàm đang cần phụ thuộc vào state để thực thi một đoạn mã tính toán lớn nào đó. Tuy nhiên khi state hay mọi state nào có trong này thay đổi thì bigQuery đều phải chạy lại thêm cùng với lần rerender đó. Trường hợp này mình cần sử dụng để tránh việc tính toán lại.


Điều này có nghĩa khi dependencies thay đổi thì mới được thực thi lại.

2. Prop Drilling

Prop drilling là một thuật ngữ không chính thức để chỉ việc truyền dữ liệu từ component cha qua các component con lồng nhau để đến được với component con sâu hơn. Vấn đề chỉ thật sự xảy ra khi quá trình truyền dữ liệu này qua các component con mà trên thực tế chúng đang không cần sử dụng dự liệu này mà chỉ đơn giản là con đường vận chuyển đến với component cần được sử dụng.
Ví dụ:


Để giải quyết vấn đề này mình sử dụng .

3. Quên xóa một số sự kiện khi sử dụng .

Giống với class component, khi chúng ta thực hiện một số sự kiện nào đó, sau đó chúng ta phải sử dụng để dọn dẹp chúng đi. Ví dụ:

4. Không viết custom hook

Trong nhiều trường hợp có những đoạn logic lặp đi lặp lại nhiều lần trong dự án, lúc này cần viết chúng thành một custom hook để sử dụng . Ví dụ:


Với đoạn mã trên: gần như sẽ bị lặp lại ở rất nhiều nơi, cho nên mình cần viết nó thành một custom hook

button right
1. Tính toán quá nhiều lần
2. Prop Drilling
3. Quên xóa một số sự kiện khi sử dụng `useEffect`.
4. Không viết custom hook