Khi sử dụng useState, bạn có thể mắc lỗi và những lỗi này đôi khi có thể làm giảm hiệu suất. Do đó, ứng dụng của bạn có thể chạy không hiệu quả. Nếu bạn tránh được những lỗi thường gặp trong bài viết này, ứng dụng của bạn sẽ chạy hiệu quả và có hiệu suất tốt hơn.
1. Sử dụng hàm để khởi tạo useState
Một lỗi thường gặp khi dùng React đó là sử dụng hàm để khởi tạo useState. Nếu trạng thái ban đầu là kết quả của một hàm phức tạp, hàm này sẽ được gọi trên mỗi lần render. Điều này có thể ảnh hưởng nghiêm trọng đến hiệu suất, đặc biệt nếu hàm đó liên quan đến các phép tính phức tạp. Để tránh lãng phí tài nguyên trong các lần render tiếp theo, hãy sử dụng một hàm bên trong useState. Bằng cách này, hàm chỉ được gọi trong lần render ban đầu.
Trường hợp sử dụng không đúng:
const [data, setData] = useState(expensiveFunction());
Trong ví dụ trên, expensiveFuncttion được gọi ở mọi lần kết xuất, dẫn đến chi phí hiệu suất không cần thiết.
Trường hợp sử dụng đúng:
const [data, setData] = useState(() => expensiveFunction());
Bằng cách sử dụng hàm bên trong useState , expensiveFuncttion chỉ được gọi trong lần kết xuất ban đầu, giúp tiết kiệm tài nguyên ở những lần kết xuất tiếp theo.
2. Sử dụng sai hàm setState
Nhiều lập trình viên khi cập nhật state trong React, đặc biệt là khi state mới phụ thuộc vào state trước đó, thường mắc lỗi không sử dụng dạng hàm của setState. Việc cập nhật state mà không tính đến giá trị trước đó có thể gây ra sự cố nếu nhiều cập nhật được kích hoạt liên tiếp. Nguyên nhân là vì "count" có thể không có giá trị được cập nhật mới nhất. Để khắc phục điều này, hãy sử dụng dạng hàm của setState để đảm bảo state được cập nhật dựa trên giá trị trước đó của nó, giúp tăng cường độ tin cậy.
Trường hợp sử dụng không đúng:
setCount(count + 1);
Điều này có thể gây ra sự cố nếu nhiều bản cập nhật được kích hoạt liên tiếp vì số lượng có thể không có giá trị cập nhật mới nhất.
Trường hợp sử dụng đúng:
setCount(prevCount => prevCount + 1);
Cách tiếp cận này đảm bảo trạng thái được cập nhật dựa trên giá trị trước đó, khiến trạng thái trở nên đáng tin cậy hơn.
3. Vị trí useState không đúng
Lỗi phổ biến tiếp theo đó là đặt hook không đúng vị trí. Việc đặt hook bên trong các vòng lặp, điều kiện hoặc các hàm lồng nhau có thể phá vỡ cơ chế quản lý state của React. Cụ thể, useState không nên được đặt bên trong các câu lệnh điều kiện vì điều này vi phạm các quy tắc của React. Hãy giữ useState bên ngoài các điều kiện hoặc vòng lặp để React có thể quản lý đúng thứ tự gọi các hook.
Trường hợp sử dụng không đúng:
if (condition) { const [value, setValue] = useState(false);
}
Điều này vi phạm các quy tắc của React vì useState không được đặt bên trong các câu lệnh có điều kiện
Trường hợp sử dụng đúng:
const [value, setValue] = useState(false); if (condition) { // Use the state here
}
Bằng cách giữ useState bên ngoài các điều kiện hoặc vòng lặp, React có thể quản lý đúng thứ tự gọi các hook.
4. Đột biến trạng thái trực tiếp
Trong React, state nên được coi là bất biến. Việc thay đổi trực tiếp state có thể dẫn đến các lỗi và sự cố không mong muốn, đặc biệt là khi xử lý các đối tượng hoặc mảng. Thay đổi trực tiếp "user" sẽ không kích hoạt re-render vì React không phát hiện thấy sự thay đổi trạng thái. Để đảm bảo tính bất biến của state và kích hoạt re-render đúng cách, hãy tạo một đối tượng mới bằng cách sử dụng toán tử spread.
Trường hợp sử dụng không đúng:
const [user, setUser]= useState({ name: 'John', age: 35 });
user.name = 'Jane'; // Incorrect mutation
setUser(user); // Incorrect update
Việc thay đổi trực tiếp người dùng sẽ không kích hoạt việc kết xuất lại vì React không phát hiện ra sự thay đổi trạng thái.
Trường hợp sử dụng đúng:
setUser(prevUser => ({ ...prevUser, name: 'Jane'
}));
Tại đây, một đối tượng mới được tạo ra bằng cách sử dụng toán tử lan truyền, đảm bảo trạng thái không thay đổi và kích hoạt việc kết xuất lại phù hợp.
Phần kết luận
Trong bài viết này, chúng ta đã tìm hiểu cách hook useState hoạt động. Nếu bạn chú ý đến những điểm tôi đã giải thích, hiệu suất và hiệu quả của ứng dụng của bạn sẽ được cải thiện. Hy vọng các bạn sẽ cảm thấy hữu ích!